@font-face {
font-family: "Geist";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("geist-latin-ext-wght-normal.gk9IW10m4v.woff2") format("woff2-variations");
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: "Geist";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("geist-latin-wght-normal.GfnJJUaqMA.woff2") format("woff2-variations");
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-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
--ink: #171717;
--muted: #525252;
--soft: #737373;
--line: #e5e5e5;
--line-soft: #ededed;
--indigo: #3b4a8a;
--alt: #fafafa;
--font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
--pad: 20px;
--section: 56px;
color-scheme: light;
}
@media (min-width: 720px) {
:root {
--pad: 40px;
--section: 96px;
}
}
@media (min-width: 1100px) {
:root {
--pad: 80px;
--section: 112px;
}
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: 88px;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
body {
margin: 0;
font-family: var(--font);
font-size: 16px;
line-height: 1.5;
color: var(--ink);
background: #fff;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1,
h2,
h3,
p,
ul,
ol {
margin: 0;
}
ul,
ol {
padding: 0;
list-style: none;
}
a {
color: inherit;
}
:focus-visible {
outline: 2px solid var(--ink);
outline-offset: 3px;
border-radius: 6px;
}
.how :focus-visible,
.closing-panel :focus-visible {
outline-color: #fff;
}
.wrap {
width: 100%;
max-width: 1440px;
margin-inline: auto;
padding-inline: var(--pad);
}
.skip {
position: absolute;
left: 12px;
top: -80px;
z-index: 100;
padding: 10px 16px;
border-radius: 10px;
background: var(--ink);
color: #fff;
text-decoration: none;
}
.skip:focus {
top: 12px;
}
@media (max-width: 719px) {
.wide {
display: none !important;
}
}
@media (min-width: 720px) {
.narrow {
display: none !important;
}
}
.button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 0 25px;
border-radius: 999px;
border: 1px solid transparent;
font: 500 16px/1.2 var(--font);
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: background-color 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.button.small {
min-height: 40px;
padding: 0 18px;
font-size: 14.5px;
box-shadow: none !important;
}
.button.dark {
background: var(--ink);
color: #fff;
box-shadow: 0 8px 20px #17171726;
}
.button.dark:hover {
background: #262626;
}
.button.light {
background: #fff;
border-color: var(--line);
color: var(--ink);
padding: 0 21px;
}
.button.light:hover {
border-color: #a3a3a3;
}
.button.white {
background: #fff;
color: var(--ink);
font-weight: 600;
min-height: 54px;
padding: 0 27px;
}
.button.white:hover {
background: #f0f0f0;
}
.button.block {
display: flex;
width: 100%;
white-space: normal;
text-align: center;
padding-block: 12px;
}
.site-header {
position: relative;
z-index: 20;
background: #fff;
}
.bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
min-height: 80px;
}
.brand {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 20px;
font-weight: 600;
letter-spacing: -0.04em;
text-decoration: none;
color: var(--ink);
}
.logo-mark {
width: 22px;
height: 22px;
flex: none;
}
@media (min-width: 720px) {
.brand {
gap: 10px;
font-size: 22px;
}
.logo-mark {
width: 26px;
height: 26px;
}
}
.menu {
display: none;
}
.menu a {
display: block;
padding: 10px 0;
font-size: 15px;
color: var(--muted);
text-decoration: none;
}
.menu a:hover {
color: var(--ink);
}
.bar-end {
display: flex;
align-items: center;
gap: 14px;
}
.login {
display: none;
font-size: 14.5px;
font-weight: 500;
text-decoration: none;
}
.burger {
display: inline-grid;
place-items: center;
width: 44px;
height: 44px;
margin-right: -10px;
padding: 0;
border: 0;
border-radius: 10px;
background: none;
color: var(--ink);
cursor: pointer;
}
.burger-close,
.burger[aria-expanded="true"] .burger-open {
display: none;
}
.burger[aria-expanded="true"] .burger-close {
display: inline;
}
@media (max-width: 719px) {
.site-header[data-open] .menu {
display: block;
position: absolute;
left: 0;
right: 0;
top: 100%;
padding: 8px var(--pad) 20px;
background: #fff;
border-bottom: 1px solid var(--line-soft);
box-shadow: 0 20px 30px #17171714;
}
.site-header[data-open] .menu a {
padding: 14px 0;
font-size: 17px;
color: var(--ink);
border-bottom: 1px solid var(--line-soft);
}
.site-header[data-open] .menu a:last-child {
border-bottom: 0;
font-weight: 500;
}
}
@media (min-width: 720px) {
.bar {
gap: 32px;
}
.menu {
display: flex;
gap: 33px;
}
.menu-login,
.burger {
display: none !important;
}
.login {
display: inline;
}
}
.hero {
padding-top: 20px;
padding-bottom: 80px;
}
.hero h1,
.not-found h1 {
font-size: clamp(38px, 5vw + 22.5px, 80px);
font-weight: 600;
line-height: 1.07;
letter-spacing: -0.0375em;
}
.lede {
margin-top: 20px;
max-width: 1080px;
font-size: 17px;
line-height: 1.55;
color: var(--muted);
}
@media (min-width: 720px) {
.hero {
padding-top: 48px;
padding-bottom: 100px;
}
.hero h1,
.not-found h1 {
line-height: 1.03;
}
.lede {
margin-top: 28px;
font-size: 19px;
line-height: 29px;
}
}
.actions {
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 20px;
}
.actions .button.dark {
box-shadow: none;
}
@media (min-width: 720px) {
.actions {
flex-direction: row;
gap: 12px;
margin-top: 28px;
}
.actions .button.dark {
box-shadow: 0 8px 20px #17171726;
}
}
.note {
margin-top: 20px;
font-size: 13.5px;
color: var(--soft);
}
@media (min-width: 720px) {
.note {
margin-top: 28px;
}
}
.hero-media {
margin-top: 20px;
}
@media (min-width: 720px) {
.hero-media {
margin-top: 56px;
}
}
.stage-box {
container-type: inline-size;
}
.hero-stage {
--u: calc(100cqw / 1180);
--ink: #171717;
--muted: #525252;
--soft: #737373;
--line: #e5e5e5;
--line2: #ededed;
--indigo: #3b4a8a;
position: relative;
width: 100%;
aspect-ratio: 1180 / 700;
border-radius: clamp(20px, 2.7cqw, 32px);
overflow: hidden;
isolation: isolate;
background:
radial-gradient(50% 55% at 15% 10%, #c9d5ff, transparent 70%),
radial-gradient(45% 50% at 5% 95%, #cff0dd, transparent 70%),
radial-gradient(50% 50% at 98% 92%, #ffe0b8, transparent 70%),
#f4f6ff;
box-shadow: 0 30px 80px #2b3a7a12;
font-family: var(--font);
line-height: normal;
letter-spacing: normal;
.art {
position: absolute;
inset: 0;
}
.still {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.cam {
position: absolute;
left: 0;
top: 0;
width: 3600px;
height: 1680px;
transform-origin: 0 0;
transition: transform 0.6s cubic-bezier(0.7, 0, 0.15, 1), opacity 0.25s ease;
}
.cam.cut {
transition: transform 0.3s cubic-bezier(0.5, 0, 1, 0.5), opacity 0.25s ease;
}
.screen {
zoom: 3;
position: absolute;
left: 0;
top: 0;
width: 1200px;
height: 560px;
display: flex;
background: #fff;
border-radius: 22px;
overflow: hidden;
box-shadow: 0 1px 2px #0000000f, 0 24px 60px #2b3a7a26;
opacity: 0;
transition: opacity 0.2s;
}
.screen.on {
opacity: 1;
}
.side {
width: 220px;
background: #f7f7f7;
padding: 26px 14px;
display: flex;
flex-direction: column;
gap: 4px;
border-right: 1px solid var(--line2);
}
.brand {
display: flex;
gap: 8px;
align-items: center;
font-weight: 600;
font-size: 19px;
letter-spacing: -0.5px;
padding: 0 10px 18px;
}
.brand svg {
width: 22px;
height: 22px;
}
.nav {
padding: 9px 10px;
border-radius: 8px;
font-size: 14px;
color: var(--muted);
}
.nav.on {
background: #ededed;
color: var(--ink);
font-weight: 500;
}
.main {
flex: 1;
padding: 30px 36px;
display: flex;
flex-direction: column;
gap: 22px;
}
.top {
display: flex;
justify-content: space-between;
align-items: center;
}
.acts {
display: flex;
gap: 12px;
align-items: center;
}
.chev {
color: #737373;
}
.h1 {
font-size: 26px;
font-weight: 600;
letter-spacing: -0.6px;
}
.subt {
color: var(--soft);
font-size: 14px;
margin-top: 4px;
}
.btn {
height: 38px;
padding: 0 16px;
border-radius: 8px;
font: 500 14px "Geist", system-ui, sans-serif;
border: 1px solid #d4d4d4;
background: #fff;
color: var(--ink);
display: inline-flex;
align-items: center;
gap: 8px;
transition: transform 0.12s, background 0.2s;
}
.btn.dark {
background: var(--ink);
color: #fff;
border-color: var(--ink);
}
.btn.press {
transform: scale(0.94);
}
.tag {
display: inline-flex;
gap: 6px;
align-items: center;
padding: 4px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 500;
transition: background 0.3s, color 0.3s;
}
.tag i {
width: 6px;
height: 6px;
border-radius: 9px;
background: currentColor;
display: block;
}
.tag.draft {
background: #f5f5f5;
color: #525252;
}
.tag.sent {
background: #eef2ff;
color: var(--indigo);
}
.tag.wait {
background: #fff4e0;
color: #92400e;
}
.tag.ok {
background: #e8f7ee;
color: #166534;
}
.box {
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
}
.form {
display: flex;
gap: 10px;
}
.field {
height: 42px;
border: 1px solid #d4d4d4;
border-radius: 8px;
display: flex;
align-items: center;
padding: 0 12px;
font-size: 14px;
}
.field.sel {
flex: 1;
justify-content: space-between;
}
.field.time {
width: 92px;
font-weight: 500;
transition: border-color 0.2s, box-shadow 0.2s;
}
.field.time.focus {
border-color: var(--ink);
box-shadow: 0 0 0 1px var(--ink);
}
.caret {
width: 1.5px;
height: 18px;
background: var(--ink);
margin-left: 1px;
opacity: 0;
animation: hero-blink 1s steps(1) infinite;
}
.focus .caret {
opacity: 1;
}
.entry {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 18px;
border-bottom: 1px solid var(--line2);
font-size: 14px;
}
.entry:last-child {
border-bottom: 0;
}
small {
display: block;
color: var(--soft);
font-size: 12px;
margin-top: 2px;
}
.entry b {
font-weight: 600;
}
.entry.new {
animation: hero-slidein 0.5s cubic-bezier(0.16, 0.84, 0.3, 1);
background: #f4f7ff;
}
.daytotal {
font-weight: 600;
font-variant-numeric: tabular-nums;
}
table {
width: 100%;
border-collapse: collapse;
font-size: 13.5px;
font-variant-numeric: tabular-nums;
}
th,
td {
padding: 13px 8px;
text-align: right;
border-bottom: 1px solid var(--line2);
font-weight: 400;
}
th {
color: var(--soft);
background: #fafafa;
font-size: 12.5px;
}
td:first-child,
th:first-child {
text-align: left;
padding-left: 18px;
width: 200px;
}
td:last-child,
th:last-child {
padding-right: 18px;
font-weight: 600;
}
tr.sum td {
background: #fafafa;
font-weight: 600;
border-bottom: 0;
}
.cell {
display: inline-block;
min-width: 44px;
padding: 3px 6px;
border-radius: 6px;
transition: box-shadow 0.2s;
}
.cell.active {
box-shadow: 0 0 0 1.5px var(--ink);
}
.cell.pop {
animation: hero-pop 0.4s ease;
}
.stats {
display: flex;
gap: 16px;
}
.stat {
flex: 1;
border: 1px solid var(--line);
border-radius: 12px;
padding: 16px 18px;
}
.stat small {
color: var(--soft);
font-size: 13px;
margin: 0;
}
.stat div {
font-size: 26px;
font-weight: 700;
letter-spacing: -0.8px;
margin-top: 4px;
font-variant-numeric: tabular-nums;
}
.rrow {
display: flex;
padding: 14px 18px;
border-bottom: 1px solid var(--line2);
font-size: 14px;
font-variant-numeric: tabular-nums;
}
.rrow.last {
border-bottom: 0;
}
.rrow span:first-child {
flex: 1;
font-weight: 500;
}
.rrow span {
width: 130px;
text-align: right;
}
.rrow span:last-child {
font-weight: 600;
}
.rrow.head {
background: #fafafa;
color: var(--soft);
font-size: 12.5px;
}
.rrow.head span {
font-weight: 400 !important;
}
.toast {
position: absolute;
left: 50%;
bottom: 8%;
transform: translate(-50%, calc(16 * var(--u)));
opacity: 0;
background: var(--ink);
color: #fff;
border-radius: calc(14 * var(--u));
padding: calc(14 * var(--u)) calc(18 * var(--u));
display: flex;
gap: calc(10 * var(--u));
align-items: center;
font-size: calc(15 * var(--u));
font-weight: 500;
box-shadow: 0 calc(18 * var(--u)) calc(40 * var(--u)) #17171740;
transition: opacity 0.3s, transform 0.45s cubic-bezier(0.16, 0.84, 0.3, 1);
white-space: nowrap;
z-index: 5;
}
.toast.show {
opacity: 1;
transform: translate(-50%, 0);
}
.toast .ok {
color: #86efac;
}
.cursor {
position: absolute;
left: 0;
top: 0;
width: calc(30 * var(--u));
height: calc(30 * var(--u));
z-index: 6;
opacity: 0;
filter: drop-shadow(0 3px 6px #00000040);
}
.ripple {
position: absolute;
width: calc(44 * var(--u));
height: calc(44 * var(--u));
margin: calc(-22 * var(--u)) 0 0 calc(-22 * var(--u));
border-radius: 99px;
border: max(1px, calc(2 * var(--u))) solid #17171766;
background: #17171712;
z-index: 6;
animation: hero-ripple 0.5s ease-out forwards;
}
.slogan {
position: absolute;
inset: 0;
padding: calc(56 * var(--u)) calc(64 * var(--u));
display: flex;
flex-direction: column;
justify-content: space-between;
opacity: 0;
pointer-events: none;
z-index: 4;
}
.slogan.show {
opacity: 1;
}
.line {
font-size: calc(44 * var(--u));
font-weight: 600;
letter-spacing: calc(-1.6 * var(--u));
line-height: 1.05;
}
.ch {
display: inline-block;
white-space: pre;
opacity: 0;
transform: translateY(calc(26 * var(--u)));
filter: blur(calc(6 * var(--u)));
transition: opacity 0.3s, transform 0.45s cubic-bezier(0.16, 0.84, 0.3, 1), filter 0.3s;
}
.slogan.show .ch {
opacity: 1;
transform: none;
filter: none;
}
.ink {
color: #1c2347;
}
.glyph {
font-weight: 800;
letter-spacing: -0.05em;
line-height: 1;
white-space: nowrap;
font-variant-numeric: tabular-nums;
font-variation-settings: "wght" 850;
}
.gA {
font-size: calc(310 * var(--u));
}
.gA .d {
display: inline-block;
opacity: 0;
transform: translateY(0.22em);
transition: opacity 0.25s ease-out, transform 0.45s cubic-bezier(0.16, 0.84, 0.3, 1);
}
.gA .d.on {
opacity: 1;
transform: none;
}
.gA .d.instant,
.days span.instant {
transition: none !important;
animation: none !important;
}
.days {
display: flex;
gap: calc(16 * var(--u));
align-items: baseline;
}
.days span {
font-size: calc(46 * var(--u));
letter-spacing: calc(-1 * var(--u));
color: #17171790;
opacity: 0;
transform: translateY(calc(18 * var(--u)));
transition: opacity 0.2s, transform 0.3s;
font-variation-settings: "wght" 150;
}
.days span.on {
opacity: 1;
transform: none;
}
.days .last {
color: #1c2347;
font-size: calc(180 * var(--u));
letter-spacing: -0.05em;
line-height: 1;
font-variation-settings: "wght" 850;
}
.days .last.on {
animation: hero-thump 0.45s cubic-bezier(0.2, 1.7, 0.4, 1);
}
.fill {
position: relative;
font-size: calc(240 * var(--u));
}
.fill .base {
color: #1c234722;
display: inline-block;
}
.fill .over {
position: absolute;
left: 0;
top: 0;
clip-path: inset(0 100% 0 0);
transition: clip-path 0.9s cubic-bezier(0.6, 0, 0.2, 1);
}
.slogan.show .fill .over {
clip-path: inset(0 0 0 0);
}
.money {
font-size: calc(190 * var(--u));
display: inline-block;
}
.hint {
font-size: calc(17 * var(--u));
color: var(--muted);
font-weight: 500;
margin-top: calc(4 * var(--u));
opacity: 0;
transition: opacity 0.3s;
}
.hint.on {
opacity: 1;
}
.badge {
position: absolute;
z-index: 5;
background: #fff;
border-radius: calc(16 * var(--u));
padding: calc(14 * var(--u)) calc(18 * var(--u));
box-shadow: 0 1px 2px #0000000f, 0 calc(18 * var(--u)) calc(44 * var(--u)) #2b3a7a2e;
opacity: 0;
transform: translateY(calc(14 * var(--u))) scale(0.96);
transition: opacity 0.5s, transform 0.7s cubic-bezier(0.16, 0.84, 0.3, 1);
}
.badge.show {
opacity: 1;
transform: none;
}
.badge b {
display: block;
font-size: calc(28 * var(--u));
font-weight: 800;
letter-spacing: calc(-1 * var(--u));
line-height: 1.3;
font-variant-numeric: tabular-nums;
}
.badge span {
font-size: calc(13 * var(--u));
color: var(--muted);
}
.b1 {
left: 3%;
bottom: 6%;
}
.b2 {
right: 3%;
top: 5%;
}
.replay {
position: absolute;
right: 16px;
bottom: 16px;
z-index: 7;
width: 36px;
height: 36px;
padding: 0;
border-radius: 99px;
border: 0;
background: #ffffffcc;
backdrop-filter: blur(8px);
box-shadow: 0 2px 10px #0000001f;
display: grid;
place-items: center;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s, visibility 0.4s;
}
.replay.show {
opacity: 1;
visibility: visible;
}
.replay:hover {
background: #fff;
}
.replay:focus-visible {
outline: 2px solid var(--ink);
outline-offset: 2px;
}
}
@keyframes hero-blink {
50% {
visibility: hidden;
}
}
@keyframes hero-slidein {
from {
transform: translateY(-16px);
opacity: 0;
}
}
@keyframes hero-pop {
0% {
background: #dce4ff;
}
100% {
background: transparent;
}
}
@keyframes hero-ripple {
from {
transform: scale(0.3);
opacity: 1;
}
to {
transform: scale(1.5);
opacity: 0;
}
}
@keyframes hero-thump {
from {
transform: scale(0.6);
}
}
h2 {
font-weight: 600;
letter-spacing: -0.03em;
line-height: 1.12;
font-size: clamp(32px, 3vw + 20px, 48px);
}
@media (min-width: 720px) {
h2 {
line-height: 1.04;
}
}
.how {
background:
radial-gradient(60% 80% at 85% 0%, #1e2233, transparent 70%),
#141414;
color: #fff;
padding-block: var(--section);
}
.how-head {
display: grid;
gap: 20px;
}
.how h2,
.pricing h2 {
max-width: 600px;
}
.how-head p {
display: none;
margin-top: 8px;
max-width: 380px;
font-size: 17px;
line-height: 26px;
color: #a3a3a3;
}
.steps {
margin-top: 8px;
display: grid;
gap: 0;
}
.step {
display: grid;
grid-template-columns: auto 1fr;
gap: 18px;
padding: 23px 0 24px;
border-bottom: 1px solid #ffffff1a;
}
.step-number {
font-size: 36px;
font-weight: 300;
line-height: 1;
color: #5b6bb0;
}
.step h3 {
font-size: 19px;
font-weight: 600;
line-height: 1.3;
color: #fff;
}
.step p {
margin-top: 8px;
font-size: 15px;
line-height: 23px;
color: #a3a3a3;
}
@media (min-width: 720px) {
.how-head {
grid-template-columns: 1fr minmax(auto, 380px);
align-items: start;
gap: 40px;
}
.how-head p {
display: block;
}
.how {
padding-block: 104px;
}
.steps {
margin-top: 66px;
grid-template-columns: repeat(4, 1fr);
align-items: start;
}
.step {
display: block;
padding: 40px 28px 0;
border-bottom: 0;
border-left: 1px solid #ffffff1a;
min-height: 255px;
}
.step:first-child {
padding-left: 0;
border-left: 0;
}
.step-number {
display: block;
font-size: 52px;
margin-bottom: 26px;
}
.step h3 {
font-size: 20px;
}
.step p {
margin-top: 12px;
font-size: 15px;
line-height: 23px;
}
}
.features {
padding-block: var(--section);
}
.features h2 {
font-size: clamp(30px, 2vw + 22px, 40px);
line-height: 1.1;
letter-spacing: -0.033em;
}
.features-grid {
display: grid;
gap: 40px;
}
.feature-list {
margin-top: 28px;
display: grid;
gap: 30px;
}
.feature {
display: grid;
grid-template-columns: 40px 1fr;
gap: 14px;
}
.feature-icon {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 10px;
background: #f1f3fb;
color: var(--indigo);
}
.feature h3 {
font-size: 18px;
font-weight: 600;
letter-spacing: -0.015em;
line-height: 1.3;
}
.feature p {
margin-top: 4px;
font-size: 15px;
line-height: 23px;
color: var(--muted);
}
@media (min-width: 720px) {
.feature {
gap: 16px;
}
.feature p {
font-size: 16px;
line-height: 24px;
}
}
.feature-panel {
display: none;
align-items: center;
justify-content: center;
padding: 40px;
border-radius: 40px;
background:
radial-gradient(55% 55% at 92% 10%, #fde3c2, transparent 70%),
radial-gradient(60% 55% at 8% 98%, #cfd9ff, transparent 70%),
#f7f7fb;
}
.budget-card {
width: 100%;
max-width: 460px;
padding: 28px;
border-radius: 20px;
background: #fff;
box-shadow: 0 1px 2px #0000000f, 0 24px 60px #2b3a7a26;
}
.budget-title {
font-size: 17px;
font-weight: 600;
}
.budget-card ul {
margin-top: 18px;
display: grid;
gap: 18px;
}
.budget-head {
display: flex;
justify-content: space-between;
font-size: 14px;
font-variant-numeric: tabular-nums;
}
.budget-head span:first-child {
font-weight: 500;
}
.budget-head span:last-child {
color: var(--muted);
}
.bar-track {
height: 8px;
margin-top: 8px;
border-radius: 99px;
background: var(--line-soft);
overflow: hidden;
}
.bar-fill {
height: 100%;
border-radius: 99px;
background: var(--ink);
}
.w-70 {
width: 70%;
}
.w-85 {
width: 85%;
}
.w-100 {
width: 100%;
}
.amber .bar-fill {
background: #d97706;
}
.red .bar-fill {
background: #dc2626;
}
.budget-alert {
display: flex;
align-items: center;
gap: 10px;
margin-top: 20px;
padding: 12px 14px;
border-radius: 10px;
background: #fef2f2;
color: #b91c1c;
font-size: 13px;
}
.budget-alert svg {
flex: none;
}
@media (min-width: 1100px) {
.features-grid {
grid-template-columns: 1fr 648px;
gap: 72px;
align-items: center;
}
.feature-list {
margin-top: 41px;
gap: 28px;
}
.feature-panel {
display: flex;
min-height: 600px;
}
}
.pricing {
padding-block: var(--section);
background: var(--alt);
}
@media (min-width: 1100px) {
.pricing {
padding-block: 104px;
}
}
.pricing-head {
display: grid;
gap: 24px;
}
.pricing-head p {
margin-top: 16px;
font-size: 15px;
color: var(--muted);
}
.period {
display: flex;
justify-self: stretch;
padding: 4px;
border-radius: 999px;
background: var(--line-soft);
}
.period-button {
flex: 1;
min-height: 32px;
padding: 0 16px;
border: 0;
border-radius: 999px;
background: none;
font: 400 14.5px/1.2 var(--font);
color: var(--muted);
cursor: pointer;
white-space: nowrap;
}
.period-button[aria-pressed="true"] {
background: #fff;
color: var(--ink);
font-weight: 500;
box-shadow: 0 1px 2px #0000001a;
}
.period-badge {
margin-left: 6px;
font-size: 13px;
font-weight: 500;
color: #166534;
}
.plans {
display: grid;
gap: 20px;
margin-top: 24px;
}
.plan {
padding: 24px;
border: 1px solid var(--line-soft);
border-radius: 28px;
background: #fff;
}
.plan.team {
background:
radial-gradient(80% 105% at 100% 0%, #dde5ff, transparent 72%),
#fff;
border-color: #d5dcfb;
box-shadow: 0 24px 60px #2b3a7a14;
}
.plan-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.plan h3 {
font-size: 18px;
font-weight: 600;
}
.badge-pill {
padding: 5px 12px;
border-radius: 999px;
background: var(--ink);
color: #fff;
font-size: 13px;
font-weight: 500;
}
.price {
display: flex;
align-items: center;
gap: 14px;
margin-top: 28px;
}
.amount {
font-size: 48px;
font-weight: 600;
line-height: 1;
letter-spacing: -0.04em;
white-space: nowrap;
}
.price-text {
display: grid;
font-size: 15.5px;
line-height: 1.4;
}
.promo {
color: var(--indigo);
}
.then {
margin-top: 24px;
font-size: 16px;
font-weight: 600;
}
.packs {
display: grid;
gap: 14px;
margin-top: 18px;
}
.pack {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
padding: 11px 14px;
border: 1px solid var(--line-soft);
border-radius: 14px;
background: #ffffffcc;
font-size: 13.5px;
line-height: 18px;
}
.pack-name {
grid-row: 1 / 3;
font-size: 14px;
font-weight: 600;
}
.pack-price {
text-align: right;
}
.pack-each {
display: none;
}
@media (min-width: 720px) {
.pack {
font-size: 14px;
}
}
.pack-promo {
text-align: right;
font-size: 12.5px;
color: var(--indigo);
}
.fine {
margin-top: 18px;
font-size: 13px;
line-height: 20px;
color: var(--soft);
}
.plan .button.block {
margin-top: 22px;
min-height: 48px;
font-size: 15px;
box-shadow: none;
}
.price-block[hidden] {
display: none;
}
[data-period="monthly"] [data-period-block="annual"],
[data-period="annual"] [data-period-block="monthly"] {
display: none;
}
.plan.free {
padding: 24px;
}
.free-price {
font-size: 32px;
font-weight: 600;
letter-spacing: -0.04em;
}
.free-text {
margin-top: 12px;
font-size: 14.5px;
line-height: 1.55;
color: var(--muted);
}
@media (min-width: 720px) {
.pricing-head {
grid-template-columns: 1fr auto;
align-items: end;
}
.period {
justify-self: end;
}
.period-button {
flex: none;
padding: 0 16px;
}
.plans {
margin-top: 48px;
gap: 24px;
}
.plan {
padding: 36px;
}
.plan.free {
padding: 36px;
}
.plan h3 {
font-size: 20px;
}
.free-text {
font-size: 15px;
}
.free-price {
margin-top: 0;
}
.packs {
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.pack {
display: block;
padding: 13px 15px;
line-height: 21px;
}
.pack-name {
display: block;
font-size: 14px;
font-weight: 600;
}
.pack-price {
display: block;
text-align: left;
}
.pack-each {
display: block;
font-size: 13px;
color: var(--soft);
}
.pack-promo {
display: block;
text-align: left;
font-size: 13px;
}
.amount {
font-size: 56px;
}
.price-text {
font-size: 16.5px;
}
.then {
margin-top: 28px;
font-size: 17px;
}
.packs {
gap: 12px;
}
.fine {
font-size: 14px;
line-height: 21px;
}
}
@media (min-width: 1100px) {
.plans {
grid-template-columns: 400px 1fr;
align-items: start;
}
.plan.free {
order: -1;
align-self: start;
}
.plan.free .plan-head {
display: block;
}
.plan.free .free-price {
margin-top: 28px;
font-size: 56px;
line-height: 1;
letter-spacing: -0.04em;
}
.plan.free .free-text {
margin-top: 29px;
}
.plan.free .button {
margin-top: 19px;
}
}
.faq {
padding-block: var(--section);
}
@media (max-width: 719px) {
.faq {
padding-bottom: 56px;
}
}
.faq h2 {
font-size: clamp(30px, 2vw + 22px, 40px);
line-height: 1.1;
letter-spacing: -0.033em;
}
.faq-grid {
display: grid;
gap: 28px;
}
.faq h2 {
max-width: 400px;
}
.qa {
border-bottom: 1px solid var(--line);
}
.qa summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 22px 0;
font-size: 17px;
font-weight: 600;
line-height: 1.3;
cursor: pointer;
list-style: none;
}
.qa summary::-webkit-details-marker {
display: none;
}
.qa[open] summary {
padding-bottom: 11px;
}
.qa p {
padding-bottom: 24px;
max-width: 800px;
font-size: 15px;
line-height: 23px;
color: var(--muted);
}
.qa-sign {
position: relative;
flex: none;
width: 14px;
height: 14px;
margin-right: 3px;
color: var(--soft);
}
.qa-sign::before,
.qa-sign::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 6px;
height: 1.25px;
background: currentColor;
}
.qa-sign::after {
transform: rotate(90deg);
transition: transform 0.2s;
}
.qa[open] .qa-sign::after {
transform: rotate(0);
}
.qa summary:focus-visible {
outline-offset: -2px;
}
@media (min-width: 720px) {
.qa summary {
padding: 24px 0;
font-size: 18.4px;
}
.qa p {
font-size: 16px;
line-height: 25px;
}
}
@media (min-width: 1100px) {
.faq-grid {
grid-template-columns: 480px 1fr;
gap: 0;
}
.qa-list {
grid-column: 2;
}
}
.closing {
padding-bottom: 40px;
}
@media (min-width: 720px) {
.closing {
padding-bottom: var(--section);
}
}
@media (max-width: 719px) {
.closing .wrap {
padding-inline: 16px;
}
}
.closing-panel {
padding: 40px 24px;
border-radius: 32px;
color: #fff;
text-align: center;
background:
radial-gradient(45% 75% at 96% 0%, #52391f, transparent 70%),
radial-gradient(38% 70% at 20% 105%, #2f3a69, transparent 70%),
#141414;
}
.closing-panel h2 {
max-width: 660px;
margin-inline: auto;
font-size: clamp(33px, 4vw + 16px, 56px);
line-height: 1.04;
letter-spacing: -0.035em;
}
.closing-panel p {
max-width: 500px;
margin: 20px auto 0;
font-size: 15px;
line-height: 24px;
color: #c4c4c4;
}
@media (min-width: 720px) {
.closing-panel p {
margin-top: 24px;
font-size: 18px;
line-height: 1.6;
}
}
.closing-panel .button {
margin-top: 28px;
}
@media (min-width: 720px) {
.closing-panel {
padding: 92px 40px 80px;
border-radius: 40px;
}
}
@media (min-width: 1100px) {
.closing {
padding-bottom: 96px;
}
}
@media (max-width: 719px) {
.closing-panel {
text-align: left;
}
.closing-panel .button {
display: flex;
width: 100%;
}
}
.site-footer {
border-top: 1px solid var(--line-soft);
padding-block: 32px 40px;
}
.foot {
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas:
"brand brand"
"links links"
"copy lang";
gap: 12px 24px;
align-items: center;
}
@media (min-width: 720px) {
.foot {
row-gap: 8px;
}
}
.foot .brand {
grid-area: brand;
font-size: 17px;
gap: 6px;
}
.foot .logo-mark {
width: 20px;
height: 20px;
}
.copyright {
grid-area: copy;
font-size: 13.5px;
color: var(--soft);
}
.foot-nav {
display: contents;
}
.foot-links {
grid-area: links;
display: flex;
flex-wrap: wrap;
gap: 8px 28px;
}
.foot-nav a {
font-size: 14px;
color: var(--muted);
text-decoration: none;
}
.foot-nav a:hover {
color: var(--ink);
}
.lang-switch {
grid-area: lang;
justify-self: end;
font-weight: 500;
color: var(--ink) !important;
}
@media (min-width: 720px) {
.site-footer {
padding-block: 34px 44px;
}
.foot {
grid-template-areas:
"brand nav"
"copy nav";
align-items: start;
}
.foot .brand {
font-size: 18px;
}
.foot-nav {
grid-area: nav;
display: flex;
align-items: center;
gap: 29px;
padding-top: 4px;
}
.foot-links {
display: flex;
gap: 29px;
}
.lang-switch {
justify-self: auto;
}
}
.doc {
display: block;
padding-top: 24px;
padding-bottom: 88px;
}
.toc {
margin-bottom: 36px;
padding-bottom: 20px;
border-bottom: 1px solid var(--line-soft);
}
.toc-title {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 12.5px;
font-weight: 600;
color: var(--soft);
cursor: pointer;
list-style: none;
}
.toc-title::-webkit-details-marker {
display: none;
}
.toc-title::after {
content: "";
width: 7px;
height: 7px;
margin-right: 4px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
transition: transform 0.2s;
}
.toc[open] .toc-title::after {
transform: rotate(-135deg);
}
.toc ul {
margin-top: 12px;
display: grid;
}
.toc a {
display: block;
padding: 5px 0;
font-size: 14px;
line-height: 20px;
color: var(--muted);
text-decoration: none;
}
.toc a:hover,
.toc a[aria-current="true"] {
color: var(--ink);
}
.toc a[aria-current="true"] {
font-weight: 500;
}
.article {
max-width: 720px;
}
.article h1 {
font-size: clamp(34px, 3vw + 22px, 48px);
font-weight: 600;
line-height: 1.12;
letter-spacing: -0.03em;
}
.article .updated {
margin-top: 28px;
font-size: 13px;
line-height: 1.4;
color: var(--soft);
}
.article section {
margin-top: 36px;
}
.article h2 {
font-size: 24px;
line-height: 1.25;
letter-spacing: -0.025em;
margin-bottom: 4px;
}
.article p,
.article li {
font-size: 17px;
line-height: 1.65;
color: #404040;
}
.article section > :not(h2) {
margin-top: 16px;
}
.article ul {
padding-left: 22px;
list-style: disc;
}
.article li + li {
margin-top: 8px;
}
.article li::marker {
color: var(--soft);
}
.article a {
text-underline-offset: 3px;
}
.sample {
padding: 20px 24px;
border: 1px solid var(--line);
border-radius: 14px;
background: var(--alt);
}
.sample p {
margin: 0;
font-size: 15px;
line-height: 1.6;
}
.sample p + p {
margin-top: 8px;
}
.sample .sample-title {
font-weight: 600;
color: var(--ink);
}
.article strong {
font-weight: 600;
color: var(--ink);
}
.table-wrap {
overflow-x: auto;
border: 1px solid var(--line);
border-radius: 14px;
}
.article table {
width: 100%;
min-width: 460px;
border-collapse: collapse;
font-size: 15px;
line-height: 1.5;
}
.article th,
.article td {
padding: 12px 16px;
text-align: left;
vertical-align: top;
border-bottom: 1px solid var(--line-soft);
color: #404040;
}
.article thead th {
background: var(--alt);
font-weight: 500;
color: var(--soft);
}
.article tbody th {
font-weight: 600;
color: var(--ink);
}
.article tbody tr:last-child th,
.article tbody tr:last-child td {
border-bottom: 0;
}
@media (max-width: 639px) {
.table-wrap {
overflow: visible;
border: 0;
border-radius: 0;
}
.article table,
.article tbody,
.article tr,
.article th,
.article td {
display: block;
}
.article table {
min-width: 0;
}
.article thead {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.article tbody tr {
margin-bottom: 16px;
padding: 16px 16px 12px;
background: var(--alt);
border-radius: 14px;
}
.article tbody tr:last-child {
margin-bottom: 0;
}
.article th,
.article td {
padding: 0;
border: 0;
}
.article tbody th {
margin-bottom: 8px;
font-size: 17px;
line-height: 1.4;
}
.article td {
display: grid;
grid-template-columns: 92px minmax(0, 1fr);
gap: 0;
padding: 4px 0;
}
.article td::before {
content: attr(data-label);
color: var(--soft);
}
}
@media (min-width: 960px) {
.toc-title {
cursor: default;
}
.toc-title::after {
display: none;
}
.doc {
display: grid;
grid-template-columns: 340px minmax(0, 720px);
gap: 0;
padding-top: 64px;
align-items: start;
}
.toc {
position: sticky;
top: 24px;
max-height: calc(100vh - 48px);
overflow-y: auto;
margin: 0;
padding: 0;
border: 0;
}
.article section {
margin-top: 40px;
}
}
.not-found {
padding-block: 56px 120px;
}
@media (min-width: 720px) {
.not-found {
padding-block: 78px 120px;
}
}
@media (prefers-reduced-motion: reduce) {
.button,
.qa-sign::after {
transition: none;
}
}