@font-face {
font-family: "Onest";
font-style: normal;
font-display: swap;
font-weight: 300 800;
src: url("fonts/onest-latin-wght-normal.3db826ed1c5d.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
U+0308, U+0329, U+2000-202E, U+2030-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
U+FFFD;
}
@font-face {
font-family: "Onest";
font-style: normal;
font-display: swap;
font-weight: 300 800;
src: url("fonts/onest-latin-ext-wght-normal.3e2cb9888206.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Onest";
font-style: normal;
font-display: swap;
font-weight: 300 800;
src: url("fonts/onest-cyrillic-wght-normal.fe2bd26ae82a.woff2") format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "Onest";
font-style: normal;
font-display: swap;
font-weight: 300 800;
src: url("fonts/onest-cyrillic-ext-wght-normal.11a468877c94.woff2") format("woff2");
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: "Onest RU";
font-style: normal;
font-display: swap;
font-weight: 300 800;
src: url("fonts/onest-ru-wght-normal.47009e276a47.woff2") format("woff2");
unicode-range: U+0020-007E, U+00A0-00BF, U+00D7, U+00F7, U+02BB-02BC, U+0301, U+0401, U+040E, U+0410-044F,
U+0451, U+045E, U+0492-0493, U+049A-049B, U+04B2-04B3, U+2010-2027, U+2030-203A, U+20AC,
U+20BD, U+2116, U+2122, U+2190-2193, U+2212;
}
@font-face {
font-family: "Onest fallback";
src: local("Arial"), local("ArialMT");
font-weight: 300 550;
size-adjust: 104%;
ascent-override: 93.3%;
descent-override: 29.3%;
line-gap-override: 0%;
}
@font-face {
font-family: "Onest fallback";
src: local("Arial Bold"), local("Arial-BoldMT");
font-weight: 551 800;
size-adjust: 101%;
ascent-override: 96%;
descent-override: 30.2%;
line-gap-override: 0%;
}
:root {
--font-sans: "Onest", "Onest fallback", system-ui, sans-serif;
--lp-gutter: var(--space-20);
--lp-max: calc(1200px + 2 * var(--lp-gutter));
--lp-section: calc(var(--space-32) + var(--space-24));
--lp-hero: clamp(40px, 5.6vw, 72px);
--lp-h1: clamp(32px, 4.2vw, 52px);
--lp-h2: clamp(30px, 3.4vw, 44px);
--lp-lead: clamp(17px, 1.3vw, 19px);
--lp-text: 16px;
--lp-form: 560px;
--lp-anchor: calc(var(--space-32) * 2 + var(--space-16));
--lp-bar: 64px;
--lp-r-inner: var(--space-8);
--lp-r-card: var(--space-16);
--lp-r-frame: var(--space-24);
--lp-r-box: calc(var(--space-20) * 2);
--lp-ring: inset 0 0 0 1px var(--pub-hairline);
--lp-card: var(--lp-ring), 0 1px 4px -2px var(--pub-elev-1);
--lp-lift: 0 0.36px 1.8px -1.4px var(--pub-elev-1), 0 1.37px 6.87px -2.8px var(--pub-elev-2),
0 6px 30px -4.25px var(--pub-elev-3);
--lp-glow: 0 0 100px -28px var(--pub-glow);
}
html[lang="ru"] {
--font-sans: "Onest RU", "Onest", "Onest fallback", system-ui, sans-serif;
}
@media (min-width: 760px) {
:root {
--lp-gutter: var(--space-32);
--lp-section: calc(var(--space-32) * 2);
}
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-padding-top: var(--lp-anchor);
}
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
body {
margin: 0;
min-height: 100dvh;
display: flex;
flex-direction: column;
overflow-x: clip;
background-color: var(--pub-canvas);
color: var(--color-text);
font-family: var(--font-sans);
font-size: var(--lp-text);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
main {
flex: 1 0 auto;
}
h1,
h2,
h3 {
color: var(--pub-ink);
}
h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure {
margin: 0;
}
ul,
ol {
padding: 0;
list-style: none;
}
a {
color: var(--color-brand-ink);
text-underline-offset: 3px;
}
img {
display: block;
max-width: 100%;
height: auto;
}
button {
font: inherit;
color: inherit;
}
:focus-visible {
outline: 2px solid var(--pub-brand);
outline-offset: 3px;
}
::selection {
background: var(--pub-wash);
color: var(--color-text);
}
.num {
font-variant-numeric: lining-nums proportional-nums;
}
td.num,
th.num,
table .num {
font-variant-numeric: var(--font-numeric);
}
.wrap {
width: 100%;
max-width: var(--lp-max);
margin-inline: auto;
padding-inline: var(--lp-gutter);
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
font-family: system-ui, sans-serif;
}
.skip {
position: absolute;
display: inline-flex;
align-items: center;
min-height: 44px;
left: var(--space-16);
top: calc(var(--space-32) * -2);
z-index: 30;
padding: var(--space-8) var(--space-16);
border-radius: var(--radius-pill);
background: var(--color-card);
color: var(--color-text);
box-shadow: var(--lp-ring);
}
.skip:focus {
top: var(--space-16);
}
.icon {
flex: none;
}
.btn {
--btn-ring: var(--lp-ring);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-8);
min-height: 44px;
padding: 0 var(--space-24);
border: 0;
border-radius: var(--radius-pill);
font-size: 15px;
font-weight: 500;
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
}
.btn--primary {
--btn-ring: inset 0 0 0 1px var(--pub-brand);
background: var(--color-card);
color: var(--pub-brand);
box-shadow: var(--btn-ring), 0 1px 3px -1px var(--pub-elev-1), 0 8px 24px -10px var(--pub-glow);
}
.btn--primary:hover {
--btn-ring: inset 0 0 0 2px var(--pub-brand);
background: var(--pub-canvas-alt);
}
.btn--secondary {
background: var(--color-card);
color: var(--pub-ink);
box-shadow: var(--btn-ring), 0 1px 3px -1px var(--pub-elev-1);
}
.btn--secondary:hover {
--btn-ring: inset 0 0 0 1px var(--color-field-border);
}
.btn--ghost {
background: transparent;
color: var(--color-brand-ink);
padding-inline: var(--space-8);
}
.btn--ghost:hover {
text-decoration: underline;
}
.btn--lg {
min-height: 52px;
padding: 0 var(--space-32);
font-size: 16px;
}
.btn--compact {
min-height: 40px;
padding: 0 calc(var(--space-16) + 2px);
font-size: 14px;
}
@media (max-width: 759px) {
.btn--compact {
min-height: 44px;
}
}
.btn--block {
width: 100%;
}
.btn--go::after {
content: "";
width: 7px;
height: 7px;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
transform: rotate(45deg);
}
@media (prefers-reduced-motion: no-preference) {
.btn {
transition:
background-color var(--duration-fast) var(--ease-standard),
box-shadow var(--duration-fast) var(--ease-standard),
transform var(--duration-fast) var(--ease-standard);
}
.btn:hover {
transform: translateY(-1px);
}
.btn:active {
transform: none;
}
.btn--go::after {
transition: transform var(--duration-fast) var(--ease-standard);
}
.btn--go:hover::after {
transform: translateX(3px) rotate(45deg);
}
}
.seg,
.lang {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 3px;
border-radius: var(--radius-pill);
background: var(--pub-canvas-alt);
box-shadow: var(--lp-ring);
}
.seg[hidden] {
display: none;
}
.seg__item,
.lang__link {
display: inline-grid;
place-items: center;
min-width: 34px;
min-height: 32px;
padding: 0 var(--space-8);
border: 0;
border-radius: var(--radius-pill);
background: transparent;
color: var(--color-muted);
font-size: 13px;
font-weight: 500;
text-decoration: none;
cursor: pointer;
}
.seg__item[aria-pressed="true"],
.lang__link[aria-current] {
background: var(--color-card);
color: var(--color-text);
box-shadow: var(--lp-card);
}
.bar {
position: sticky;
top: 0;
z-index: 20;
background: var(--glass-chrome-bg);
-webkit-backdrop-filter: var(--glass-chrome-filter);
backdrop-filter: var(--glass-chrome-filter);
box-shadow: inset 0 -1px 0 var(--pub-hairline);
}
.bar__row {
display: flex;
align-items: center;
gap: var(--space-16);
min-height: var(--lp-bar);
}
.wordmark {
display: inline-flex;
align-items: center;
gap: var(--space-8);
color: var(--pub-ink);
font-size: var(--text-wordmark-size);
font-weight: var(--text-wordmark-weight);
letter-spacing: var(--text-wordmark-tracking);
line-height: 1;
text-decoration: none;
text-transform: lowercase;
}
.wordmark__bird {
width: 32px;
height: 32px;
padding: 6px;
border-radius: var(--radius-input);
background: var(--pub-mark);
color: var(--pub-on-mark);
}
.wordmark--small {
font-size: 18px;
}
.wordmark--small .wordmark__bird {
width: 28px;
height: 28px;
padding: 5px;
}
.bar__nav {
display: none;
gap: var(--space-4);
margin-left: var(--space-16);
}
.bar__link {
padding: var(--space-8) var(--space-12);
border-radius: var(--radius-pill);
color: var(--color-text);
font-size: 15px;
font-weight: 500;
text-decoration: none;
}
.bar__link:hover {
color: var(--color-brand-ink);
}
.bar__end {
display: flex;
align-items: center;
gap: var(--space-8);
margin-left: auto;
}
.bar__lang,
.bar__theme,
.bar__login {
display: none;
}
.bar__login {
padding: var(--space-8) var(--space-12);
color: var(--color-text);
font-size: 15px;
font-weight: 500;
text-decoration: none;
}
.bar__login:hover {
color: var(--color-brand-ink);
}
.bar__kind {
display: none;
}
@media (min-width: 760px) {
.bar__login,
.bar__lang {
display: block;
}
}
@media (min-width: 1080px) {
.bar__nav {
display: flex;
}
.bar__theme:not([hidden]) {
display: inline-flex;
}
.bar__kind {
display: inline;
}
}
.menu {
position: relative;
}
.menu__toggle {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: var(--radius-pill);
box-shadow: var(--lp-card);
background: var(--color-card);
list-style: none;
cursor: pointer;
}
.menu__toggle::-webkit-details-marker {
display: none;
}
.menu__icon,
.menu__icon::before,
.menu__icon::after {
display: block;
width: 18px;
height: 2px;
border-radius: 2px;
background: currentColor;
}
.menu__icon {
position: relative;
}
.menu__icon::before,
.menu__icon::after {
content: "";
position: absolute;
left: 0;
}
.menu__icon::before {
top: -6px;
}
.menu__icon::after {
top: 6px;
}
.menu[open] .menu__icon {
background: transparent;
}
.menu[open] .menu__icon::before {
top: 0;
transform: rotate(45deg);
}
.menu[open] .menu__icon::after {
top: 0;
transform: rotate(-45deg);
}
.menu__panel {
position: absolute;
right: 0;
top: calc(100% + var(--space-8));
z-index: 21;
display: grid;
gap: 2px;
min-width: 240px;
padding: var(--space-8);
border-radius: var(--lp-r-card);
background: var(--color-card);
box-shadow: var(--lp-ring), var(--lp-lift);
}
.menu__panel > a {
padding: var(--space-12);
border-radius: var(--radius-button);
color: var(--color-text);
font-weight: 500;
text-decoration: none;
}
.menu__panel > a:hover {
background: var(--pub-canvas-alt);
}
.menu__theme:not([hidden]),
.menu__lang .lang {
display: flex;
}
.menu__theme:not([hidden]),
.menu__lang {
margin: var(--space-8) var(--space-12);
}
.menu__theme .seg__item,
.menu__lang .lang__link {
flex: 1 1 0;
min-height: 44px;
font-size: 15px;
}
@media (min-width: 760px) {
.menu__login,
.menu__lang {
display: none;
}
}
@media (min-width: 1080px) {
.menu {
display: none;
}
}
.section {
padding-block: var(--lp-section);
}
.section--alt {
background: var(--pub-wash);
}
.page-home .section--alt,
.page-pricing .section--alt {
background: none;
}
.page-home .section--alt > .wrap,
.page-pricing .section--alt > .wrap {
width: calc(100% - 2 * var(--space-12));
max-width: calc(var(--lp-max) - 2 * var(--lp-gutter));
padding: var(--space-32) var(--space-20);
border-radius: calc(var(--lp-r-box) - var(--space-12));
background: var(--color-card);
box-shadow: var(--lp-ring), var(--lp-lift);
}
@media (min-width: 760px) {
.page-home .section--alt > .wrap,
.page-pricing .section--alt > .wrap {
width: calc(100% - 2 * var(--lp-gutter));
padding: calc(var(--space-32) + var(--space-8)) calc(var(--space-32) * 1.5 + var(--space-8));
border-radius: var(--lp-r-box);
}
}
@media (min-width: 1100px) {
.page-home .section--alt > .wrap,
.page-pricing .section--alt > .wrap {
padding-inline: calc(var(--space-32) * 2 + var(--space-8));
}
}
.section-head {
display: grid;
gap: var(--space-12);
max-width: 720px;
margin-bottom: calc(var(--space-24) + var(--space-4));
}
.section-head--center {
margin-inline: auto;
text-align: center;
justify-items: center;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-8);
justify-self: start;
max-width: 100%;
padding: var(--space-4) var(--space-12);
border-radius: var(--radius-sheet);
background: var(--color-card);
box-shadow: var(--lp-card);
color: var(--pub-brand);
font-size: 13px;
font-weight: 500;
line-height: 1.5;
}
.eyebrow::before {
content: "";
flex: none;
width: 6px;
height: 6px;
border-radius: 2px;
background: currentColor;
}
.section-head--center .eyebrow {
justify-self: center;
}
.section-title {
font-size: var(--lp-h2);
font-weight: 600;
line-height: 1.08;
letter-spacing: -0.032em;
text-wrap: balance;
}
.page-title {
font-size: var(--lp-h1);
font-weight: 600;
line-height: 1.06;
letter-spacing: -0.032em;
text-wrap: balance;
}
.lead {
color: var(--pub-ink-2);
font-size: var(--lp-lead);
line-height: 1.5;
text-wrap: pretty;
}
.note {
color: var(--color-muted);
font-size: 14px;
}
.page-head {
display: grid;
gap: var(--space-16);
padding-block: calc(var(--space-32) * 2) var(--space-32);
max-width: 820px;
}
.chip {
display: inline-flex;
flex: none;
align-items: center;
gap: 6px;
padding: 2px 10px 2px 8px;
border-radius: var(--radius-pill);
background: var(--color-card);
color: var(--pub-ink-2);
box-shadow: var(--lp-ring);
font-size: var(--text-caption-size);
font-weight: 500;
line-height: 1.6;
white-space: nowrap;
}
.chip::before {
content: "";
flex: none;
width: 6px;
height: 6px;
border-radius: var(--radius-pill);
background: var(--color-muted);
}
.chip--open::before {
background: var(--pub-dot-open);
}
.chip--pilot::before {
background: var(--pub-dot-pilot);
}
.chip--trial::before {
background: var(--pub-dot-trial);
}
.chip--brand {
color: var(--pub-brand);
box-shadow: inset 0 0 0 1px var(--pub-brand);
}
.chip--brand::before {
background: var(--pub-brand);
}
.chip--inline {
margin-left: var(--space-8);
vertical-align: middle;
}
.ic {
display: inline-grid;
place-items: center;
flex: none;
width: var(--ic, 40px);
height: var(--ic, 40px);
border-radius: calc(var(--ic, 40px) * 0.28);
background: var(--ic-bg, var(--mod-soft, var(--color-brand-soft)));
color: var(--ic-fg, var(--mod-ink, var(--color-brand-ink)));
}
.ic__glyph {
width: 58%;
height: 58%;
}
[data-kpi] .ic:not([data-mod]) {
--ic-bg: var(--kpi-tint);
--ic-fg: var(--kpi-ink);
}
.plans {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-16);
}
@media (min-width: 900px) {
.plans {
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: stretch;
}
}
.plan {
display: flex;
flex-direction: column;
gap: var(--space-16);
padding: calc(var(--space-24) + var(--space-4));
border-radius: var(--lp-r-frame);
background: var(--color-card);
box-shadow: var(--lp-card);
}
.plan--featured {
box-shadow: inset 0 0 0 2px var(--pub-brand), var(--lp-lift), var(--lp-glow);
}
.plan__title-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-8);
}
.plan__name {
font-size: 18px;
font-weight: 600;
}
.plan__price {
color: var(--pub-ink);
font-size: 40px;
font-weight: 600;
letter-spacing: -0.037em;
line-height: 1.05;
}
.plan__period {
color: var(--color-muted);
font-size: 14px;
font-weight: 500;
}
.plan__limits {
display: grid;
gap: var(--space-8);
padding-top: var(--space-16);
box-shadow: inset 0 1px 0 var(--pub-hairline);
color: var(--pub-ink-2);
font-size: 15px;
}
.plan__limits li {
display: flex;
gap: var(--space-8);
}
.plan__tick {
flex: none;
margin-top: 3px;
color: var(--pub-brand);
}
.plan__note {
color: var(--color-muted);
font-size: 14px;
}
.plan__cta {
margin-top: auto;
}
.plans__foot {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-12) var(--space-24);
margin-top: var(--space-24);
}
.plans__say {
color: var(--color-muted);
font-size: 14px;
max-width: 640px;
}
.faq {
display: grid;
gap: var(--space-32);
}
@media (min-width: 1000px) {
.faq {
grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
gap: calc(var(--space-32) * 2);
}
}
.faq__head {
display: grid;
gap: var(--space-12);
align-content: start;
}
.faq__list {
padding: var(--space-4) var(--space-24);
border-radius: var(--lp-r-frame);
background: var(--color-card);
box-shadow: var(--lp-ring), var(--lp-lift);
}
.section--alt .faq__list {
padding-inline: 0;
background: none;
box-shadow: none;
}
.qa + .qa {
box-shadow: inset 0 1px 0 var(--pub-hairline);
}
.qa summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-16);
min-height: 56px;
padding: var(--space-16) 0;
color: var(--pub-ink);
font-size: 17px;
font-weight: 500;
letter-spacing: -0.01em;
list-style: none;
cursor: pointer;
}
.qa summary::-webkit-details-marker {
display: none;
}
.qa summary::after {
content: "";
flex: none;
width: 9px;
height: 9px;
margin-right: var(--space-4);
border-right: 2px solid var(--color-muted);
border-bottom: 2px solid var(--color-muted);
transform: rotate(45deg) translateY(-3px);
}
.qa[open] summary::after {
transform: rotate(-135deg) translateY(-3px);
}
.qa p {
padding-bottom: var(--space-20);
color: var(--pub-ink-2);
max-width: 720px;
}
.closing {
padding-block: var(--lp-section);
}
.closing__panel {
display: grid;
gap: var(--space-24);
justify-items: center;
padding: calc(var(--space-32) * 1.5) var(--space-20);
border-radius: calc(var(--lp-r-box) - var(--space-12));
background: linear-gradient(180deg, var(--pub-band-from), var(--pub-band-to)) var(--pub-canvas);
box-shadow: var(--lp-ring);
text-align: center;
}
@media (min-width: 900px) {
.closing__panel {
padding: calc(var(--space-32) + var(--space-24)) calc(var(--space-32) * 2);
border-radius: var(--lp-r-box);
}
}
.closing__title {
max-width: 760px;
margin-inline: auto;
font-size: var(--lp-h2);
font-weight: 600;
line-height: 1.08;
letter-spacing: -0.032em;
text-wrap: balance;
}
.closing__lead {
max-width: 620px;
margin: var(--space-12) auto 0;
color: var(--pub-ink-2);
font-size: var(--lp-lead);
}
.closing__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-12);
}
.foot {
padding-block: calc(var(--space-32) + var(--space-16)) var(--space-32);
background: var(--pub-inverse-bg);
color: var(--pub-on-inverse-muted);
font-size: 14px;
}
.foot .wordmark {
color: var(--pub-on-inverse);
}
.foot__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-32) var(--space-16);
}
.foot__brand,
.foot__col:nth-child(4) {
grid-column: 1 / -1;
}
@media (min-width: 760px) {
.foot__grid {
grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
}
.foot__brand,
.foot__col:nth-child(4) {
grid-column: auto;
}
}
.foot__brand {
display: grid;
gap: var(--space-12);
align-content: start;
}
.foot__copy {
color: var(--pub-on-inverse-muted);
}
.foot__title {
margin-bottom: var(--space-12);
color: var(--pub-on-inverse);
font-size: 14px;
font-weight: 600;
}
.foot__col ul {
display: grid;
gap: var(--space-8);
}
@media (max-width: 759px) {
.foot__col ul {
gap: 0;
}
.foot__col a {
display: inline-flex;
align-items: center;
min-height: 44px;
}
}
.foot a {
color: var(--pub-on-inverse-muted);
text-decoration: none;
}
.foot a:hover {
color: var(--pub-on-inverse);
text-decoration: underline;
}
.foot__kind {
color: var(--pub-on-inverse-muted);
}
.dock {
position: fixed;
right: max(var(--space-16), env(safe-area-inset-right));
bottom: max(var(--space-16), env(safe-area-inset-bottom));
z-index: 19;
display: flex;
align-items: center;
gap: var(--space-8);
}
.dock .btn {
min-height: 48px;
box-shadow: var(--btn-ring), var(--lp-lift);
}
.dock__call {
width: 48px;
padding: 0;
}
@media (max-width: 759px) {
.dock__join {
width: 48px;
padding: 0;
}
.dock__join span {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
}
body:has(.dock) .foot {
padding-bottom: calc(var(--space-32) * 3);
}
@media (max-width: 699px) {
.rail {
display: flex;
gap: var(--space-12);
margin-inline: calc(var(--lp-gutter) * -1);
padding: var(--space-4) var(--lp-gutter) var(--space-12);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--lp-gutter);
scrollbar-width: none;
}
.rail > * {
flex: 0 0 84%;
scroll-snap-align: start;
}
}
body:has(.signin[open]) {
overflow: hidden;
}
.signin {
width: min(100% - 2 * var(--space-16), 560px);
max-width: none;
max-height: calc(100dvh - 2 * var(--space-16));
margin: auto;
padding: 0;
overflow: auto;
border: 0;
border-radius: calc(var(--lp-r-frame) + var(--space-4));
background: var(--color-card);
color: var(--color-text);
box-shadow: var(--lp-ring), var(--lp-lift), var(--lp-glow);
}
.signin::backdrop {
background: var(--glass-scrim);
-webkit-backdrop-filter: var(--glass-chrome-filter);
backdrop-filter: var(--glass-chrome-filter);
}
.signin__head {
position: relative;
display: grid;
gap: var(--space-8);
padding: calc(var(--space-24) + var(--space-4)) calc(var(--space-24) + var(--space-4)) var(--space-20);
background: linear-gradient(180deg, var(--pub-band-from), var(--pub-band-to)) var(--pub-canvas);
}
.signin__mark {
display: grid;
place-items: center;
width: 44px;
height: 44px;
margin-bottom: var(--space-8);
padding: var(--space-8);
border-radius: var(--radius-button);
background: var(--pub-mark);
box-shadow: 0 8px 20px -10px var(--pub-glow);
color: var(--pub-on-mark);
}
.signin__bird {
width: 100%;
height: 100%;
}
.signin__close {
position: absolute;
top: var(--space-16);
right: var(--space-16);
display: grid;
place-items: center;
width: 40px;
height: 40px;
border: 0;
border-radius: var(--radius-pill);
background: var(--color-card);
box-shadow: var(--lp-card);
color: var(--pub-ink-2);
cursor: pointer;
}
.signin__close:hover {
color: var(--pub-ink);
}
.signin__title {
font-size: 28px;
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.03em;
}
.signin__lead {
color: var(--pub-ink-2);
font-size: 15px;
}
.signin__step {
display: grid;
gap: var(--space-16);
padding: var(--space-20) calc(var(--space-24) + var(--space-4)) calc(var(--space-24) + var(--space-4));
}
.signin__step[hidden] {
display: none;
}
.signin__who {
display: grid;
gap: var(--space-12);
}
@media (min-width: 520px) {
.signin__who {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.signin-opt {
position: relative;
display: grid;
justify-items: start;
gap: var(--space-4);
width: 100%;
min-height: calc(var(--space-32) * 5);
padding: var(--space-20);
border: 0;
border-radius: var(--lp-r-card);
background: var(--color-card);
box-shadow: var(--lp-card);
color: var(--color-text);
font: inherit;
text-align: left;
text-decoration: none;
cursor: pointer;
}
.signin-opt__ic {
display: grid;
place-items: center;
width: 52px;
height: 52px;
margin-bottom: var(--space-12);
border-radius: var(--radius-button);
background: var(--pub-wash);
color: var(--pub-brand);
}
.signin-opt__name {
color: var(--pub-ink);
font-size: 20px;
font-weight: 600;
letter-spacing: -0.02em;
}
.signin-opt__hint {
color: var(--color-muted);
font-size: 14px;
line-height: 1.45;
}
.signin-opt__go {
position: absolute;
top: var(--space-20);
right: var(--space-20);
color: var(--color-muted);
}
.signin-opt:is(:hover, :focus-visible) {
box-shadow: inset 0 0 0 1px var(--pub-brand), var(--lp-lift), var(--lp-glow);
}
.signin-opt:is(:hover, :focus-visible) .signin-opt__ic {
background: var(--pub-mark);
color: var(--pub-on-mark);
}
.signin-opt:is(:hover, :focus-visible) .signin-opt__go {
color: var(--pub-brand);
}
.signin__foot {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-4) var(--space-12);
color: var(--color-muted);
font-size: 14px;
}
.signin__foot a {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--color-brand-ink);
font-weight: 500;
text-decoration: none;
}
.signin__foot a:hover {
text-decoration: underline;
}
.signin__bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-8) var(--space-12);
}
.signin__back {
display: inline-flex;
align-items: center;
gap: var(--space-8);
min-height: 40px;
padding: 0 var(--space-16) 0 var(--space-12);
border: 0;
border-radius: var(--radius-pill);
background: var(--pub-canvas-alt);
box-shadow: var(--lp-ring);
color: var(--pub-ink-2);
font: inherit;
font-size: 14px;
font-weight: 500;
cursor: pointer;
}
.signin__back:hover {
color: var(--pub-ink);
}
.signin__sub {
font-size: 17px;
font-weight: 600;
}
.signin__sub:focus {
outline: none;
}
.signin__roles {
display: grid;
gap: var(--space-8);
}
@media (min-width: 520px) {
.signin__roles {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.signin-role {
display: flex;
align-items: center;
gap: var(--space-12);
min-height: 56px;
padding: var(--space-8) var(--space-12);
border-radius: var(--radius-button);
background: var(--color-card);
box-shadow: var(--lp-card);
color: var(--color-text);
font-weight: 500;
text-decoration: none;
}
.signin-role__ic {
box-sizing: content-box;
flex: none;
padding: var(--space-8);
border-radius: var(--radius-input);
background: var(--pub-wash);
color: var(--pub-brand);
}
.signin-role:is(:hover, :focus-visible) {
box-shadow: inset 0 0 0 1px var(--pub-brand), var(--lp-lift);
}
.signin-role:is(:hover, :focus-visible) .signin-role__ic {
background: var(--pub-mark);
color: var(--pub-on-mark);
}
@media (max-width: 519px) {
.signin {
width: 100%;
max-height: calc(100dvh - var(--space-32));
margin: auto 0 0;
border-radius: calc(var(--lp-r-frame) + var(--space-4)) calc(var(--lp-r-frame) + var(--space-4)) 0 0;
}
.signin__step {
padding-bottom: max(var(--space-24), env(safe-area-inset-bottom));
}
.signin__head::before {
content: "";
position: absolute;
top: var(--space-8);
left: calc(50% - var(--space-20));
width: calc(var(--space-20) * 2);
height: var(--space-4);
border-radius: var(--radius-pill);
background: var(--pub-hairline);
}
.signin-opt {
min-height: 0;
}
}
.bar.is-scrolled {
background: var(--glass-chrome-bg-scrolled);
box-shadow: inset 0 -1px 0 var(--pub-hairline), 0 8px 24px -18px var(--pub-elev-1);
}
@keyframes lp-rise {
from {
transform: translateY(var(--space-12));
}
}
@media screen and (prefers-reduced-motion: no-preference) {
.js-motion .rv {
opacity: 0;
transform: translateY(var(--space-32));
transition:
opacity calc(var(--duration-slow) * 2) var(--ease-decelerate),
transform calc(var(--duration-slow) * 2) var(--ease-decelerate);
}
.js-motion .shot--frame.rv {
transform: translateY(calc(var(--space-32) * 1.5)) scale(0.96);
}
.js-motion .rv.is-in {
opacity: 1;
transform: none;
}
.js-motion .rv--1 {
transition-delay: calc(var(--duration-fast) * 0.6);
}
.js-motion .rv--2 {
transition-delay: calc(var(--duration-fast) * 1.2);
}
.js-motion .rv--3 {
transition-delay: calc(var(--duration-fast) * 1.8);
}
.bar {
transition:
background-color var(--duration-normal) var(--ease-standard),
box-shadow var(--duration-normal) var(--ease-standard);
}
.pcard,
.plan,
.secgrid__item,
.steps__item,
.pmod,
.mod__ic,
.shot__img {
transition:
transform var(--duration-normal) var(--ease-standard),
box-shadow var(--duration-normal) var(--ease-standard);
}
.pcard:hover,
.plan:hover,
.secgrid__item:hover,
.steps__item:hover {
transform: translateY(calc(var(--space-4) * -1));
box-shadow: var(--lp-ring), var(--lp-lift), var(--lp-glow);
}
.plan--featured:hover {
box-shadow: inset 0 0 0 2px var(--pub-brand), var(--lp-lift), var(--lp-glow);
}
.pmod:hover {
transform: translateY(-2px);
}
.mod:hover .mod__ic {
transform: scale(1.08);
}
.pcard:hover .shot__img {
transform: translate(calc(var(--space-8) * -1), calc(var(--space-8) * -1));
}
.tab {
transition:
background-color var(--duration-fast) var(--ease-standard),
color var(--duration-fast) var(--ease-standard),
box-shadow var(--duration-fast) var(--ease-standard);
}
.is-tabs .tour__panel:not([hidden]),
.is-tabs .desk:not([hidden]) {
animation: lp-rise calc(var(--duration-slow) * 1.5) var(--ease-decelerate);
}
.qa summary::after {
transition: transform var(--duration-normal) var(--ease-standard);
}
.qa[open] p {
animation: lp-rise var(--duration-slow) var(--ease-decelerate);
}
.signin[open],
.signin__step:not([hidden]) {
animation: lp-rise var(--duration-slow) var(--ease-decelerate);
}
.signin-opt,
.signin-role,
.signin-opt__ic,
.signin-role__ic {
transition:
transform var(--duration-normal) var(--ease-standard),
box-shadow var(--duration-normal) var(--ease-standard),
background-color var(--duration-fast) var(--ease-standard),
color var(--duration-fast) var(--ease-standard);
}
.signin-opt:hover,
.signin-role:hover {
transform: translateY(-2px);
}
}