/* tokens/palette */
:root {
  --gray-0: #ffffff;
  --gray-50: #f5f5f5;
  --gray-100: #f1f1f1;
  --gray-150: #e0e0e0;
  --gray-200: #d6d6d6;
  --gray-300: #c2c2c2;
  --gray-400: #adadad;
  --gray-500: #999999;
  --gray-600: #7b7b7b;
  --gray-700: #5e5e5e;
  --gray-800: #404040;
  --gray-850: #313131;
  --gray-900: #232323;
  --gray-950: #141414;
  --orange-50: #fff1e6;
  --orange-100: #ffe2cd;
  --orange-150: #ffd4b4;
  --orange-200: #ffc69b;
  --orange-300: #ffa969;
  --orange-400: #ff8d37;
  --orange-500: #ff7005;
  --orange-600: #cc5a04;
  --orange-700: #994303;
  --orange-800: #662d02;
  --orange-850: #4d2202;
  --green-450: #28d728;
  --green-500: #00c800;
  --green-600: #1eaa3c;
  --red-50: #ff46662b;
  --red-450: #ff465f;
  --red-500: #fd2f4b;
}

/* tokens/colors */
:root {
  color-scheme: light dark;
  --text-default: var(--gray-950);
  --text-muted: var(--gray-600);
  --text-static-gray: var(--gray-400);
  --text-neutral-subtle: var(--gray-300);
  --text-static-white: var(--gray-0);
  --text-static-black: var(--gray-950);
  --text-inverse: var(--gray-0);
  --bg-default: var(--gray-0);
  --bg-muted: var(--gray-50);
  --bg-strong: var(--gray-100);
  --button-static-black: var(--gray-950);
  --button-inverse: var(--gray-950);
  --button-hover: var(--gray-800);
  --button-inactive: var(--gray-50);
  --border-default: color-mix(in srgb, var(--gray-950) 20%, transparent);
  --border-strong: var(--gray-150);
  --border-muted: var(--gray-50);
  --illustration-default: var(--gray-200);
  --illustration-muted: var(--gray-100);
}

@media (prefers-color-scheme: dark) {
  :root {
    --text-default: var(--gray-100);
    --text-muted: var(--gray-300);
    --text-static-gray: var(--gray-400);
    --text-neutral-subtle: var(--gray-500);
    --text-static-white: var(--gray-0);
    --text-static-black: var(--gray-950);
    --text-inverse: var(--gray-950);
    --bg-default: var(--gray-700);
    --bg-muted: var(--gray-800);
    --bg-strong: var(--gray-850);
    --button-static-black: var(--gray-950);
    --button-inverse: var(--gray-0);
    --button-hover: var(--gray-850);
    --button-inactive: var(--gray-600);
    --border-default: color-mix(in srgb, var(--gray-200) 20%, transparent);
    --border-strong: color-mix(in srgb, var(--gray-150) 40%, transparent);
    --border-muted: var(--gray-500);
    --illustration-default: var(--gray-500);
    --illustration-muted: var(--gray-700);
  }
}

/* tokens/sizes */
:root {
  --space-0: 0;
  --space-50: 2px;
  --space-100: 4px;
  --space-150: 6px;
  --space-200: 8px;
  --space-300: 12px;
  --space-400: 16px;
  --space-600: 24px;
  --space-800: 32px;
  --space-1200: 48px;
  --space-1600: 64px;
  --space-2400: 96px;
  --space-3400: 128px;
  --space-4000: 160px;
  --space-6700: 268px;
  --title-hero-size: 92px;
  --title-hero-lh: 112px;
  --title-large-size: 68px;
  --title-large-lh: 80px;
  --title-base-size: 54px;
  --title-base-lh: 64px;
  --title-small-size: 42px;
  --title-small-lh: 52px;
  --title-extra-small-size: 34px;
  --title-extra-small-lh: 40px;
  --title-extra-extra-small-size: 28px;
  --title-extra-extra-small-lh: 32px;
  --heading-large-size: 68px;
  --heading-large-lh: 88px;
  --heading-base-size: 56px;
  --heading-base-lh: 72px;
  --heading-small-size: 42px;
  --heading-small-lh: 56px;
  --heading-extra-small-size: 36px;
  --heading-extra-small-lh: 48px;
  --heading-extra-extra-small-size: 28px;
  --heading-extra-extra-small-lh: 36px;
  --body-large-size: 24px;
  --body-large-lh: 36px;
  --body-medium-size: 18px;
  --body-medium-lh: 28px;
  --body-small-size: 16px;
  --body-small-lh: 24px;
  --body-extra-small-size: 14px;
  --body-extra-small-lh: 20px;
  --body-extra-extra-small-size: 12px;
  --body-extra-extra-small-lh: 20px;
}

.title-hero { font-family: var(--font-title); font-size: var(--title-hero-size); line-height: var(--title-hero-lh); }
.title-large { font-family: var(--font-title); font-size: var(--title-large-size); line-height: var(--title-large-lh); }
.title-base { font-family: var(--font-title); font-size: var(--title-base-size); line-height: var(--title-base-lh); }
.title-small { font-family: var(--font-title); font-size: var(--title-small-size); line-height: var(--title-small-lh); }
.title-extra-small { font-family: var(--font-title); font-size: var(--title-extra-small-size); line-height: var(--title-extra-small-lh); }
.title-extra-extra-small { font-family: var(--font-title); font-size: var(--title-extra-extra-small-size); line-height: var(--title-extra-extra-small-lh); }
.heading-large { font-family: var(--font-base); font-size: var(--heading-large-size); line-height: var(--heading-large-lh); }
.heading-base { font-family: var(--font-base); font-size: var(--heading-base-size); line-height: var(--heading-base-lh); }
.heading-small { font-family: var(--font-base); font-size: var(--heading-small-size); line-height: var(--heading-small-lh); }
.heading-extra-small { font-family: var(--font-base); font-size: var(--heading-extra-small-size); line-height: var(--heading-extra-small-lh); }
.heading-extra-extra-small { font-family: var(--font-base); font-size: var(--heading-extra-extra-small-size); line-height: var(--heading-extra-extra-small-lh); }
.body-large { font-family: var(--font-base); font-size: var(--body-large-size); line-height: var(--body-large-lh); }
.body-medium { font-family: var(--font-base); font-size: var(--body-medium-size); line-height: var(--body-medium-lh); }
.body-small { font-family: var(--font-base); font-size: var(--body-small-size); line-height: var(--body-small-lh); }
.body-extra-small { font-family: var(--font-base); font-size: var(--body-extra-small-size); line-height: var(--body-extra-small-lh); }
.body-extra-extra-small { font-family: var(--font-base); font-size: var(--body-extra-extra-small-size); line-height: var(--body-extra-extra-small-lh); }

:root {
  --page-px: calc(0.0427 * 100vw);
  --header-px: calc(0.0427 * 100vw);
  --header-outer-pt: calc(0.064 * 100vw);
  --header-pt: calc(0.0427 * 100vw);
  --header-pb: calc(0.0427 * 100vw);
  --logo-w: calc(0.344 * 100vw);
  --logo-h: calc(0.128 * 100vw);
  --logo-top: calc(0.0133 * 100vw);
  --logo-left: 0;
  --footer-px: calc(0.0427 * 100vw);
  --footer-pt: calc(0.0853 * 100vw);
  --footer-pb: calc(0.0853 * 100vw);
  --footer-col-gap: calc(0.032 * 100vw);
  --footer-group-gap: calc(0.032 * 100vw);
  --footer-text-size: 12px;
  --footer-text-lh: 20px;
  --menu-pt: 64px;
  --menu-pb: 32px;
  --hero-pt: calc(0.128 * 100vw);
  --hero-pb: calc(0.0427 * 100vw);
  --hero-text-w: calc(0.9147 * 100vw);
  --hero-gap: calc(0.064 * 100vw);
  --hero-title-size: 42px;
  --hero-title-lh: 52px;
  --hero-subtitle-size: 18px;
  --hero-subtitle-lh: 28px;
  --hero-img-w: calc(0.8 * 100vw);
  --order-pt: calc(0.0427 * 100vw);
  --order-pb: calc(0.0427 * 100vw);
  --order-gap: calc(0.032 * 100vw);
  --order-card-p: calc(0.0427 * 100vw);
  --order-card-r: calc(0.064 * 100vw);
  --order-aside-w: calc(0.9147 * 100vw);
  --order-aside-gap: calc(0.0853 * 100vw);
  --order-badge: calc(0.16 * 100vw);
  --order-badge-text-size: 16px;
  --order-badge-text-lh: 24px;
  --order-title-size: 28px;
  --order-title-lh: 36px;
  --order-desc-size: 12px;
  --order-desc-lh: 20px;
  --order-text-gap: calc(0.0213 * 100vw);
  --order-main-gap: calc(0.1707 * 100vw);
  --order-inputs-gap: calc(0.0427 * 100vw);
  --order-label-w: calc(0.4267 * 100vw);
  --order-label-gap: calc(0.0213 * 100vw);
  --order-label-size: 12px;
  --order-label-lh: 20px;
  --field-h: 56px;
  --field-p: 4px;
  --field-text-size: 12px;
  --field-text-lh: 20px;
  --field-btn-h: 48px;
  --field-btn-py: 8px;
  --btn-h: 56px;
  --btn-px: 48px;
  --btn-text-size: 14px;
  --btn-text-lh: 20px;
  --option-h: 48px;
  --calendar-w: 311px;
  --calendar-day: 32px;
  --calendar-text-size: 12px;
  --calendar-text-lh: 20px;
  --order-summary-w: calc(0.7147 * 100vw);
  --about-pt: calc(0.112 * 100vw);
  --about-pb: calc(0.0853 * 100vw);
  --about-gap: calc(0.1093 * 100vw);
  --about-num-w: calc(0.9147 * 100vw);
  --about-num-size: calc(0.4743 * 100vw);
  --about-num-ls: calc(-0.152 * 100vw);
  --about-num-x: calc(0.0053 * 100vw);
  --about-text-size: 24px;
  --about-text-lh: 36px;
  --cases-pt: calc(0.0853 * 100vw);
  --cases-pb: calc(0.0853 * 100vw);
  --cases-gap: calc(0.0853 * 100vw);
  --cases-head-gap: calc(0.128 * 100vw);
  --stamp: calc(0.16 * 100vw);
  --cases-title-size: 34px;
  --cases-title-lh: 40px;
  --cases-title-w: calc(0.9147 * 100vw);
  --cases-list-gap: calc(0.0853 * 100vw);
  --case-text-size: 14px;
  --case-text-lh: 20px;
  --case-meta-size: 12px;
  --case-meta-lh: 20px;
  --case-gap: calc(0.0427 * 100vw);
  --case-meta-gap: 0;
  --svc-h: calc(2.5467 * 100vw);
  --svc-c1-x: calc(0.0427 * 100vw);
  --svc-c1-y: calc(0.344 * 100vw);
  --svc-c1-w: calc(0.9147 * 100vw);
  --svc-c1-h: calc(0.9147 * 100vw);
  --svc-c2-x: calc(-0.1387 * 100vw);
  --svc-c2-y: calc(0.8667 * 100vw);
  --svc-c2-w: calc(1.28 * 100vw);
  --svc-c2-h: calc(1.28 * 100vw);
  --svc-c3-x: calc(0.296 * 100vw);
  --svc-c3-y: calc(1.8347 * 100vw);
  --svc-c3-w: calc(0.6667 * 100vw);
  --svc-c3-h: calc(0.664 * 100vw);
  --svc-btn-x: calc(0.256 * 100vw);
  --svc-btn-y: calc(2.264 * 100vw);
  --svc-btn: calc(0.16 * 100vw);
  --svc-man-x: calc(0.16 * 100vw);
  --svc-man-y: calc(0.064 * 100vw);
  --svc-man-w: calc(0.488 * 100vw);
  --svc-c3-pt: 0;
  --svc-title-size: 28px;
  --svc-title-lh: 36px;
  --svc-calc-title-size: 24px;
  --svc-calc-title-lh: 36px;
  --svc-text-size: 14px;
  --svc-text-lh: 20px;
  --svc-gap: calc(0.0213 * 100vw);
  --svc-t1-w: calc(0.5787 * 100vw);
  --svc-p1-w: calc(0.5787 * 100vw);
  --svc-t2-w: calc(0.7893 * 100vw);
  --svc-p2-w: calc(0.568 * 100vw);
  --svc-t3-w: calc(0.5813 * 100vw);
  --svc-p3-w: calc(0.536 * 100vw);
  --svc-c1-pt: calc(0.2667 * 100vw);
  --hero-img-h: calc(0.9813 * 100vw);
  --calendar-p: 16px;
  --calendar-head-gap: 24px;
  --calendar-nav: 32px;
  --calendar-row-gap: 4px;
  --calendar-actions-gap: 16px;
  --calendar-action-h: 40px;
  --calendar-action-px: 4px;
  --header-nav-size: 14px;
  --header-nav-lh: 20px;
  --textarea-h: 132px;
  --order-consent-size: 12px;
  --order-consent-lh: 20px;
  --tag-p: 8px;
  --tag-text-size: 12px;
  --tag-text-lh: 20px;
  --drop-h: 200px;
  --upload-gap: calc(0.1707 * 100vw);
  --adv-pt: calc(0.128 * 100vw);
  --adv-pb: calc(0.0853 * 100vw);
  --adv-gap: calc(0.128 * 100vw);
  --adv-title-size: 34px;
  --adv-title-lh: 40px;
  --adv-title-w: calc(0.9147 * 100vw);
  --adv-sub-size: 14px;
  --adv-sub-lh: 20px;
  --adv-sub-w: calc(0.8667 * 100vw);
  --adv-text-gap: calc(0.0427 * 100vw);
  --adv-col-gap: calc(0.032 * 100vw);
  --adv-item-gap: calc(0.0427 * 100vw);
  --adv-item-title-size: 24px;
  --adv-item-title-lh: 36px;
  --adv-item-text-size: 14px;
  --adv-item-text-lh: 20px;
  --adv-item-text-gap: calc(0.0213 * 100vw);
  --cta-pt: calc(0.064 * 100vw);
  --cta-left-w: calc(0.9147 * 100vw);
  --cta-right-w: calc(0.9147 * 100vw);
  --cta-head-gap: calc(0.128 * 100vw);
  --cta-title-size: 34px;
  --cta-title-lh: 40px;
  --cta-sub-size: 14px;
  --cta-sub-lh: 20px;
  --cta-sub-w: calc(0.9147 * 100vw);
  --cta-text-gap: calc(0.0427 * 100vw);
  --cta-chat-gap: calc(0.128 * 100vw);
  --chat-gap: calc(0.0427 * 100vw);
  --chat-p: calc(0.0427 * 100vw);
  --chat-r: calc(0.0427 * 100vw);
  --chat-left-w: calc(0.72 * 100vw);
  --chat-right-w: calc(0.72 * 100vw);
  --avatar: calc(0.16 * 100vw);
  --avatar-gap: calc(0.032 * 100vw);
  --chat-meta-size: 12px;
  --chat-meta-lh: 20px;
  --chat-meta-gap: calc(0.0107 * 100vw);
  --chat-text-size: 12px;
  --chat-text-lh: 20px;
  --chat-btn-gap: calc(0.0427 * 100vw);
  --cta-btn-h: 56px;
  --cta-btn-px: 48px;
  --wordmark-h: calc(0.736 * 100vw);
  --cta-chat-offset: 0;
  --cta-btn-text-size: 12px;
  --cta-btn-text-lh: 20px;
  --tab-text-size: 12px;
  --tab-text-lh: 20px;
  --wordmark-w: calc(1.776 * 100vw);
  --doc-pt: calc(0.064 * 100vw);
  --doc-pb: calc(0.128 * 100vw);
  --doc-w: calc(0.9147 * 100vw);
  --doc-title-size: 34px;
  --doc-title-lh: 40px;
  --doc-h-size: 18px;
  --doc-h-lh: 28px;
  --doc-text-size: 14px;
  --doc-text-lh: 20px;
}
@media (min-width: 375px) {
  :root {
    --page-px: calc(16px + 8 * (100vw - 375px) / 369);
    --header-px: calc(16px + 16 * (100vw - 375px) / 369);
    --header-outer-pt: calc(24px + -24 * (100vw - 375px) / 369);
    --header-pt: calc(16px + 8 * (100vw - 375px) / 369);
    --header-pb: calc(16px + 8 * (100vw - 375px) / 369);
    --logo-w: 129px;
    --logo-h: 48px;
    --logo-top: 5px;
    --logo-left: 0;
    --footer-px: calc(16px + 8 * (100vw - 375px) / 369);
    --footer-pt: 32px;
    --footer-pb: calc(32px + 16 * (100vw - 375px) / 369);
    --footer-col-gap: 12px;
    --footer-group-gap: 12px;
    --footer-text-size: 12px;
    --footer-text-lh: 20px;
    --menu-pt: 64px;
    --menu-pb: 32px;
    --hero-pt: calc(48px + 16 * (100vw - 375px) / 369);
    --hero-pb: calc(16px + 16 * (100vw - 375px) / 369);
    --hero-text-w: calc(343px + 157 * (100vw - 375px) / 369);
    --hero-gap: 24px;
    --hero-title-size: 42px;
    --hero-title-lh: 52px;
    --hero-subtitle-size: 18px;
    --hero-subtitle-lh: 28px;
    --hero-img-w: 300px;
    --order-pt: calc(16px + 16 * (100vw - 375px) / 369);
    --order-pb: calc(16px + 16 * (100vw - 375px) / 369);
    --order-gap: 12px;
    --order-card-p: calc(16px + 8 * (100vw - 375px) / 369);
    --order-card-r: calc(24px + 8 * (100vw - 375px) / 369);
    --order-aside-w: calc(343px + 353 * (100vw - 375px) / 369);
    --order-aside-gap: 32px;
    --order-badge: calc(60px + 16 * (100vw - 375px) / 369);
    --order-badge-text-size: calc(16px + 2 * (100vw - 375px) / 369);
    --order-badge-text-lh: calc(24px + 4 * (100vw - 375px) / 369);
    --order-title-size: 28px;
    --order-title-lh: 36px;
    --order-desc-size: calc(12px + 2 * (100vw - 375px) / 369);
    --order-desc-lh: 20px;
    --order-text-gap: 8px;
    --order-main-gap: calc(64px + 32 * (100vw - 375px) / 369);
    --order-inputs-gap: 16px;
    --order-label-w: 160px;
    --order-label-gap: 8px;
    --order-label-size: calc(12px + 2 * (100vw - 375px) / 369);
    --order-label-lh: 20px;
    --field-h: calc(56px + 8 * (100vw - 375px) / 369);
    --field-p: calc(4px + 4 * (100vw - 375px) / 369);
    --field-text-size: calc(12px + 2 * (100vw - 375px) / 369);
    --field-text-lh: 20px;
    --field-btn-h: 48px;
    --field-btn-py: 8px;
    --btn-h: calc(56px + 8 * (100vw - 375px) / 369);
    --btn-px: 48px;
    --btn-text-size: 14px;
    --btn-text-lh: 20px;
    --option-h: 48px;
    --calendar-w: calc(311px + 125 * (100vw - 375px) / 369);
    --calendar-day: 32px;
    --calendar-text-size: calc(12px + 2 * (100vw - 375px) / 369);
    --calendar-text-lh: 20px;
    --order-summary-w: 268px;
    --about-pt: calc(42px + 7 * (100vw - 375px) / 369);
    --about-pb: 32px;
    --about-gap: calc(41px + 4 * (100vw - 375px) / 369);
    --about-num-w: calc(343px + 337 * (100vw - 375px) / 369);
    --about-num-size: calc(177.87px + 161.04 * (100vw - 375px) / 369);
    --about-num-ls: calc(-57px + -28 * (100vw - 375px) / 369);
    --about-num-x: calc(2px + -2 * (100vw - 375px) / 369);
    --about-text-size: 24px;
    --about-text-lh: 36px;
    --cases-pt: calc(32px + -32 * (100vw - 375px) / 369);
    --cases-pb: 32px;
    --cases-gap: 32px;
    --cases-head-gap: calc(48px + -16 * (100vw - 375px) / 369);
    --stamp: 60px;
    --cases-title-size: 34px;
    --cases-title-lh: 40px;
    --cases-title-w: calc(343px + 106 * (100vw - 375px) / 369);
    --cases-list-gap: calc(32px + -20 * (100vw - 375px) / 369);
    --case-text-size: 14px;
    --case-text-lh: 20px;
    --case-meta-size: 12px;
    --case-meta-lh: 20px;
    --case-gap: calc(16px + 8 * (100vw - 375px) / 369);
    --case-meta-gap: calc(0 + 4 * (100vw - 375px) / 369);
    --svc-h: 955px;
    --svc-h: 955px;
    --svc-c1-x: 16px;
    --svc-c1-x: 16px;
    --svc-c1-y: 129px;
    --svc-c1-y: 129px;
    --svc-c1-w: 343px;
    --svc-c1-w: 343px;
    --svc-c1-h: 343px;
    --svc-c1-h: 343px;
    --svc-c2-x: -52px;
    --svc-c2-x: -52px;
    --svc-c2-y: 325px;
    --svc-c2-y: 325px;
    --svc-c2-w: 480px;
    --svc-c2-w: 480px;
    --svc-c2-h: 480px;
    --svc-c2-h: 480px;
    --svc-c3-x: 111px;
    --svc-c3-x: 111px;
    --svc-c3-y: 688px;
    --svc-c3-y: 688px;
    --svc-c3-w: 250px;
    --svc-c3-w: 250px;
    --svc-c3-h: 249px;
    --svc-c3-h: 249px;
    --svc-btn-x: 96px;
    --svc-btn-x: 96px;
    --svc-btn-y: 849px;
    --svc-btn-y: 849px;
    --svc-btn: 60px;
    --svc-btn: 60px;
    --svc-man-x: 60px;
    --svc-man-x: 60px;
    --svc-man-y: 24px;
    --svc-man-y: 24px;
    --svc-man-w: 183px;
    --svc-man-w: 183px;
    --svc-c3-pt: 0;
    --svc-c3-pt: 0;
    --svc-title-size: 28px;
    --svc-title-lh: 36px;
    --svc-calc-title-size: 24px;
    --svc-calc-title-lh: 36px;
    --svc-text-size: 14px;
    --svc-text-lh: 20px;
    --svc-gap: 8px;
    --svc-t1-w: 217px;
    --svc-t1-w: 217px;
    --svc-p1-w: 217px;
    --svc-p1-w: 217px;
    --svc-t2-w: 296px;
    --svc-t2-w: 296px;
    --svc-p2-w: 213px;
    --svc-p2-w: 213px;
    --svc-t3-w: 218px;
    --svc-t3-w: 218px;
    --svc-p3-w: 201px;
    --svc-p3-w: 201px;
    --svc-c1-pt: 100px;
    --svc-c1-pt: 100px;
    --hero-img-h: 368px;
    --calendar-p: 16px;
    --calendar-head-gap: 24px;
    --calendar-nav: calc(32px + 16 * (100vw - 375px) / 369);
    --calendar-row-gap: calc(4px + 4 * (100vw - 375px) / 369);
    --calendar-actions-gap: 16px;
    --calendar-action-h: calc(40px + 8 * (100vw - 375px) / 369);
    --calendar-action-px: calc(4px + 4 * (100vw - 375px) / 369);
    --header-nav-size: 14px;
    --header-nav-lh: 20px;
    --textarea-h: 132px;
    --order-consent-size: calc(12px + 2 * (100vw - 375px) / 369);
    --order-consent-lh: 20px;
    --tag-p: 8px;
    --tag-text-size: calc(12px + 2 * (100vw - 375px) / 369);
    --tag-text-lh: 20px;
    --drop-h: calc(200px + -96 * (100vw - 375px) / 369);
    --upload-gap: calc(64px + 32 * (100vw - 375px) / 369);
    --adv-pt: calc(48px + -16 * (100vw - 375px) / 369);
    --adv-pb: 32px;
    --adv-gap: 48px;
    --adv-title-size: 34px;
    --adv-title-lh: 40px;
    --adv-title-w: calc(343px + 138 * (100vw - 375px) / 369);
    --adv-sub-size: calc(14px + -2 * (100vw - 375px) / 369);
    --adv-sub-lh: 20px;
    --adv-sub-w: calc(325px + 131 * (100vw - 375px) / 369);
    --adv-text-gap: 16px;
    --adv-col-gap: 12px;
    --adv-item-gap: calc(16px + 8 * (100vw - 375px) / 369);
    --adv-item-title-size: calc(24px + -6 * (100vw - 375px) / 369);
    --adv-item-title-lh: calc(36px + -8 * (100vw - 375px) / 369);
    --adv-item-text-size: calc(14px + -2 * (100vw - 375px) / 369);
    --adv-item-text-lh: 20px;
    --adv-item-text-gap: calc(8px + 8 * (100vw - 375px) / 369);
    --cta-pt: calc(24px + 8 * (100vw - 375px) / 369);
    --cta-left-w: calc(343px + 353 * (100vw - 375px) / 369);
    --cta-right-w: calc(343px + 353 * (100vw - 375px) / 369);
    --cta-head-gap: calc(48px + -16 * (100vw - 375px) / 369);
    --cta-title-size: 34px;
    --cta-title-lh: 40px;
    --cta-sub-size: calc(14px + 2 * (100vw - 375px) / 369);
    --cta-sub-lh: calc(20px + 4 * (100vw - 375px) / 369);
    --cta-sub-w: calc(343px + 161 * (100vw - 375px) / 369);
    --cta-text-gap: calc(16px + 8 * (100vw - 375px) / 369);
    --cta-chat-gap: 48px;
    --chat-gap: 16px;
    --chat-p: calc(16px + 8 * (100vw - 375px) / 369);
    --chat-r: calc(16px + 16 * (100vw - 375px) / 369);
    --chat-left-w: calc(270px + 98 * (100vw - 375px) / 369);
    --chat-right-w: calc(270px + 222 * (100vw - 375px) / 369);
    --avatar: 60px;
    --avatar-gap: 12px;
    --chat-meta-size: calc(12px + 2 * (100vw - 375px) / 369);
    --chat-meta-lh: 20px;
    --chat-meta-gap: calc(4px + 4 * (100vw - 375px) / 369);
    --chat-text-size: calc(12px + 2 * (100vw - 375px) / 369);
    --chat-text-lh: 20px;
    --chat-btn-gap: calc(16px + 8 * (100vw - 375px) / 369);
    --cta-btn-h: calc(56px + 8 * (100vw - 375px) / 369);
    --cta-btn-px: 48px;
    --wordmark-h: calc(276px + 8 * (100vw - 375px) / 369);
    --cta-chat-offset: 0;
    --cta-btn-text-size: 12px;
    --cta-btn-text-lh: 20px;
    --tab-text-size: calc(12px + 2 * (100vw - 375px) / 369);
    --tab-text-lh: 20px;
    --wordmark-w: calc(666px + 33 * (100vw - 375px) / 369);
    --doc-pt: calc(24px + 8 * (100vw - 375px) / 369);
    --doc-pb: calc(48px + 16 * (100vw - 375px) / 369);
    --doc-w: calc(343px + 353 * (100vw - 375px) / 369);
    --doc-title-size: calc(34px + 8 * (100vw - 375px) / 369);
    --doc-title-lh: calc(40px + 12 * (100vw - 375px) / 369);
    --doc-h-size: calc(18px + 6 * (100vw - 375px) / 369);
    --doc-h-lh: calc(28px + 8 * (100vw - 375px) / 369);
    --doc-text-size: calc(14px + 2 * (100vw - 375px) / 369);
    --doc-text-lh: calc(20px + 4 * (100vw - 375px) / 369);
  }
}
@media (min-width: 619.98px) {
  :root {
    --svc-h: calc(955px + -501.6667 * (100vw - 619.98px) / 0.01999999999998181);
    --svc-c1-x: calc(16px + 4 * (100vw - 619.98px) / 0.01999999999998181);
    --svc-c1-y: calc(129px + 11.8333 * (100vw - 619.98px) / 0.01999999999998181);
    --svc-c1-w: calc(343px + -57.1667 * (100vw - 619.98px) / 0.01999999999998181);
    --svc-c1-h: calc(343px + -57.1667 * (100vw - 619.98px) / 0.01999999999998181);
    --svc-c2-x: calc(-52px + 248.6667 * (100vw - 619.98px) / 0.01999999999998181);
    --svc-c2-y: calc(325px + -298.3333 * (100vw - 619.98px) / 0.01999999999998181);
    --svc-c2-w: calc(480px + -80 * (100vw - 619.98px) / 0.01999999999998181);
    --svc-c2-h: calc(480px + -80 * (100vw - 619.98px) / 0.01999999999998181);
    --svc-c3-x: calc(111px + 340.6667 * (100vw - 619.98px) / 0.01999999999998181);
    --svc-c3-y: calc(688px + -405.5 * (100vw - 619.98px) / 0.01999999999998181);
    --svc-c3-w: calc(250px + -105 * (100vw - 619.98px) / 0.01999999999998181);
    --svc-c3-h: calc(249px + -104.8333 * (100vw - 619.98px) / 0.01999999999998181);
    --svc-btn-x: calc(96px + 343.1667 * (100vw - 619.98px) / 0.01999999999998181);
    --svc-btn-y: calc(849px + -472.3333 * (100vw - 619.98px) / 0.01999999999998181);
    --svc-btn: calc(60px + -10 * (100vw - 619.98px) / 0.01999999999998181);
    --svc-man-x: calc(60px + 41.6667 * (100vw - 619.98px) / 0.01999999999998181);
    --svc-man-y: calc(24px + 37.6667 * (100vw - 619.98px) / 0.01999999999998181);
    --svc-man-w: calc(183px + -35.5 * (100vw - 619.98px) / 0.01999999999998181);
    --svc-c3-pt: 0;
    --svc-title-size: calc(28px + -8 * (100vw - 619.98px) / 0.01999999999998181);
    --svc-title-lh: calc(36px + -6 * (100vw - 619.98px) / 0.01999999999998181);
    --svc-calc-title-size: calc(24px + -10.6667 * (100vw - 619.98px) / 0.01999999999998181);
    --svc-calc-title-lh: calc(36px + -16 * (100vw - 619.98px) / 0.01999999999998181);
    --svc-text-size: calc(14px + -2.3333 * (100vw - 619.98px) / 0.01999999999998181);
    --svc-text-lh: calc(20px + -3.3333 * (100vw - 619.98px) / 0.01999999999998181);
    --svc-gap: calc(8px + -1.3333 * (100vw - 619.98px) / 0.01999999999998181);
    --svc-t1-w: calc(217px + -57.8333 * (100vw - 619.98px) / 0.01999999999998181);
    --svc-p1-w: calc(217px + -36.1667 * (100vw - 619.98px) / 0.01999999999998181);
    --svc-t2-w: calc(296px + -61.8333 * (100vw - 619.98px) / 0.01999999999998181);
    --svc-p2-w: calc(213px + -36.3333 * (100vw - 619.98px) / 0.01999999999998181);
    --svc-t3-w: calc(218px + -99.6667 * (100vw - 619.98px) / 0.01999999999998181);
    --svc-p3-w: calc(201px + -33.5 * (100vw - 619.98px) / 0.01999999999998181);
    --svc-c1-pt: calc(100px + -16.6667 * (100vw - 619.98px) / 0.01999999999998181);
  }
}
@media (min-width: 620px) {
  :root {
    --svc-h: calc(453.3333px + 90.6667 * (100vw - 620px) / 124);
    --svc-c1-x: calc(20px + 4 * (100vw - 620px) / 124);
    --svc-c1-y: calc(140.8333px + 28.1667 * (100vw - 620px) / 124);
    --svc-c1-w: calc(285.8333px + 57.1667 * (100vw - 620px) / 124);
    --svc-c1-h: calc(285.8333px + 57.1667 * (100vw - 620px) / 124);
    --svc-c2-x: calc(196.6667px + 39.3333 * (100vw - 620px) / 124);
    --svc-c2-y: calc(26.6667px + 5.3333 * (100vw - 620px) / 124);
    --svc-c2-w: calc(400px + 80 * (100vw - 620px) / 124);
    --svc-c2-h: calc(400px + 80 * (100vw - 620px) / 124);
    --svc-c3-x: calc(451.6667px + 90.3333 * (100vw - 620px) / 124);
    --svc-c3-y: calc(282.5px + 56.5 * (100vw - 620px) / 124);
    --svc-c3-w: calc(145px + 29 * (100vw - 620px) / 124);
    --svc-c3-h: calc(144.1667px + 28.8333 * (100vw - 620px) / 124);
    --svc-btn-x: calc(439.1667px + 87.8333 * (100vw - 620px) / 124);
    --svc-btn-y: calc(376.6667px + 75.3333 * (100vw - 620px) / 124);
    --svc-btn: calc(50px + 10 * (100vw - 620px) / 124);
    --svc-man-x: calc(101.6667px + 20.3333 * (100vw - 620px) / 124);
    --svc-man-y: calc(61.6667px + 12.3333 * (100vw - 620px) / 124);
    --svc-man-w: calc(147.5px + 29.5 * (100vw - 620px) / 124);
    --svc-c3-pt: 0;
    --svc-title-size: calc(20px + 4 * (100vw - 620px) / 124);
    --svc-title-lh: calc(30px + 6 * (100vw - 620px) / 124);
    --svc-calc-title-size: calc(13.3333px + 2.6667 * (100vw - 620px) / 124);
    --svc-calc-title-lh: calc(20px + 4 * (100vw - 620px) / 124);
    --svc-text-size: calc(11.6667px + 2.3333 * (100vw - 620px) / 124);
    --svc-text-lh: calc(16.6667px + 3.3333 * (100vw - 620px) / 124);
    --svc-gap: calc(6.6667px + 1.3333 * (100vw - 620px) / 124);
    --svc-t1-w: calc(159.1667px + 31.8333 * (100vw - 620px) / 124);
    --svc-p1-w: calc(180.8333px + 36.1667 * (100vw - 620px) / 124);
    --svc-t2-w: calc(234.1667px + 46.8333 * (100vw - 620px) / 124);
    --svc-p2-w: calc(176.6667px + 35.3333 * (100vw - 620px) / 124);
    --svc-t3-w: calc(118.3333px + 23.6667 * (100vw - 620px) / 124);
    --svc-p3-w: calc(167.5px + 33.5 * (100vw - 620px) / 124);
    --svc-c1-pt: calc(83.3333px + 16.6667 * (100vw - 620px) / 124);
  }
}
@media (min-width: 744px) {
  :root {
    --page-px: calc(24px + 8 * (100vw - 744px) / 280);
    --header-px: 32px;
    --header-outer-pt: 0;
    --header-pt: calc(24px + 8 * (100vw - 744px) / 280);
    --header-pb: calc(24px + 8 * (100vw - 744px) / 280);
    --logo-w: calc(129px + 45 * (100vw - 744px) / 280);
    --logo-h: calc(48px + 16 * (100vw - 744px) / 280);
    --logo-top: calc(5px + 3 * (100vw - 744px) / 280);
    --logo-left: calc(0 + 2 * (100vw - 744px) / 280);
    --footer-px: calc(24px + 8 * (100vw - 744px) / 280);
    --footer-pt: calc(32px + 16 * (100vw - 744px) / 280);
    --footer-pb: calc(48px + 16 * (100vw - 744px) / 280);
    --footer-col-gap: 12px;
    --footer-group-gap: calc(12px + 12 * (100vw - 744px) / 280);
    --footer-text-size: calc(12px + 2 * (100vw - 744px) / 280);
    --footer-text-lh: 20px;
    --menu-pt: 64px;
    --menu-pb: 32px;
    --hero-pt: calc(64px + 32 * (100vw - 744px) / 280);
    --hero-pb: calc(32px + -16 * (100vw - 744px) / 280);
    --hero-text-w: calc(500px + 136 * (100vw - 744px) / 280);
    --hero-gap: calc(24px + 24 * (100vw - 744px) / 280);
    --hero-title-size: calc(42px + 12 * (100vw - 744px) / 280);
    --hero-title-lh: calc(52px + 12 * (100vw - 744px) / 280);
    --hero-subtitle-size: calc(18px + 6 * (100vw - 744px) / 280);
    --hero-subtitle-lh: calc(28px + 8 * (100vw - 744px) / 280);
    --hero-img-w: calc(300px + 147 * (100vw - 744px) / 280);
    --order-pt: calc(32px + 16 * (100vw - 744px) / 280);
    --order-pb: calc(32px + 16 * (100vw - 744px) / 280);
    --order-gap: calc(12px + 4 * (100vw - 744px) / 280);
    --order-card-p: calc(24px + 8 * (100vw - 744px) / 280);
    --order-card-r: 32px;
    --order-aside-w: calc(696px + 264 * (100vw - 744px) / 280);
    --order-aside-gap: 32px;
    --order-badge: 76px;
    --order-badge-text-size: 18px;
    --order-badge-text-lh: 28px;
    --order-title-size: 28px;
    --order-title-lh: 36px;
    --order-desc-size: 14px;
    --order-desc-lh: 20px;
    --order-text-gap: calc(8px + 4 * (100vw - 744px) / 280);
    --order-main-gap: calc(96px + -32 * (100vw - 744px) / 280);
    --order-inputs-gap: calc(16px + -4 * (100vw - 744px) / 280);
    --order-label-w: 160px;
    --order-label-gap: calc(8px + 24 * (100vw - 744px) / 280);
    --order-label-size: 14px;
    --order-label-lh: 20px;
    --field-h: 64px;
    --field-p: 8px;
    --field-text-size: 14px;
    --field-text-lh: 20px;
    --field-btn-h: 48px;
    --field-btn-py: 8px;
    --btn-h: 64px;
    --btn-px: 48px;
    --btn-text-size: 14px;
    --btn-text-lh: 20px;
    --option-h: 48px;
    --calendar-w: 436px;
    --calendar-day: 32px;
    --calendar-text-size: 14px;
    --calendar-text-lh: 20px;
    --order-summary-w: calc(268px + -48 * (100vw - 744px) / 280);
    --about-pt: calc(49px + 33 * (100vw - 744px) / 280);
    --about-pb: calc(32px + 50 * (100vw - 744px) / 280);
    --about-gap: calc(45px + -21 * (100vw - 744px) / 280);
    --about-num-w: calc(680px + -248 * (100vw - 744px) / 280);
    --about-num-size: calc(338.91px + -129.01 * (100vw - 744px) / 280);
    --about-num-ls: calc(-85px + 33 * (100vw - 744px) / 280);
    --about-num-x: calc(0 + 7 * (100vw - 744px) / 280);
    --about-text-size: 24px;
    --about-text-lh: 36px;
    --cases-pt: 0;
    --cases-pb: calc(32px + 16 * (100vw - 744px) / 280);
    --cases-gap: calc(32px + 16 * (100vw - 744px) / 280);
    --cases-head-gap: calc(32px + 16 * (100vw - 744px) / 280);
    --stamp: calc(60px + 16 * (100vw - 744px) / 280);
    --cases-title-size: calc(34px + 8 * (100vw - 744px) / 280);
    --cases-title-lh: calc(40px + 12 * (100vw - 744px) / 280);
    --cases-title-w: calc(449px + 102 * (100vw - 744px) / 280);
    --cases-list-gap: 12px;
    --case-text-size: calc(14px + 4 * (100vw - 744px) / 280);
    --case-text-lh: calc(20px + 8 * (100vw - 744px) / 280);
    --case-meta-size: calc(12px + 2 * (100vw - 744px) / 280);
    --case-meta-lh: 20px;
    --case-gap: 24px;
    --case-meta-gap: calc(4px + 2 * (100vw - 744px) / 280);
    --svc-h: calc(544px + 32 * (100vw - 744px) / 280);
    --svc-c1-x: calc(24px + 8 * (100vw - 744px) / 280);
    --svc-c1-y: calc(169px + 16 * (100vw - 744px) / 280);
    --svc-c1-w: 343px;
    --svc-c1-h: 343px;
    --svc-c2-x: calc(236px + 45 * (100vw - 744px) / 280);
    --svc-c2-y: calc(32px + 16 * (100vw - 744px) / 280);
    --svc-c2-w: 480px;
    --svc-c2-h: 480px;
    --svc-c3-x: calc(542px + 77 * (100vw - 744px) / 280);
    --svc-c3-y: calc(339px + -154 * (100vw - 744px) / 280);
    --svc-c3-w: calc(174px + 197 * (100vw - 744px) / 280);
    --svc-c3-h: calc(173px + 170 * (100vw - 744px) / 280);
    --svc-btn-x: calc(527px + 248 * (100vw - 744px) / 280);
    --svc-btn-y: calc(452px + -203 * (100vw - 744px) / 280);
    --svc-btn: 60px;
    --svc-man-x: calc(122px + 20 * (100vw - 744px) / 280);
    --svc-man-y: calc(74px + -9 * (100vw - 744px) / 280);
    --svc-man-w: calc(177px + 28 * (100vw - 744px) / 280);
    --svc-c3-pt: calc(0 + 140 * (100vw - 744px) / 280);
    --svc-title-size: calc(24px + 4 * (100vw - 744px) / 280);
    --svc-title-lh: 36px;
    --svc-calc-title-size: calc(16px + 12 * (100vw - 744px) / 280);
    --svc-calc-title-lh: calc(24px + 12 * (100vw - 744px) / 280);
    --svc-text-size: 14px;
    --svc-text-lh: 20px;
    --svc-gap: 8px;
    --svc-t1-w: 191px;
    --svc-p1-w: 217px;
    --svc-t2-w: calc(281px + 1 * (100vw - 744px) / 280);
    --svc-p2-w: 212px;
    --svc-t3-w: calc(142px + 236 * (100vw - 744px) / 280);
    --svc-p3-w: 201px;
    --svc-c1-pt: calc(100px + -18 * (100vw - 744px) / 280);
    --hero-img-h: calc(368px + 107 * (100vw - 744px) / 280);
    --calendar-p: 16px;
    --calendar-head-gap: 24px;
    --calendar-nav: 48px;
    --calendar-row-gap: 8px;
    --calendar-actions-gap: 16px;
    --calendar-action-h: 48px;
    --calendar-action-px: 8px;
    --header-nav-size: 14px;
    --header-nav-lh: 20px;
    --textarea-h: calc(132px + -4 * (100vw - 744px) / 280);
    --order-consent-size: 14px;
    --order-consent-lh: 20px;
    --tag-p: 8px;
    --tag-text-size: 14px;
    --tag-text-lh: 20px;
    --drop-h: 104px;
    --upload-gap: calc(96px + -32 * (100vw - 744px) / 280);
    --adv-pt: calc(32px + 16 * (100vw - 744px) / 280);
    --adv-pb: calc(32px + 16 * (100vw - 744px) / 280);
    --adv-gap: 48px;
    --adv-title-size: calc(34px + 8 * (100vw - 744px) / 280);
    --adv-title-lh: calc(40px + 12 * (100vw - 744px) / 280);
    --adv-title-w: calc(481px + 172 * (100vw - 744px) / 280);
    --adv-sub-size: calc(12px + 2 * (100vw - 744px) / 280);
    --adv-sub-lh: 20px;
    --adv-sub-w: calc(456px + 384 * (100vw - 744px) / 280);
    --adv-text-gap: calc(16px + 16 * (100vw - 744px) / 280);
    --adv-col-gap: 12px;
    --adv-item-gap: 24px;
    --adv-item-title-size: calc(18px + 6 * (100vw - 744px) / 280);
    --adv-item-title-lh: calc(28px + 8 * (100vw - 744px) / 280);
    --adv-item-text-size: calc(12px + 2 * (100vw - 744px) / 280);
    --adv-item-text-lh: 20px;
    --adv-item-text-gap: calc(16px + 16 * (100vw - 744px) / 280);
    --cta-pt: calc(32px + 16 * (100vw - 744px) / 280);
    --cta-left-w: calc(696px + -280 * (100vw - 744px) / 280);
    --cta-right-w: calc(696px + -104 * (100vw - 744px) / 280);
    --cta-head-gap: calc(32px + 16 * (100vw - 744px) / 280);
    --cta-title-size: calc(34px + 8 * (100vw - 744px) / 280);
    --cta-title-lh: calc(40px + 12 * (100vw - 744px) / 280);
    --cta-sub-size: calc(16px + 2 * (100vw - 744px) / 280);
    --cta-sub-lh: calc(24px + 4 * (100vw - 744px) / 280);
    --cta-sub-w: calc(504px + -88 * (100vw - 744px) / 280);
    --cta-text-gap: 24px;
    --cta-chat-gap: calc(48px + -16 * (100vw - 744px) / 280);
    --chat-gap: 16px;
    --chat-p: calc(24px + 8 * (100vw - 744px) / 280);
    --chat-r: 32px;
    --chat-left-w: 368px;
    --chat-right-w: 492px;
    --avatar: calc(60px + 16 * (100vw - 744px) / 280);
    --avatar-gap: 12px;
    --chat-meta-size: calc(14px + 2 * (100vw - 744px) / 280);
    --chat-meta-lh: calc(20px + 4 * (100vw - 744px) / 280);
    --chat-meta-gap: 8px;
    --chat-text-size: calc(14px + 2 * (100vw - 744px) / 280);
    --chat-text-lh: calc(20px + 4 * (100vw - 744px) / 280);
    --chat-btn-gap: calc(24px + 8 * (100vw - 744px) / 280);
    --cta-btn-h: 64px;
    --cta-btn-px: 48px;
    --wordmark-h: calc(284px + 80 * (100vw - 744px) / 280);
    --cta-chat-offset: calc(0 + 244 * (100vw - 744px) / 280);
    --cta-btn-text-size: calc(12px + 2 * (100vw - 744px) / 280);
    --cta-btn-text-lh: 20px;
    --tab-text-size: 14px;
    --tab-text-lh: 20px;
    --wordmark-w: calc(699px + 250 * (100vw - 744px) / 280);
    --doc-pt: calc(32px + 16 * (100vw - 744px) / 280);
    --doc-pb: calc(64px + 32 * (100vw - 744px) / 280);
    --doc-w: calc(696px + 64 * (100vw - 744px) / 280);
    --doc-title-size: 42px;
    --doc-title-lh: 52px;
    --doc-h-size: 24px;
    --doc-h-lh: 36px;
    --doc-text-size: 16px;
    --doc-text-lh: 24px;
  }
}
@media (min-width: 1024px) {
  :root {
    --page-px: calc(32px + 16 * (100vw - 1024px) / 416);
    --header-px: calc(32px + 16 * (100vw - 1024px) / 416);
    --header-outer-pt: 0;
    --header-pt: calc(32px + 32 * (100vw - 1024px) / 416);
    --header-pb: calc(32px + 16 * (100vw - 1024px) / 416);
    --logo-w: 174px;
    --logo-h: 64px;
    --logo-top: 8px;
    --logo-left: 2px;
    --footer-px: calc(32px + 16 * (100vw - 1024px) / 416);
    --footer-pt: 48px;
    --footer-pb: 64px;
    --footer-col-gap: calc(12px + 12 * (100vw - 1024px) / 416);
    --footer-group-gap: 24px;
    --footer-text-size: calc(14px + 2 * (100vw - 1024px) / 416);
    --footer-text-lh: calc(20px + 4 * (100vw - 1024px) / 416);
    --menu-pt: 64px;
    --menu-pb: 32px;
    --hero-pt: calc(96px + -32 * (100vw - 1024px) / 416);
    --hero-pb: 16px;
    --hero-text-w: calc(636px + 184 * (100vw - 1024px) / 416);
    --hero-gap: 48px;
    --hero-title-size: calc(54px + 14 * (100vw - 1024px) / 416);
    --hero-title-lh: calc(64px + 16 * (100vw - 1024px) / 416);
    --hero-subtitle-size: calc(24px + 4 * (100vw - 1024px) / 416);
    --hero-subtitle-lh: 36px;
    --hero-img-w: calc(447px + 77 * (100vw - 1024px) / 416);
    --order-pt: calc(48px + 16 * (100vw - 1024px) / 416);
    --order-pb: calc(48px + 16 * (100vw - 1024px) / 416);
    --order-gap: calc(16px + 8 * (100vw - 1024px) / 416);
    --order-card-p: 32px;
    --order-card-r: 32px;
    --order-aside-w: calc(960px + -528 * (100vw - 1024px) / 416);
    --order-aside-gap: 32px;
    --order-badge: calc(76px + 8 * (100vw - 1024px) / 416);
    --order-badge-text-size: calc(18px + 6 * (100vw - 1024px) / 416);
    --order-badge-text-lh: calc(28px + 8 * (100vw - 1024px) / 416);
    --order-title-size: 28px;
    --order-title-lh: 36px;
    --order-desc-size: 14px;
    --order-desc-lh: 20px;
    --order-text-gap: 12px;
    --order-main-gap: 64px;
    --order-inputs-gap: 12px;
    --order-label-w: 160px;
    --order-label-gap: 32px;
    --order-label-size: 14px;
    --order-label-lh: 20px;
    --field-h: 64px;
    --field-p: 8px;
    --field-text-size: 14px;
    --field-text-lh: 20px;
    --field-btn-h: 48px;
    --field-btn-py: 8px;
    --btn-h: 64px;
    --btn-px: 48px;
    --btn-text-size: 14px;
    --btn-text-lh: 20px;
    --option-h: 48px;
    --calendar-w: 436px;
    --calendar-day: 32px;
    --calendar-text-size: 14px;
    --calendar-text-lh: 20px;
    --order-summary-w: calc(220px + 20 * (100vw - 1024px) / 416);
    --about-pt: 82px;
    --about-pb: 82px;
    --about-gap: 24px;
    --about-num-w: 432px;
    --about-num-size: 209.9px;
    --about-num-ls: -52px;
    --about-num-x: 7px;
    --about-text-size: calc(24px + 4 * (100vw - 1024px) / 416);
    --about-text-lh: 36px;
    --cases-pt: 0;
    --cases-pb: calc(48px + 16 * (100vw - 1024px) / 416);
    --cases-gap: calc(48px + 48 * (100vw - 1024px) / 416);
    --cases-head-gap: calc(48px + 16 * (100vw - 1024px) / 416);
    --stamp: calc(76px + 8 * (100vw - 1024px) / 416);
    --cases-title-size: calc(42px + 12 * (100vw - 1024px) / 416);
    --cases-title-lh: calc(52px + 12 * (100vw - 1024px) / 416);
    --cases-title-w: calc(551px + 249 * (100vw - 1024px) / 416);
    --cases-list-gap: calc(12px + 12 * (100vw - 1024px) / 416);
    --case-text-size: calc(18px + 10 * (100vw - 1024px) / 416);
    --case-text-lh: calc(28px + 8 * (100vw - 1024px) / 416);
    --case-meta-size: calc(14px + 4 * (100vw - 1024px) / 416);
    --case-meta-lh: calc(20px + 8 * (100vw - 1024px) / 416);
    --case-gap: calc(24px + 24 * (100vw - 1024px) / 416);
    --case-meta-gap: 6px;
    --svc-h: calc(576px + 158 * (100vw - 1024px) / 416);
    --svc-c1-x: calc(32px + 16 * (100vw - 1024px) / 416);
    --svc-c1-y: calc(185px + 57 * (100vw - 1024px) / 416);
    --svc-c1-w: calc(343px + 117 * (100vw - 1024px) / 416);
    --svc-c1-h: calc(343px + 117 * (100vw - 1024px) / 416);
    --svc-c2-x: calc(281px + 55 * (100vw - 1024px) / 416);
    --svc-c2-y: calc(48px + -16 * (100vw - 1024px) / 416);
    --svc-c2-w: calc(480px + 190 * (100vw - 1024px) / 416);
    --svc-c2-h: calc(480px + 190 * (100vw - 1024px) / 416);
    --svc-c3-x: calc(619px + 168 * (100vw - 1024px) / 416);
    --svc-c3-y: calc(185px + 89 * (100vw - 1024px) / 416);
    --svc-c3-w: calc(371px + 232 * (100vw - 1024px) / 416);
    --svc-c3-h: calc(343px + 85 * (100vw - 1024px) / 416);
    --svc-btn-x: calc(775px + 272 * (100vw - 1024px) / 416);
    --svc-btn-y: calc(249px + 97 * (100vw - 1024px) / 416);
    --svc-btn: calc(60px + 24 * (100vw - 1024px) / 416);
    --svc-man-x: calc(142px + 46 * (100vw - 1024px) / 416);
    --svc-man-y: calc(65px + 36 * (100vw - 1024px) / 416);
    --svc-man-w: calc(205px + 41 * (100vw - 1024px) / 416);
    --svc-c3-pt: calc(140px + 48 * (100vw - 1024px) / 416);
    --svc-title-size: calc(28px + 8 * (100vw - 1024px) / 416);
    --svc-title-lh: calc(36px + 12 * (100vw - 1024px) / 416);
    --svc-calc-title-size: calc(28px + 8 * (100vw - 1024px) / 416);
    --svc-calc-title-lh: calc(36px + 12 * (100vw - 1024px) / 416);
    --svc-text-size: calc(14px + 4 * (100vw - 1024px) / 416);
    --svc-text-lh: calc(20px + 8 * (100vw - 1024px) / 416);
    --svc-gap: calc(8px + 8 * (100vw - 1024px) / 416);
    --svc-t1-w: calc(191px + 33 * (100vw - 1024px) / 416);
    --svc-p1-w: calc(217px + 69 * (100vw - 1024px) / 416);
    --svc-t2-w: calc(282px + 98 * (100vw - 1024px) / 416);
    --svc-p2-w: calc(212px + 52 * (100vw - 1024px) / 416);
    --svc-t3-w: calc(378px + 8 * (100vw - 1024px) / 416);
    --svc-p3-w: calc(201px + 153 * (100vw - 1024px) / 416);
    --svc-c1-pt: calc(82px + 46 * (100vw - 1024px) / 416);
    --hero-img-h: calc(475px + 81 * (100vw - 1024px) / 416);
    --calendar-p: 16px;
    --calendar-head-gap: 24px;
    --calendar-nav: 48px;
    --calendar-row-gap: 8px;
    --calendar-actions-gap: 16px;
    --calendar-action-h: 48px;
    --calendar-action-px: 8px;
    --header-nav-size: calc(14px + 2 * (100vw - 1024px) / 416);
    --header-nav-lh: calc(20px + 4 * (100vw - 1024px) / 416);
    --textarea-h: calc(128px + -40 * (100vw - 1024px) / 416);
    --order-consent-size: calc(14px + -2 * (100vw - 1024px) / 416);
    --order-consent-lh: 20px;
    --tag-p: 8px;
    --tag-text-size: 14px;
    --tag-text-lh: 20px;
    --drop-h: 104px;
    --upload-gap: calc(64px + -32 * (100vw - 1024px) / 416);
    --adv-pt: calc(48px + 16 * (100vw - 1024px) / 416);
    --adv-pb: calc(48px + 16 * (100vw - 1024px) / 416);
    --adv-gap: calc(48px + 48 * (100vw - 1024px) / 416);
    --adv-title-size: calc(42px + 26 * (100vw - 1024px) / 416);
    --adv-title-lh: calc(52px + 28 * (100vw - 1024px) / 416);
    --adv-title-w: calc(653px + 310 * (100vw - 1024px) / 416);
    --adv-sub-size: calc(14px + 4 * (100vw - 1024px) / 416);
    --adv-sub-lh: calc(20px + 8 * (100vw - 1024px) / 416);
    --adv-sub-w: 840px;
    --adv-text-gap: 32px;
    --adv-col-gap: calc(12px + 12 * (100vw - 1024px) / 416);
    --adv-item-gap: calc(24px + 24 * (100vw - 1024px) / 416);
    --adv-item-title-size: calc(24px + 4 * (100vw - 1024px) / 416);
    --adv-item-title-lh: 36px;
    --adv-item-text-size: calc(14px + 4 * (100vw - 1024px) / 416);
    --adv-item-text-lh: calc(20px + 8 * (100vw - 1024px) / 416);
    --adv-item-text-gap: 32px;
    --cta-pt: calc(48px + 16 * (100vw - 1024px) / 416);
    --cta-left-w: calc(416px + 144 * (100vw - 1024px) / 416);
    --cta-right-w: calc(592px + 168 * (100vw - 1024px) / 416);
    --cta-head-gap: calc(48px + 16 * (100vw - 1024px) / 416);
    --cta-title-size: calc(42px + 12 * (100vw - 1024px) / 416);
    --cta-title-lh: calc(52px + 12 * (100vw - 1024px) / 416);
    --cta-sub-size: calc(18px + 6 * (100vw - 1024px) / 416);
    --cta-sub-lh: calc(28px + 8 * (100vw - 1024px) / 416);
    --cta-sub-w: calc(416px + 144 * (100vw - 1024px) / 416);
    --cta-text-gap: calc(24px + 8 * (100vw - 1024px) / 416);
    --cta-chat-gap: 32px;
    --chat-gap: calc(16px + 16 * (100vw - 1024px) / 416);
    --chat-p: calc(32px + 16 * (100vw - 1024px) / 416);
    --chat-r: 32px;
    --chat-left-w: calc(368px + 92 * (100vw - 1024px) / 416);
    --chat-right-w: calc(492px + 168 * (100vw - 1024px) / 416);
    --avatar: calc(76px + 8 * (100vw - 1024px) / 416);
    --avatar-gap: calc(12px + 4 * (100vw - 1024px) / 416);
    --chat-meta-size: calc(16px + 2 * (100vw - 1024px) / 416);
    --chat-meta-lh: calc(24px + 4 * (100vw - 1024px) / 416);
    --chat-meta-gap: 8px;
    --chat-text-size: calc(16px + 2 * (100vw - 1024px) / 416);
    --chat-text-lh: calc(24px + 4 * (100vw - 1024px) / 416);
    --chat-btn-gap: calc(32px + 16 * (100vw - 1024px) / 416);
    --cta-btn-h: calc(64px + 8 * (100vw - 1024px) / 416);
    --cta-btn-px: calc(48px + 16 * (100vw - 1024px) / 416);
    --wordmark-h: calc(364px + 126 * (100vw - 1024px) / 416);
    --cta-chat-offset: calc(244px + 96 * (100vw - 1024px) / 416);
    --cta-btn-text-size: calc(14px + 4 * (100vw - 1024px) / 416);
    --cta-btn-text-lh: calc(20px + 8 * (100vw - 1024px) / 416);
    --tab-text-size: 14px;
    --tab-text-lh: 20px;
    --wordmark-w: calc(949px + 395 * (100vw - 1024px) / 416);
    --doc-pt: calc(48px + 16 * (100vw - 1024px) / 416);
    --doc-pb: calc(96px + 32 * (100vw - 1024px) / 416);
    --doc-w: calc(760px + 100 * (100vw - 1024px) / 416);
    --doc-title-size: calc(42px + 12 * (100vw - 1024px) / 416);
    --doc-title-lh: calc(52px + 12 * (100vw - 1024px) / 416);
    --doc-h-size: calc(24px + 4 * (100vw - 1024px) / 416);
    --doc-h-lh: 36px;
    --doc-text-size: calc(16px + 2 * (100vw - 1024px) / 416);
    --doc-text-lh: calc(24px + 4 * (100vw - 1024px) / 416);
  }
}
@media (min-width: 1440px) {
  :root {
    --page-px: calc(48px + 48 * (100vw - 1440px) / 480);
    --header-px: calc(48px + 48 * (100vw - 1440px) / 480);
    --header-outer-pt: 0;
    --header-pt: 64px;
    --header-pb: 48px;
    --logo-w: 174px;
    --logo-h: 64px;
    --logo-top: 8px;
    --logo-left: 2px;
    --footer-px: calc(48px + 48 * (100vw - 1440px) / 480);
    --footer-pt: 48px;
    --footer-pb: calc(64px + 32 * (100vw - 1440px) / 480);
    --footer-col-gap: 24px;
    --footer-group-gap: 24px;
    --footer-text-size: calc(16px + 2 * (100vw - 1440px) / 480);
    --footer-text-lh: calc(24px + 4 * (100vw - 1440px) / 480);
    --menu-pt: 64px;
    --menu-pb: 32px;
    --hero-pt: calc(64px + 64 * (100vw - 1440px) / 480);
    --hero-pb: calc(16px + 48 * (100vw - 1440px) / 480);
    --hero-text-w: calc(820px + 348 * (100vw - 1440px) / 480);
    --hero-gap: 48px;
    --hero-title-size: calc(68px + 24 * (100vw - 1440px) / 480);
    --hero-title-lh: calc(80px + 32 * (100vw - 1440px) / 480);
    --hero-subtitle-size: calc(28px + 8 * (100vw - 1440px) / 480);
    --hero-subtitle-lh: calc(36px + 12 * (100vw - 1440px) / 480);
    --hero-img-w: calc(524px + 68 * (100vw - 1440px) / 480);
    --order-pt: 64px;
    --order-pb: 64px;
    --order-gap: 24px;
    --order-card-p: calc(32px + 16 * (100vw - 1440px) / 480);
    --order-card-r: 32px;
    --order-aside-w: calc(432px + 128 * (100vw - 1440px) / 480);
    --order-aside-gap: calc(32px + 16 * (100vw - 1440px) / 480);
    --order-badge: calc(84px + 16 * (100vw - 1440px) / 480);
    --order-badge-text-size: 24px;
    --order-badge-text-lh: 36px;
    --order-title-size: calc(28px + 8 * (100vw - 1440px) / 480);
    --order-title-lh: calc(36px + 12 * (100vw - 1440px) / 480);
    --order-desc-size: calc(14px + 4 * (100vw - 1440px) / 480);
    --order-desc-lh: calc(20px + 8 * (100vw - 1440px) / 480);
    --order-text-gap: calc(12px + 4 * (100vw - 1440px) / 480);
    --order-main-gap: 64px;
    --order-inputs-gap: calc(12px + 4 * (100vw - 1440px) / 480);
    --order-label-w: calc(160px + 32 * (100vw - 1440px) / 480);
    --order-label-gap: calc(32px + 32 * (100vw - 1440px) / 480);
    --order-label-size: calc(14px + 4 * (100vw - 1440px) / 480);
    --order-label-lh: calc(20px + 8 * (100vw - 1440px) / 480);
    --field-h: calc(64px + 8 * (100vw - 1440px) / 480);
    --field-p: 8px;
    --field-text-size: calc(14px + 4 * (100vw - 1440px) / 480);
    --field-text-lh: calc(20px + 8 * (100vw - 1440px) / 480);
    --field-btn-h: calc(48px + 8 * (100vw - 1440px) / 480);
    --field-btn-py: calc(8px + 4 * (100vw - 1440px) / 480);
    --btn-h: calc(64px + 8 * (100vw - 1440px) / 480);
    --btn-px: calc(48px + 16 * (100vw - 1440px) / 480);
    --btn-text-size: calc(14px + 4 * (100vw - 1440px) / 480);
    --btn-text-lh: calc(20px + 8 * (100vw - 1440px) / 480);
    --option-h: calc(48px + 8 * (100vw - 1440px) / 480);
    --calendar-w: 436px;
    --calendar-day: calc(32px + 4 * (100vw - 1440px) / 480);
    --calendar-text-size: calc(14px + 4 * (100vw - 1440px) / 480);
    --calendar-text-lh: calc(20px + 8 * (100vw - 1440px) / 480);
    --order-summary-w: calc(240px + 28 * (100vw - 1440px) / 480);
    --about-pt: calc(82px + 4 * (100vw - 1440px) / 480);
    --about-pb: calc(82px + 4 * (100vw - 1440px) / 480);
    --about-gap: 24px;
    --about-num-w: calc(432px + 128 * (100vw - 1440px) / 480);
    --about-num-size: calc(209.9px + 52.9 * (100vw - 1440px) / 480);
    --about-num-ls: calc(-52px + -61 * (100vw - 1440px) / 480);
    --about-num-x: calc(7px + 32 * (100vw - 1440px) / 480);
    --about-text-size: calc(28px + 8 * (100vw - 1440px) / 480);
    --about-text-lh: calc(36px + 12 * (100vw - 1440px) / 480);
    --cases-pt: 0;
    --cases-pb: 64px;
    --cases-gap: 96px;
    --cases-head-gap: 64px;
    --stamp: calc(84px + 16 * (100vw - 1440px) / 480);
    --cases-title-size: calc(54px + 14 * (100vw - 1440px) / 480);
    --cases-title-lh: calc(64px + 16 * (100vw - 1440px) / 480);
    --cases-title-w: calc(800px + 163 * (100vw - 1440px) / 480);
    --cases-list-gap: 24px;
    --case-text-size: 28px;
    --case-text-lh: 36px;
    --case-meta-size: 18px;
    --case-meta-lh: 28px;
    --case-gap: 48px;
    --case-meta-gap: 6px;
    --svc-h: calc(734px + 83 * (100vw - 1440px) / 480);
    --svc-c1-x: calc(48px + 48 * (100vw - 1440px) / 480);
    --svc-c1-y: calc(242px + -33 * (100vw - 1440px) / 480);
    --svc-c1-w: calc(460px + 120 * (100vw - 1440px) / 480);
    --svc-c1-h: calc(460px + 116 * (100vw - 1440px) / 480);
    --svc-c2-x: calc(336px + 164 * (100vw - 1440px) / 480);
    --svc-c2-y: 32px;
    --svc-c2-w: calc(670px + 89 * (100vw - 1440px) / 480);
    --svc-c2-h: calc(670px + 83 * (100vw - 1440px) / 480);
    --svc-c3-x: calc(787px + 155 * (100vw - 1440px) / 480);
    --svc-c3-y: calc(274px + 83 * (100vw - 1440px) / 480);
    --svc-c3-w: calc(603px + 279 * (100vw - 1440px) / 480);
    --svc-c3-h: 428px;
    --svc-btn-x: calc(1047px + 286 * (100vw - 1440px) / 480);
    --svc-btn-y: calc(346px + 67 * (100vw - 1440px) / 480);
    --svc-btn: calc(84px + 16 * (100vw - 1440px) / 480);
    --svc-man-x: calc(188px + 58 * (100vw - 1440px) / 480);
    --svc-man-y: 101px;
    --svc-man-w: 246px;
    --svc-c3-pt: 188px;
    --svc-title-size: calc(36px + 6 * (100vw - 1440px) / 480);
    --svc-title-lh: calc(48px + 8 * (100vw - 1440px) / 480);
    --svc-calc-title-size: calc(36px + 6 * (100vw - 1440px) / 480);
    --svc-calc-title-lh: calc(48px + 8 * (100vw - 1440px) / 480);
    --svc-text-size: 18px;
    --svc-text-lh: 28px;
    --svc-gap: 16px;
    --svc-t1-w: 224px;
    --svc-p1-w: 286px;
    --svc-t2-w: calc(380px + 43 * (100vw - 1440px) / 480);
    --svc-p2-w: calc(264px + 145 * (100vw - 1440px) / 480);
    --svc-t3-w: calc(386px + 20 * (100vw - 1440px) / 480);
    --svc-p3-w: calc(354px + 108 * (100vw - 1440px) / 480);
    --svc-c1-pt: calc(128px + 32 * (100vw - 1440px) / 480);
    --hero-img-h: calc(556px + 196 * (100vw - 1440px) / 480);
    --calendar-p: calc(16px + 8 * (100vw - 1440px) / 480);
    --calendar-head-gap: calc(24px + 8 * (100vw - 1440px) / 480);
    --calendar-nav: calc(48px + 8 * (100vw - 1440px) / 480);
    --calendar-row-gap: 8px;
    --calendar-actions-gap: calc(16px + 16 * (100vw - 1440px) / 480);
    --calendar-action-h: calc(48px + 8 * (100vw - 1440px) / 480);
    --calendar-action-px: calc(8px + -4 * (100vw - 1440px) / 480);
    --header-nav-size: calc(16px + 2 * (100vw - 1440px) / 480);
    --header-nav-lh: calc(24px + 4 * (100vw - 1440px) / 480);
    --textarea-h: calc(88px + 56 * (100vw - 1440px) / 480);
    --order-consent-size: calc(12px + 2 * (100vw - 1440px) / 480);
    --order-consent-lh: 20px;
    --tag-p: calc(8px + 4 * (100vw - 1440px) / 480);
    --tag-text-size: calc(14px + 2 * (100vw - 1440px) / 480);
    --tag-text-lh: calc(20px + 4 * (100vw - 1440px) / 480);
    --drop-h: calc(104px + 56 * (100vw - 1440px) / 480);
    --upload-gap: calc(32px + 32 * (100vw - 1440px) / 480);
    --adv-pt: 64px;
    --adv-pb: 64px;
    --adv-gap: 96px;
    --adv-title-size: 68px;
    --adv-title-lh: 80px;
    --adv-title-w: 963px;
    --adv-sub-size: 18px;
    --adv-sub-lh: 28px;
    --adv-sub-w: 840px;
    --adv-text-gap: 32px;
    --adv-col-gap: 24px;
    --adv-item-gap: 48px;
    --adv-item-title-size: 28px;
    --adv-item-title-lh: 36px;
    --adv-item-text-size: 18px;
    --adv-item-text-lh: 28px;
    --adv-item-text-gap: 32px;
    --cta-pt: 64px;
    --cta-left-w: calc(560px + 168 * (100vw - 1440px) / 480);
    --cta-right-w: calc(760px + 216 * (100vw - 1440px) / 480);
    --cta-head-gap: 64px;
    --cta-title-size: calc(54px + 14 * (100vw - 1440px) / 480);
    --cta-title-lh: calc(64px + 16 * (100vw - 1440px) / 480);
    --cta-sub-size: calc(24px + 4 * (100vw - 1440px) / 480);
    --cta-sub-lh: 36px;
    --cta-sub-w: calc(560px + 40 * (100vw - 1440px) / 480);
    --cta-text-gap: 32px;
    --cta-chat-gap: 32px;
    --chat-gap: 32px;
    --chat-p: 48px;
    --chat-r: 32px;
    --chat-left-w: calc(460px + 100 * (100vw - 1440px) / 480);
    --chat-right-w: calc(660px + 200 * (100vw - 1440px) / 480);
    --avatar: calc(84px + 16 * (100vw - 1440px) / 480);
    --avatar-gap: 16px;
    --chat-meta-size: 18px;
    --chat-meta-lh: 28px;
    --chat-meta-gap: calc(8px + 4 * (100vw - 1440px) / 480);
    --chat-text-size: calc(18px + 6 * (100vw - 1440px) / 480);
    --chat-text-lh: calc(28px + 8 * (100vw - 1440px) / 480);
    --chat-btn-gap: 48px;
    --cta-btn-h: 72px;
    --cta-btn-px: 64px;
    --wordmark-h: calc(490px + 178 * (100vw - 1440px) / 480);
    --cta-chat-offset: 340px;
    --cta-btn-text-size: 18px;
    --cta-btn-text-lh: 28px;
    --tab-text-size: calc(14px + 4 * (100vw - 1440px) / 480);
    --tab-text-lh: calc(20px + 8 * (100vw - 1440px) / 480);
    --wordmark-w: calc(1344px + 382 * (100vw - 1440px) / 480);
    --doc-pt: 64px;
    --doc-pb: 128px;
    --doc-w: calc(860px + 100 * (100vw - 1440px) / 480);
    --doc-title-size: 54px;
    --doc-title-lh: 64px;
    --doc-h-size: 28px;
    --doc-h-lh: 36px;
    --doc-text-size: 18px;
    --doc-text-lh: 28px;
  }
}
@media (min-width: 1920px) {
  :root {
    --page-px: 96px;
    --header-px: 96px;
    --header-outer-pt: 0;
    --header-pt: 64px;
    --header-pb: 48px;
    --logo-w: 174px;
    --logo-h: 64px;
    --logo-top: 8px;
    --logo-left: 2px;
    --footer-px: 96px;
    --footer-pt: 48px;
    --footer-pb: 96px;
    --footer-col-gap: 24px;
    --footer-group-gap: 24px;
    --footer-text-size: 18px;
    --footer-text-lh: 28px;
    --menu-pt: 64px;
    --menu-pb: 32px;
    --hero-pt: 128px;
    --hero-pb: 64px;
    --hero-text-w: 1168px;
    --hero-gap: 48px;
    --hero-title-size: 92px;
    --hero-title-lh: 112px;
    --hero-subtitle-size: 36px;
    --hero-subtitle-lh: 48px;
    --hero-img-w: 592px;
    --order-pt: 64px;
    --order-pb: 64px;
    --order-gap: 24px;
    --order-card-p: 48px;
    --order-card-r: 32px;
    --order-aside-w: 560px;
    --order-aside-gap: 48px;
    --order-badge: 100px;
    --order-badge-text-size: 24px;
    --order-badge-text-lh: 36px;
    --order-title-size: 36px;
    --order-title-lh: 48px;
    --order-desc-size: 18px;
    --order-desc-lh: 28px;
    --order-text-gap: 16px;
    --order-main-gap: 64px;
    --order-inputs-gap: 16px;
    --order-label-w: 192px;
    --order-label-gap: 64px;
    --order-label-size: 18px;
    --order-label-lh: 28px;
    --field-h: 72px;
    --field-p: 8px;
    --field-text-size: 18px;
    --field-text-lh: 28px;
    --field-btn-h: 56px;
    --field-btn-py: 12px;
    --btn-h: 72px;
    --btn-px: 64px;
    --btn-text-size: 18px;
    --btn-text-lh: 28px;
    --option-h: 56px;
    --calendar-w: 436px;
    --calendar-day: 36px;
    --calendar-text-size: 18px;
    --calendar-text-lh: 28px;
    --order-summary-w: 268px;
    --about-pt: 86px;
    --about-pb: 86px;
    --about-gap: 24px;
    --about-num-w: 560px;
    --about-num-size: 262.8px;
    --about-num-ls: -113px;
    --about-num-x: 39px;
    --about-text-size: 36px;
    --about-text-lh: 48px;
    --cases-pt: 0;
    --cases-pb: 64px;
    --cases-gap: 96px;
    --cases-head-gap: 64px;
    --stamp: 100px;
    --cases-title-size: 68px;
    --cases-title-lh: 80px;
    --cases-title-w: 963px;
    --cases-list-gap: 24px;
    --case-text-size: 28px;
    --case-text-lh: 36px;
    --case-meta-size: 18px;
    --case-meta-lh: 28px;
    --case-gap: 48px;
    --case-meta-gap: 6px;
    --svc-h: 817px;
    --svc-c1-x: 96px;
    --svc-c1-y: 209px;
    --svc-c1-w: 580px;
    --svc-c1-h: 576px;
    --svc-c2-x: 500px;
    --svc-c2-y: 32px;
    --svc-c2-w: 759px;
    --svc-c2-h: 753px;
    --svc-c3-x: 942px;
    --svc-c3-y: 357px;
    --svc-c3-w: 882px;
    --svc-c3-h: 428px;
    --svc-btn-x: 1333px;
    --svc-btn-y: 413px;
    --svc-btn: 100px;
    --svc-man-x: 246px;
    --svc-man-y: 101px;
    --svc-man-w: 246px;
    --svc-c3-pt: 188px;
    --svc-title-size: 42px;
    --svc-title-lh: 56px;
    --svc-calc-title-size: 42px;
    --svc-calc-title-lh: 56px;
    --svc-text-size: 18px;
    --svc-text-lh: 28px;
    --svc-gap: 16px;
    --svc-t1-w: 224px;
    --svc-p1-w: 286px;
    --svc-t2-w: 423px;
    --svc-p2-w: 409px;
    --svc-t3-w: 406px;
    --svc-p3-w: 462px;
    --svc-c1-pt: 160px;
    --hero-img-h: 752px;
    --calendar-p: 24px;
    --calendar-head-gap: 32px;
    --calendar-nav: 56px;
    --calendar-row-gap: 8px;
    --calendar-actions-gap: 32px;
    --calendar-action-h: 56px;
    --calendar-action-px: 4px;
    --header-nav-size: 18px;
    --header-nav-lh: 28px;
    --textarea-h: 144px;
    --order-consent-size: 14px;
    --order-consent-lh: 20px;
    --tag-p: 12px;
    --tag-text-size: 16px;
    --tag-text-lh: 24px;
    --drop-h: 160px;
    --upload-gap: 64px;
    --adv-pt: 64px;
    --adv-pb: 64px;
    --adv-gap: 96px;
    --adv-title-size: 68px;
    --adv-title-lh: 80px;
    --adv-title-w: 963px;
    --adv-sub-size: 18px;
    --adv-sub-lh: 28px;
    --adv-sub-w: 840px;
    --adv-text-gap: 32px;
    --adv-col-gap: 24px;
    --adv-item-gap: 48px;
    --adv-item-title-size: 28px;
    --adv-item-title-lh: 36px;
    --adv-item-text-size: 18px;
    --adv-item-text-lh: 28px;
    --adv-item-text-gap: 32px;
    --cta-pt: 64px;
    --cta-left-w: 728px;
    --cta-right-w: 976px;
    --cta-head-gap: 64px;
    --cta-title-size: 68px;
    --cta-title-lh: 80px;
    --cta-sub-size: 28px;
    --cta-sub-lh: 36px;
    --cta-sub-w: 600px;
    --cta-text-gap: 32px;
    --cta-chat-gap: 32px;
    --chat-gap: 32px;
    --chat-p: 48px;
    --chat-r: 32px;
    --chat-left-w: 560px;
    --chat-right-w: 860px;
    --avatar: 100px;
    --avatar-gap: 16px;
    --chat-meta-size: 18px;
    --chat-meta-lh: 28px;
    --chat-meta-gap: 12px;
    --chat-text-size: 24px;
    --chat-text-lh: 36px;
    --chat-btn-gap: 48px;
    --cta-btn-h: 72px;
    --cta-btn-px: 64px;
    --wordmark-h: 668px;
    --cta-chat-offset: 340px;
    --cta-btn-text-size: 18px;
    --cta-btn-text-lh: 28px;
    --tab-text-size: 18px;
    --tab-text-lh: 28px;
    --wordmark-w: 1726px;
    --doc-pt: 64px;
    --doc-pb: 128px;
    --doc-w: 960px;
    --doc-title-size: 54px;
    --doc-title-lh: 64px;
    --doc-h-size: 28px;
    --doc-h-lh: 36px;
    --doc-text-size: 18px;
    --doc-text-lh: 28px;
  }
}

/* settings.css */
@font-face {
  font-family: "Apoc LC";
  src: url("/fonts/apoc-lc-dark.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Вариативный: wght 400–1000, wdth 100–200%.
   Std Rg = 400/100%, Std Md = 500/100%, Std Bd = 700/100%, uWd Ult = 1000/200% */
@font-face {
  font-family: "Martian Grotesk";
  src: url("/fonts/martian-grotesk-vf.woff2") format("woff2-variations");
  font-weight: 400 1000;
  font-stretch: 100% 200%;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-title: "Apoc LC", Georgia, serif;
  --font-base: "Martian Grotesk", system-ui, sans-serif;

  --page-max: 1920px;
}

/* base.css */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Пока открыто меню, страница под ним не скроллится */
html:has(.mx__menu[open]) {
  overflow: hidden;
}

body {
  min-width: 320px;
  background: var(--bg-muted);
  color: var(--text-default);
  font-family: var(--font-base);
  font-size: var(--body-medium-size);
  line-height: var(--body-medium-lh);
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* Этаж страницы (IDS: floor). Контент ограничен 1920 и центрирован */
.mx__wrapper {
  max-width: var(--page-max);
  margin-inline: auto;
}

.mx__nowrap {
  white-space: nowrap;
}

.mx__visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* components/link.css */
/* Ссылка (Фигма: selector → link, 24:119).
   Состояния: default text/default → hover text/muted → press text/default; inactive text/static-gray.
   Подчёркивание: отступ 25%, толщина 2.5% от кегля */
.mx__link,
.mx__doc-body a {
  color: var(--text-default);
  text-decoration-line: underline;
  text-decoration-thickness: max(1px, 0.025em);
  text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
  text-underline-offset: 0.25em;
  text-decoration-skip-ink: auto;
  cursor: pointer;
  transition: color 0.2s;
}

@media (hover: hover) {
  .mx__link:hover,
  .mx__doc-body a:hover {
    color: var(--text-muted);
  }
}

.mx__link:active,
.mx__doc-body a:active {
  color: var(--text-default);
}

.mx__link.is-inactive {
  color: var(--text-static-gray);
  cursor: default;
  pointer-events: none;
}

/* components/logo.css */
/* Логотип mixline (Chaumont Script в кривых) */
.mx__logo {
  display: block;
  flex: none;
  height: var(--logo-h);
  padding-top: var(--logo-top);
  padding-left: var(--logo-left);
  color: var(--text-default);
}

.mx__logo svg {
  width: var(--logo-w);
  height: auto;
}

/* components/header.css */
/* Шапка (Фигма: organisms → header) */
.mx__header {
  padding: var(--header-outer-pt) var(--header-px) 0;
}

.mx__header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-600);
  padding: var(--header-pt) 0 var(--header-pb);
  border-bottom: 2px solid var(--border-strong);
}

.mx__header-nav {
  display: none;
  gap: var(--space-1200);
  font-size: var(--header-nav-size);
  line-height: var(--header-nav-lh);
}

/* Кнопка меню: «+», в открытом меню поворачивается в «×» (Фигма: escape button) */
.mx__menu-button {
  position: relative;
  flex: none;
  width: 42px;
  height: 42px;
  color: var(--text-default);
}

.mx__menu-button::before,
.mx__menu-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 42px;
  height: 4px;
  margin-top: -2px;
  background: currentColor;
  transition: transform 0.3s ease;
}

.mx__menu-button::after {
  transform: rotate(90deg);
}

.mx__menu-button.is-close::before {
  transform: rotate(45deg);
}

.mx__menu-button.is-close::after {
  transform: rotate(135deg);
}

/* Ссылки в шапке — с 1024; меньше — «+» и меню на весь экран */
@media (min-width: 1024px) {
  .mx__header-nav {
    display: flex;
  }

  .mx__header .mx__menu-button {
    display: none;
  }
}

/* components/footer.css */
/* Подвал (Фигма: organisms → footer). На 744+ три равные колонки, третья пустая */
.mx__footer {
  display: grid;
  grid-template-columns: minmax(0, 224px);
  column-gap: var(--footer-col-gap);
  row-gap: var(--footer-group-gap);
  padding: var(--footer-pt) var(--footer-px) var(--footer-pb);
  font-size: var(--footer-text-size);
  line-height: var(--footer-text-lh);
  color: var(--text-default);
}

.mx__footer p,
.mx__footer ul {
  padding: 0;
  list-style: none;
}

.mx__footer-line {
  display: block;
}

/* Адрес на узких экранах — одной строкой через запятую */
.mx__footer-address .mx__footer-line {
  display: inline;
}

.mx__footer-address .mx__footer-line + .mx__footer-line::before {
  content: ", ";
}

/* Политика прижата к низу блока высотой в две строки — на одной линии с телефоном */
.mx__footer-politics {
  display: flex;
  align-items: flex-end;
  min-height: calc(2 * var(--footer-text-lh));
}

.mx__footer-contacts li {
  display: block;
}

/* Почта и телефон — зона нажатия не меньше 24 px по высоте, вид не меняется */
.mx__footer-contacts .mx__link {
  display: inline-block;
  padding-block: 4px;
  margin-block: -4px;
}

@media (min-width: 744px) {
  .mx__footer {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "address company ."
      "contacts politics .";
  }

  .mx__footer-address { grid-area: address; }
  .mx__footer-contacts { grid-area: contacts; }
  .mx__footer-company { grid-area: company; }
  .mx__footer-politics { grid-area: politics; }
}

@media (min-width: 1024px) {
  .mx__footer-address .mx__footer-line {
    display: block;
  }

  .mx__footer-address .mx__footer-line + .mx__footer-line::before {
    content: none;
  }
}

/* Подвал внутри оранжевого меню — белый */
.mx__footer.Inverse,
.mx__footer.Inverse .mx__link {
  color: var(--text-static-white);
}

@media (hover: hover) {
  .mx__footer.Inverse .mx__link:hover {
    opacity: 0.7;
  }
}

/* components/menu.css */
/* Мобильное меню на весь экран (Фигма: 375 → menu, 333:29244). Одинаковое в обеих темах */
.mx__menu {
  inset: 0;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--text-static-white);
  background:
    url("/img/menu-bg.svg") center / 400% 200% no-repeat,
    linear-gradient(var(--orange-400), var(--orange-500));
  overflow-y: auto;
  scrollbar-width: none; /* меню помещается в экран — полоса прокрутки не нужна */
}

.mx__menu[open] {
  display: flex;
  flex-direction: column;
}

/* Фон меню непрозрачен с первого кадра — иначе Safari, пока меню проявляется, видит под ним
   серую страницу и на миг красит полосы под часами и под панелью в серый. Проявляется только содержимое */
.mx__menu[open] > * {
  animation: mx-menu-in 0.25s ease;
}

.mx__menu::-webkit-scrollbar {
  display: none;
}

/* Внутри flex-колонки этажи растягиваем на всю ширину (иначе margin: auto их сжимает) */
.mx__menu > * {
  width: 100%;
}

.mx__menu:focus {
  outline: none;
}

.mx__menu::backdrop {
  background: transparent;
}


/* Меню одинаковое в обеих темах — линия как border/muted светлой темы */
.mx__menu .mx__header-inner {
  border-bottom-color: var(--gray-50);
}

.mx__menu .mx__logo,
.mx__menu .mx__menu-button {
  color: var(--text-static-white);
}

.mx__menu-nav {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  padding: var(--menu-pt) var(--header-px) var(--menu-pb);
}

/* Кнопки меню (Фигма: menu button, style=stoke / fill) */
.mx__menu-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: var(--space-400) var(--space-1200);
  border: 2px solid var(--text-static-white);
  border-radius: 16px;
  color: var(--text-static-white);
  font-size: var(--body-extra-small-size);
  line-height: var(--body-extra-small-lh);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.mx__menu-item.Fill {
  background: var(--text-static-white);
}

.mx__menu-item.Fill span {
  background: linear-gradient(var(--orange-400), var(--orange-500));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (hover: hover) {
  .mx__menu-item:hover {
    background: var(--text-static-white);
    color: var(--text-static-black);
  }

  .mx__menu-item.Fill:hover {
    background: var(--button-static-black);
    border-color: var(--button-static-black);
  }

  .mx__menu-item.Fill:hover span {
    background: none;
    color: var(--text-static-white);
  }
}

@keyframes mx-menu-in {
  from { opacity: 0; }
}

/* components/hero.css */
/* Первый экран (Фигма: hero section, 333:28654) */
.mx__hero {
  position: relative;
  padding: var(--hero-pt) var(--page-px) var(--hero-pb);
}

.mx__hero-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--hero-gap);
  max-width: var(--hero-text-w);
}

.mx__hero-title {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: var(--hero-title-size);
  line-height: var(--hero-title-lh);
}

.mx__hero-subtitle {
  font-size: var(--hero-subtitle-size);
  line-height: var(--hero-subtitle-lh);
}

/* Иллюстрация прижата к правому нижнему углу и может заходить под текст */
.mx__hero-img {
  display: none;
  position: absolute;
  right: var(--page-px);
  bottom: var(--hero-pb);
  width: var(--hero-img-w);
}

.mx__hero-stars {
  display: none;
  aspect-ratio: 592 / 128;
  margin-bottom: -2.7%;
}

/* В Фигме контейнер иллюстрации отзеркален по горизонтали */
.mx__hero-illustration {
  position: relative;
  aspect-ratio: 592 / 640;
  transform: scaleX(-1);
}

.mx__hero-part {
  position: absolute;
}

.mx__hero-img svg {
  width: 100%;
  height: 100%;
}

.mx__br-tablet {
  display: none;
}

@media (min-width: 744px) {
  .mx__hero-img {
    display: block;
  }

  .mx__br-tablet {
    display: inline;
  }
}

/* Звёздочки с 1440 — как на 1920: над дымом, с перекрытием 16px. Чтобы картинка
   не стала выше текста и не залезла на шапку, на 1440–1919 она пропорционально
   ужата по высоте блока текста (роль hero-img-h) */
@media (min-width: 1440px) {
  .mx__hero-img {
    width: auto;
    height: var(--hero-img-h);
    aspect-ratio: 592 / 752;
  }

  .mx__hero-stars {
    display: block;
  }
}

/* components/controls.css */
/* Элементы форм (Фигма: atoms / molecules). Размеры — через роли btn-*, field-*, option-*, calendar-* */

/* ── Кнопка (button: default / stroke; active · hover · press · inactive) ── */
.mx__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h);
  padding: 0 var(--btn-px);
  border: 2px solid transparent;
  border-radius: 16px;
  background: var(--button-static-black);
  color: var(--text-static-white);
  font-size: var(--btn-text-size);
  line-height: var(--btn-text-lh);
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

@media (hover: hover) {
  .mx__button:hover {
    background: var(--button-hover);
    color: var(--text-static-white);
  }
}

.mx__button:active {
  background: var(--button-static-black);
}

.mx__button.Stroke {
  background: transparent;
  border-color: var(--border-default);
  color: var(--text-default);
}

@media (hover: hover) {
  .mx__button.Stroke:hover {
    background: var(--button-hover);
    border-color: var(--button-hover);
    color: var(--text-static-white);
  }
}

.mx__button.Stroke:active {
  background: var(--button-static-black);
  color: var(--text-static-white);
}

.mx__button[aria-disabled="true"] {
  background: var(--button-inactive);
  border-color: transparent;
  color: var(--text-static-gray);
  cursor: default;
}

.mx__button.is-loading {
  cursor: progress;
  opacity: 0.6;
}

/* ── Табы услуги (selector → list / tab) ── */
.mx__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 16px;
  background: var(--bg-muted);
}

.mx__tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h);
  padding: 0 var(--space-400);
  border-radius: 16px;
  color: var(--text-muted);
  font-size: var(--tab-text-size); /* на мобильной 12 */
  line-height: var(--tab-text-lh);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.mx__tab input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.mx__tab:has(input:checked),
.mx__tab.is-active {
  background: var(--button-static-black);
  color: var(--text-static-white);
}

.mx__tab:has(input:focus-visible) {
  outline: 2px solid var(--text-default);
  outline-offset: 2px;
}

/* ── Поле (field: default · hover · active) ── */
.mx__field {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-200);
  min-height: var(--field-h);
  padding: var(--field-p) var(--field-p) var(--field-p) var(--space-400);
  border-radius: 16px;
  background: var(--bg-muted);
  color: var(--text-default);
  font-size: var(--field-text-size);
  line-height: var(--field-text-lh);
  transition: background-color 0.2s, box-shadow 0.2s;
}

/* hover и active в макете — только смена цвета на bg/strong (обводка в Фигме выключена) */
@media (hover: hover) {
  .mx__field:hover {
    background: var(--bg-strong);
  }
}

.mx__field:focus-within,
.mx__field.is-open {
  background: var(--bg-strong);
}

/* Незаполненное обязательное поле: фон red/50 и подсказка внутри поля (order.js → markField) */
.mx__field.is-invalid {
  background: var(--red-50);
}

/* Подсказка — в одну строку: order.js подбирает формулировку, которая помещается (fitHint) */
.mx__field-hint {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text-neutral-subtle); /* как плейсхолдер обычного поля — об ошибке говорит только фон red/50 */
  font-size: inherit;
  line-height: inherit;
  text-align: left;
  cursor: text;
}

/* Поле с ошибкой при наведении и нажатии ведёт себя как обычное: цвет bg/strong.
   При нажатии (фокус, открытый список) подсказка прячется и освобождает место */
@media (hover: hover) {
  .mx__field.is-invalid:hover {
    background: var(--bg-strong);
  }
}

.mx__field.is-invalid:focus-within,
.mx__field.is-invalid.is-open {
  background: var(--bg-strong);
}

.mx__field.is-invalid:focus-within .mx__field-hint,
.mx__field.is-invalid.is-open .mx__field-hint {
  display: none;
}

.mx__field.is-invalid:not(:focus-within) .mx__field-input::placeholder {
  color: transparent;
}

/* Введённый текст вне фокуса может ужаться (обрежется), подсказке — место минимум под «Выберите дату» */
.mx__field.is-invalid:not(:focus-within) .mx__field-input {
  flex: 0 1 auto;
  min-width: 3ch;
}

.mx__field.is-invalid:not(:focus-within) .mx__field-input:placeholder-shown {
  min-width: 0;
}

.mx__field.is-invalid .mx__field-input + .mx__field-hint {
  min-width: 9em;
}

/* В фокусе — обычная ширина (перебивает ширину по тексту из order.js) */
.mx__field.is-invalid:focus-within .mx__field-input {
  flex: 1 1 auto;
  width: auto !important;
}



.mx__select-trigger .mx__field-hint {
  cursor: pointer;
}

.mx__field.is-invalid:not(:focus-within):not(.is-open) .mx__select-value.is-placeholder {
  display: none;
}

.mx__field-unit {
  flex: none;
}

.mx__field-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-100) 0;
  border: 0;
  background: transparent;
  color: var(--text-default);
  font: inherit;
  outline: none;
}

.mx__field-input::placeholder {
  color: var(--text-neutral-subtle);
  opacity: 1;
}

.mx__field:focus-within .mx__field-input::placeholder {
  color: var(--text-static-gray);
}

.mx__field.Textarea {
  align-items: stretch;
  height: var(--textarea-h);
}

.mx__field.Textarea .mx__field-input {
  resize: none;
  padding-top: var(--space-200);
}

/* Нативные контролы — для работы без JS. Со скриптом скрыты, их значения пишет order.js */
.is-enhanced .mx__native {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Триггер выпадающего списка на всю ширину поля + шеврон (chevron button) */
.mx__select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1 1 auto;
  min-width: 0;
  gap: var(--space-200);
  text-align: left;
}

/* Фокус с клавиатуры — скруглённой рамкой по контуру поля, а не прямоугольником внутри */
.mx__select-trigger:focus-visible,
.mx__field-input:focus-visible {
  outline: none;
}

.mx__field:has(.mx__select-trigger:focus-visible) {
  box-shadow: 0 0 0 2px var(--text-default);
}

.mx__select-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mx__select-value.is-placeholder {
  color: var(--text-neutral-subtle);
}

.mx__chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--field-btn-h);
  height: var(--field-btn-h);
  color: var(--text-default);
}

.mx__chevron svg,
.mx__pill svg {
  width: 32px;
  height: 32px;
  transition: transform 0.2s;
}

.is-open > .mx__select-trigger .mx__chevron svg,
.is-open > .mx__pill .mx__pill-chevron {
  transform: rotate(180deg);
}

/* Чёрная кнопка внутри поля (dropdown button) */
.mx__field-pill {
  flex: none;
  display: flex;
}

.mx__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-200);
  height: var(--field-btn-h);
  padding: var(--field-btn-py) var(--space-400) var(--field-btn-py) var(--space-600);
  border-radius: 12px;
  background: var(--button-static-black);
  color: var(--text-static-white);
  white-space: nowrap;
  transition: background-color 0.2s;
}

@media (hover: hover) {
  .mx__pill:hover {
    background: var(--button-hover);
  }
}

/* В тёмной теме button/hover совпадает с наведённым полем (bg/strong) — кнопка сливалась; берём светлее */
@media (hover: hover) and (prefers-color-scheme: dark) {
  .mx__pill:hover {
    background: var(--gray-700);
  }
}

.mx__pill .mx__icon-24 {
  width: 32px;
  height: 32px;
  padding: 4px;
}

.mx__pill-short {
  display: none;
}

@media (max-width: 743.98px) {
  .mx__pill-long {
    display: none;
  }

  .mx__pill-short {
    display: inline;
  }
}

/* ── Выпадающий список. Тёмный в обеих темах, как календарь (решение Димы):
      в макете он светлый (bg/muted) и в тёмной теме сливался с фоном ── */
.mx__popover {
  position: absolute;
  z-index: 20;
  top: calc(100% + var(--space-200));
  left: 0;
  right: 0;
}

.mx__options {
  display: grid;
  grid-auto-rows: 1fr; /* если список растянут (order.js → coverFieldBelow), пункты делят высоту поровну */
  gap: var(--space-200);
  padding: var(--space-200);
  border-radius: 16px;
  background: var(--gray-950);
  list-style: none;
}

.mx__options:focus {
  outline: none;
}

.mx__option {
  display: flex;
  align-items: center;
  min-height: var(--option-h);
  padding: var(--space-300) var(--space-400);
  border-radius: 12px;
  color: var(--gray-300);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.mx__option:hover,
.mx__option.is-active {
  background: color-mix(in srgb, var(--gray-0) 12%, transparent);
  color: var(--gray-0);
}

.mx__option[aria-selected="true"] {
  background: var(--gray-0);
  color: var(--gray-950);
}

/* ── Календарь (calendar). Тёмный в обеих темах: цвета — значения светлой темы,
      заданы примитивами, чтобы не переключались ── */
.mx__calendar {
  position: absolute;
  z-index: 20;
  top: calc(100% + var(--space-200));
  right: 0;
  width: min(var(--calendar-w), calc(100vw - 2 * var(--page-px)));
  padding: var(--calendar-p) var(--calendar-p) var(--space-150);
  border-radius: 16px;
  background: var(--gray-950);
  color: var(--gray-300);
  font-size: var(--calendar-text-size);
  line-height: var(--calendar-text-lh);
  white-space: normal;
}

.mx__calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: var(--space-150);
  margin-bottom: var(--calendar-head-gap);
}

.mx__calendar-nav {
  display: flex;
  gap: var(--space-200);
}

.mx__calendar-nav button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--calendar-nav);
  height: var(--calendar-nav);
  border-radius: 12px;
  color: var(--gray-300);
}

.mx__calendar-nav svg {
  width: 32px;
  height: 32px;
}

.mx__calendar-nav button:disabled {
  opacity: 0.3;
  cursor: default;
}

.mx__calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: var(--calendar-row-gap);
  text-align: center;
}

.mx__calendar-weekday {
  height: var(--calendar-day);
  line-height: var(--calendar-day);
}

.mx__calendar-day {
  position: relative;
  height: var(--calendar-day);
  color: inherit;
}

.mx__calendar-day span {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--calendar-day);
  height: var(--calendar-day);
  border-radius: 20px;
}

@media (hover: hover) {
  .mx__calendar-day:not(:disabled):hover span {
    box-shadow: inset 0 0 0 1px currentColor;
  }
}

.mx__calendar-day:focus-visible {
  outline: none;
}

.mx__calendar-day:focus-visible span {
  outline: 2px solid currentColor;
  outline-offset: 1px;
}

.mx__calendar-day.is-outside {
  opacity: 0.4;
}

.mx__calendar-day:disabled {
  opacity: 0.25;
  cursor: default;
}

/* Сегодня — только обводка, без заливки (решение Димы) */
.mx__calendar-day.is-today span {
  box-shadow: inset 0 0 0 1px var(--gray-300);
}

/* Диапазон: полоса между началом и концом */
.mx__calendar-day.is-in-range::before,
.mx__calendar-day.is-start.has-range::before,
.mx__calendar-day.is-end.has-range::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--gray-0) 18%, transparent);
}

.mx__calendar-day.is-start.has-range::before {
  left: 50%;
}

.mx__calendar-day.is-end.has-range::before {
  right: 50%;
}

.mx__calendar-day.is-start span,
.mx__calendar-day.is-end span {
  background: var(--gray-0);
  color: var(--gray-950);
}

/* Нижняя часть с «Сбросить» / «Сохранить» (Фигма: actions — линия, 6px, кнопки bg free) */
.mx__calendar-actions {
  display: flex;
  justify-content: space-between;
  margin-top: var(--calendar-actions-gap);
  padding-top: var(--space-150);
  border-top: 1px solid color-mix(in srgb, var(--gray-0) 15%, transparent);
}

.mx__calendar-actions button {
  display: flex;
  align-items: center;
  height: var(--calendar-action-h);
  padding: 0 var(--calendar-action-px);
  border-radius: 16px;
}

/* На 1920 (size l) в макете линии нет, кнопки отделены отступом 16 */
@media (min-width: 1920px) {
  .mx__calendar-actions {
    padding-top: var(--space-400);
    padding-bottom: var(--space-200);
    border-top: 0;
  }
}

.mx__calendar-reset {
  color: var(--gray-400);
}

.mx__calendar-save {
  color: var(--gray-300);
}

@media (hover: hover) {
  .mx__calendar-save:hover,
  .mx__calendar-reset:hover {
    color: var(--gray-0);
  }
}

/* ── Тег (tag) ── */
.mx__tag {
  flex: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--space-200);
  padding: var(--tag-p);
  border-radius: 12px;
  background: var(--bg-muted);
  font-size: var(--tag-text-size);
  line-height: var(--tag-text-lh);
}

.mx__tag svg {
  flex: none;
  width: 20px;
  height: 20px;
}

.mx__tag.Small {
  padding: var(--space-150) var(--space-200);
  font-size: var(--body-extra-small-size);
  line-height: var(--body-extra-small-lh);
  color: var(--text-neutral-subtle);
}

/* Ловушка для ботов — поле, которое человек не видит */
.mx__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.mx__br-desktop,
.mx__br-wide {
  display: none;
}

@media (min-width: 1440px) {
  .mx__br-wide {
    display: inline;
  }
}

@media (min-width: 1024px) {
  .mx__br-desktop {
    display: inline;
  }
}

/* components/order.css */
/* Форма заявки (Фигма: form step cleaning, 268:7247).
   < 744: карточки стопкой (описание, табы, поля) · 744–1439: шапка шага одной карточкой над полями ·
   1440+: шапка слева фиксированной ширины, поля справа */
.mx__order {
  padding: var(--order-pt) var(--page-px) var(--order-pb);
  scroll-margin-top: var(--space-400);
}

.mx__order-panel {
  display: flex;
  flex-direction: column;
  gap: var(--order-gap);
}

/* С JS виден только текущий шаг */
.is-enhanced .mx__order-panel:not(.is-current) {
  display: none;
}

.mx__order-card {
  padding: var(--order-card-p);
  border-radius: var(--order-card-r);
  background: var(--bg-default);
}

.mx__order-aside {
  display: flex;
  flex-direction: column;
  gap: var(--order-gap);
}

.mx__order-intro {
  display: flex;
  flex-direction: column;
  gap: var(--order-aside-gap);
}

.mx__order-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--order-badge);
  height: var(--order-badge);
  border-radius: 50%;
  background: var(--bg-muted);
  color: var(--text-static-gray);
  font-size: var(--order-badge-text-size);
  line-height: var(--order-badge-text-lh);
}

.mx__order-badge.Stamp {
  background: var(--text-default);
  color: var(--text-inverse);
}

.mx__order-badge.Stamp svg {
  width: 40%;
  height: 40%;
}

.mx__order-text {
  display: flex;
  flex-direction: column;
  gap: var(--order-text-gap);
}

/* На мобильном описание шага идёт перед табами, на 1440+ — табы сверху */
.mx__order-aside.Tabs .mx__order-tabs-card {
  order: 2;
}

.mx__order-title {
  font-size: var(--order-title-size);
  line-height: var(--order-title-lh);
  font-weight: 400;
}

/* Фокус на заголовок ставится программно при смене шага — рамка не нужна */
.mx__order-title:focus {
  outline: none;
}

.mx__order-desc {
  font-size: var(--order-desc-size);
  line-height: var(--order-desc-lh);
}

/* У первого шага описание только на десктопе (на планшете и мобильном в макете его нет) */
[data-step="1"] .mx__order-desc {
  display: none;
}

.mx__order-main {
  display: flex;
  flex-direction: column;
  gap: var(--order-main-gap);
}

.mx__order-inputs {
  display: flex;
  flex-direction: column;
  gap: var(--order-inputs-gap);
  min-width: 0;
  padding: 0;
  border: 0;
}

.mx__order-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
}

.mx__order-label {
  font-size: var(--order-label-size);
  line-height: var(--order-label-lh);
}

.mx__order-footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-400);
}

.mx__order-footer .mx__button {
  width: 100%;
}

.mx__order-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-100);
}

.mx__order-skip,
.mx__order-consent {
  align-self: center;
  text-align: center;
}

.mx__order-consent {
  max-width: 24em;
  color: var(--text-static-gray);
  font-size: var(--order-consent-size);
  line-height: var(--order-consent-lh);
}

.mx__order-consent .mx__link {
  color: var(--text-static-gray);
}

.mx__order-skip {
  font-size: var(--field-text-size);
  line-height: var(--field-text-lh);
}

.mx__order-error {
  color: var(--red-500);
  font-size: var(--body-extra-small-size);
  line-height: var(--body-extra-small-lh);
}

/* ── Шаг 4: итог. На мобильном и планшете: стоимость → детали → «Что-то не так?»;
      на 1440+: детали → стоимость, «Новая заявка» ссылкой в шапке ── */
.mx__order-aside.Done {
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: var(--space-600);
  padding: var(--order-card-p);
  border-radius: var(--order-card-r);
  background: var(--bg-default);
}

[data-step="4"] .mx__order-main {
  gap: var(--space-600);
}

.mx__order-restart-link {
  display: none;
}

.mx__order-total { order: 1; }
.mx__order-line { order: 2; }
.mx__order-summary { order: 3; }
.mx__order-help { order: 4; }

.mx__order-line {
  width: 100%;
  height: 0;
  border: 0;
  border-top: 1px solid var(--border-default);
}

.mx__order-help {
  display: flex;
  flex-direction: column;
  gap: var(--space-400);
  padding-top: var(--space-800);
}

.mx__order-help .mx__order-consent {
  max-width: none;
}

.mx__button.Muted {
  width: 100%;
  background: var(--button-inactive);
  color: var(--text-static-gray);
}

.mx__order-summary-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-400);
}

.mx__link.Muted {
  color: var(--text-muted);
  font-size: var(--field-text-size);
  line-height: var(--field-text-lh);
  white-space: nowrap;
}

.mx__order-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
  font-size: var(--field-text-size);
  line-height: var(--field-text-lh);
}

.mx__order-summary > div,
.mx__order-total {
  display: grid;
  gap: var(--space-100);
}

.mx__order-summary dt,
.mx__order-total-label,
.mx__order-per,
.mx__order-note {
  color: var(--text-muted);
}

.mx__order-summary dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* Длинный комментарий не раздувает итог — максимум две строки */
.mx__order-summary [data-out="comment"] {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.mx__order-files {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-200);
}

.mx__order-total {
  font-size: var(--field-text-size);
  line-height: var(--field-text-lh);
}

.mx__order-price {
  font-size: var(--order-title-size);
  line-height: var(--order-title-lh);
}

.mx__order-note {
  font-size: var(--order-desc-size);
  line-height: var(--order-desc-lh);
}

/* ── Планшет 744+: шапка шага — одна карточка (описание слева, табы справа) ── */
@media (min-width: 744px) {
  .mx__order-aside {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-400);
    padding: var(--order-card-p);
    border-radius: var(--order-card-r);
    background: var(--bg-default);
  }

  .mx__order-aside .mx__order-card {
    padding: 0;
    border-radius: 0;
    background: none;
  }

  /* Табы справа, выровнены по низу — на одной линии с заголовком шага (как в макете 744/1024) */
  .mx__order-aside.Tabs {
    align-items: flex-end;
  }

  .mx__order-aside.Tabs .mx__order-tabs-card {
    order: 2;
    flex: 0 1 calc(50% - var(--space-200));
  }

  .mx__order-aside.Tabs .mx__order-intro {
    flex: 0 1 calc(50% - var(--space-200));
  }

  .mx__order-aside.Done {
    flex-direction: column-reverse;
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--space-800);
  }

  .mx__order-footer.Split {
    flex-direction: column;
  }

  .mx__order-buttons {
    gap: var(--space-300);
  }

  .mx__order-help {
    gap: var(--space-600);
  }
}

/* ── 1024+: подписи полей слева, кнопки справа ── */
@media (min-width: 1024px) {
  /* Подпись слева, поле справа */
  .mx__order-row {
    display: grid;
    grid-template-columns: var(--order-label-w) minmax(0, 1fr);
    align-items: center;
    column-gap: var(--order-label-gap);
    row-gap: var(--space-200);
  }

  .mx__order-row:has(.Textarea) {
    align-items: flex-start;
  }

  .mx__order-row:has(.Textarea) .mx__order-label {
    padding-top: calc((var(--field-h) - var(--order-label-lh)) / 2);
  }

  .mx__order-label {
    width: auto;
  }

  .mx__order-footer {
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
  }

  .mx__order-footer.Split {
    flex-direction: row;
    justify-content: space-between;
  }

  .mx__order-footer .mx__button {
    width: auto;
  }

  .mx__order-buttons {
    flex-direction: row;
    gap: var(--space-400);
  }

  .mx__order-skip,
  .mx__order-consent {
    align-self: flex-end;
    text-align: left;
  }

  .mx__order-skip {
    align-self: center;
  }

  .mx__order-summary > div,
  .mx__order-total {
    grid-template-columns: var(--order-summary-w) 1fr;
    gap: var(--space-800);
  }
}

/* ── 1440+: шапка шага слева, поля справа ── */
@media (min-width: 1440px) {
  /* Шапка шага в макете квадратная: высота блока = её ширина */
  .mx__order-panel {
    flex-direction: row;
    align-items: stretch;
    min-height: var(--order-aside-w);
  }

  /* Шаг 2: высота строго как у шапки шага, лишние файлы — прокруткой в списке */
  [data-step="2"].mx__order-panel:not(.is-files-expanded) {
    height: var(--order-aside-w);
  }

  [data-step="2"] .mx__order-main {
    gap: var(--upload-gap);
    min-height: 0;
  }

  /* На десктопе высота одинаковая на всех шагах: согласие в две строки */
  .mx__order-consent {
    max-width: none;
    white-space: nowrap;
  }

  .mx__order-aside {
    flex: none;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    width: var(--order-aside-w);
  }

  .mx__order-aside.Tabs {
    justify-content: space-between;
    align-items: stretch;
  }

  .mx__order-aside.Tabs .mx__order-tabs-card {
    order: 0;
    flex: none;
  }

  .mx__order-aside.Tabs .mx__order-intro {
    flex: none;
  }

  .mx__order-aside.Done {
    flex-direction: column;
    justify-content: space-between;
  }

  [data-step="4"] .mx__order-main {
    justify-content: flex-start;
    gap: var(--space-800);
  }

  .mx__order-restart-link {
    display: inline;
  }

  .mx__order-summary { order: 1; }
  .mx__order-line { order: 2; }
  .mx__order-total { order: 3; }

  .mx__order-help {
    display: none;
  }

  [data-step="1"] .mx__order-desc {
    display: block;
  }

  .mx__order-main {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: space-between;
  }

}

/* components/uploader.css */
/* Загрузчик файлов (Фигма: uploader / info / place / list, 237:5217) */
.mx__uploader {
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
  font-size: var(--field-text-size);
  line-height: var(--field-text-lh);
}

.mx__uploader-info {
  display: flex;
  align-items: flex-start;
  gap: var(--space-200);
  padding: var(--space-300);
  border-radius: 16px;
  background: var(--bg-muted);
  color: var(--text-neutral-subtle);
}

.mx__uploader-info svg {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 4px;
}

.mx__uploader-info span {
  padding-top: calc((32px - var(--field-text-lh)) / 2);
}

.mx__uploader-place {
  display: block;
  padding: var(--space-400);
  border-radius: 16px;
  background: var(--bg-muted);
  cursor: pointer;
  transition: background-color 0.2s;
}

.mx__uploader-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.mx__uploader-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-200);
  min-height: var(--drop-h);
  padding: var(--space-400);
  border: 2px dashed var(--border-default);
  border-radius: 8px;
  text-align: center;
}

.mx__uploader-drop svg {
  width: 24px;
  height: 24px;
}

.mx__uploader-hint {
  color: var(--text-neutral-subtle);
}

@media (hover: hover) {
  .mx__uploader-place:hover {
    background: var(--bg-strong);
  }
}

.mx__uploader-place:has(.mx__uploader-input:focus-visible) {
  outline: 2px solid var(--text-default);
  outline-offset: 2px;
}

.mx__uploader.is-dragover .mx__uploader-place {
  background: var(--bg-strong);
}

.mx__uploader.is-full .mx__uploader-place {
  opacity: 0.5;
  pointer-events: none;
}

.mx__uploader-list {
  padding: 0;
  list-style: none;
}

.mx__uploader-more.mx__link {
  flex: none;
  color: var(--text-muted);
  white-space: nowrap;
}

.mx__uploader-list li.mx__uploader-collapse {
  border-bottom: 0;
}

.mx__uploader-list li > .mx__tag {
  margin-left: auto;
}

.mx__uploader-list li {
  display: flex;
  align-items: center;
  gap: var(--space-200);
  padding: var(--space-300) 0;
  border-bottom: 2px solid var(--border-muted);
}

.mx__uploader-name {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mx__uploader-list li.is-uploading .mx__uploader-name {
  color: var(--text-neutral-subtle);
}

.mx__uploader-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  color: var(--text-default);
}

.mx__uploader-remove svg {
  width: 24px;
  height: 24px;
}

.mx__uploader-error {
  color: var(--red-500);
  font-size: var(--body-extra-small-size);
  line-height: var(--body-extra-small-lh);
}

@media (min-width: 744px) {
  .mx__uploader-drop {
    flex-direction: row;
  }

  .mx__uploader-info {
    align-items: center;
  }

  .mx__uploader-info span {
    padding-top: 0;
  }
}

/* На десктопе форма на всех шагах одной высоты — список файлов прокручивается внутри */
@media (min-width: 1440px) {
  [data-step="2"] .mx__uploader {
    flex: 1 1 auto;
    min-height: 0;
  }

  .mx__uploader-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }

  /* Список раскрыт — форма растёт под него */
  .is-files-expanded .mx__uploader-list {
    overflow: visible;
  }
}

/* components/sections.css */
/* ── Штамп (stamp): белый круг с чёрной иконкой ── */
.mx__stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--stamp);
  height: var(--stamp);
  border-radius: 50%;
  background: var(--bg-default);
  color: var(--text-default);
}

.mx__stamp svg {
  width: 42%;
  height: auto;
}

/* ── Круглая кнопка с плюсом (circle button) ── */
.mx__circle-button {
  position: relative;
  display: block;
  border-radius: 50%;
  background: var(--button-static-black);
  transition: background-color 0.2s;
}

.mx__circle-button::before,
.mx__circle-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 26%;
  width: 48%;
  height: 4px;
  margin-top: -2px;
  background: var(--text-static-white);
}

.mx__circle-button::after {
  transform: rotate(90deg);
}

@media (hover: hover) {
  .mx__circle-button:hover {
    background: var(--button-hover);
  }
}

/* ── «О нас» (about) ── */
.mx__about {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--about-gap);
  padding: var(--about-pt) var(--page-px) var(--about-pb);
}

/* Высота строки = высоте самих цифр (0.852 em у Martian uWd Ult): тогда отступы
   до текста считаются от цифр, а не от пустого места в строке, и на любой ширине как в макете */
.mx__about-num {
  align-self: stretch;
  padding-left: var(--about-num-x);
  color: var(--bg-default);
  font-weight: 1000;
  font-stretch: 200%;
  font-size: var(--about-num-size);
  line-height: 0.852;
  letter-spacing: var(--about-num-ls);
  white-space: nowrap;
}

.mx__about-text {
  color: var(--text-static-gray);
  font-size: var(--about-text-size);
  line-height: var(--about-text-lh);
  text-align: center;
}

@media (min-width: 1024px) {
  .mx__about {
    flex-direction: row;
    align-items: center;
  }

  .mx__about-num {
    flex: none;
    width: var(--about-num-w);
  }

  .mx__about-text {
    flex: 1 1 auto;
    padding-left: var(--space-100);
    text-align: left;
  }
}

/* ── Кейсы (cases) ── */
.mx__cases {
  display: flex;
  flex-direction: column;
  gap: var(--cases-gap);
  padding: var(--cases-pt) var(--page-px) var(--cases-pb);
  text-align: center;
}

.mx__cases-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cases-head-gap);
}

.mx__cases-title {
  max-width: var(--cases-title-w);
  font-family: var(--font-title);
  font-weight: 400;
  font-size: var(--cases-title-size);
  line-height: var(--cases-title-lh);
}

.mx__cases-list {
  display: grid;
  gap: var(--cases-list-gap);
  padding: 0;
  list-style: none;
}

.mx__case {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--case-gap);
}

.mx__case-text {
  font-size: var(--case-text-size);
  line-height: var(--case-text-lh);
}

.mx__case-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--case-meta-gap);
  color: var(--text-muted);
  font-size: var(--case-meta-size);
  line-height: var(--case-meta-lh);
}

/* Кейсы переходят в три колонки с ~600, а не с 744 — так просил Дима */
@media (min-width: 600px) {
  .mx__cases {
    text-align: left;
  }

  .mx__cases-head,
  .mx__case-meta {
    align-items: flex-start;
  }

  .mx__cases-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ── Облако услуг (services) ── */
.mx__services {
  --svc-shift: 0px;
  position: relative;
  isolation: isolate;
  height: var(--svc-h);
  overflow-x: clip;
}

/* Фон фигуры — отдельным слоем под всеми текстами: фигуры перекрываются,
   и текст одной не должен прятаться под соседней */
.mx__services-card {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--svc-gap);
  border-radius: 683px 310px 667px 298px;
  text-align: center;
}

.mx__services-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: var(--bg-default);
}

.mx__services-title {
  font-weight: 400;
  font-size: var(--svc-title-size);
  line-height: var(--svc-title-lh);
}

.mx__services-text {
  font-size: var(--svc-text-size);
  line-height: var(--svc-text-lh);
}

/* В первой фигуре текст в макете не по центру, а с отступом сверху */
.mx__services-card.One {
  justify-content: flex-start;
  padding-top: var(--svc-c1-pt);
  left: calc(var(--svc-c1-x) + var(--svc-shift));
  top: var(--svc-c1-y);
  width: var(--svc-c1-w);
  height: var(--svc-c1-h);
}

.mx__services-card.One .mx__services-title { max-width: var(--svc-t1-w); }
.mx__services-card.One .mx__services-text { max-width: var(--svc-p1-w); }

.mx__services-card.Two {
  left: calc(var(--svc-c2-x) + var(--svc-shift));
  top: var(--svc-c2-y);
  width: var(--svc-c2-w);
  height: var(--svc-c2-h);
  /* на мобильном фигура в макете повёрнута на 180° */
  border-radius: 667px 298px 683px 310px;
}

.mx__services-card.Two .mx__services-title { max-width: var(--svc-t2-w); }
.mx__services-card.Two .mx__services-text { max-width: var(--svc-p2-w); }

.mx__services-card.Three {
  left: calc(var(--svc-c3-x) + var(--svc-shift));
  top: var(--svc-c3-y);
  width: var(--svc-c3-w);
  height: var(--svc-c3-h);
  border-radius: 50%;
}

.mx__services-card.Three .mx__services-title {
  max-width: var(--svc-t3-w);
  font-size: var(--svc-calc-title-size);
  line-height: var(--svc-calc-title-lh);
}

.mx__services-card.Three .mx__services-text {
  display: none;
  max-width: var(--svc-p3-w);
}

.mx__services-button {
  position: absolute;
  z-index: 1;
  left: calc(var(--svc-btn-x) + var(--svc-shift));
  top: var(--svc-btn-y);
  width: var(--svc-btn);
  height: var(--svc-btn);
}

.mx__services-man {
  position: absolute;
  z-index: 1;
  left: calc(var(--svc-man-x) + var(--svc-shift));
  top: var(--svc-man-y);
  width: var(--svc-man-w);
  transform: scaleX(-1); /* на мобильном уборщик отзеркален */
  pointer-events: none;
}

.mx__services-man svg {
  width: 100%;
  height: auto;
}

/* Мобильное облако на 375–620 не растёт (splitCap 1) — остаётся как макет 375 и стоит по центру */
@media (min-width: 375px) and (max-width: 619.98px) {
  .mx__services {
    --svc-shift: calc((100vw - 375px) / 2);
  }
}

/* Облако: мобильная раскладка до 620, дальше — планшетная (роли svc-* с split: 620;
   на 620–744 планшетная раскладка — уменьшенная копия 744 вместе с текстом) */
@media (min-width: 620px) {
  .mx__services-card.Two {
    border-radius: 683px 310px 667px 298px;
  }

  .mx__services-man {
    transform: none;
  }
}

@media (min-width: 1024px) {
  .mx__services-card.Three {
    justify-content: flex-start;
    padding-top: var(--svc-c3-pt);
    border-radius: 683px 310px 667px 298px;
  }

  .mx__services-card.Three .mx__services-text {
    display: block;
  }
}

/* components/cta.css */
/* ── Преимущества (advantages, 333:28868) ── */
.mx__adv {
  display: flex;
  flex-direction: column;
  gap: var(--adv-gap);
  padding: var(--adv-pt) var(--page-px) var(--adv-pb);
  text-align: center;
}

.mx__adv-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cases-head-gap);
}

.mx__adv-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--adv-text-gap);
}

.mx__adv-title {
  max-width: var(--adv-title-w);
  font-family: var(--font-title);
  font-weight: 400;
  font-size: var(--adv-title-size);
  line-height: var(--adv-title-lh);
}

.mx__adv-sub {
  max-width: var(--adv-sub-w);
  font-size: var(--adv-sub-size);
  line-height: var(--adv-sub-lh);
}

.mx__adv-list {
  display: grid;
  gap: var(--adv-gap) var(--adv-col-gap);
  padding: 0;
  list-style: none;
}

.mx__adv-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--adv-item-gap);
}

.mx__adv-item-text {
  display: flex;
  flex-direction: column;
  gap: var(--adv-item-text-gap);
}

.mx__adv-item-title {
  font-weight: 400;
  font-size: var(--adv-item-title-size);
  line-height: var(--adv-item-title-lh);
}

.mx__adv-item-desc {
  font-size: var(--adv-item-text-size);
  line-height: var(--adv-item-text-lh);
}

@media (min-width: 744px) {
  .mx__adv {
    text-align: left;
  }

  .mx__adv-head,
  .mx__adv-text,
  .mx__adv-item {
    align-items: flex-start;
  }

  .mx__adv-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ── Аватар (badge persona) ── */
.mx__avatar {
  flex: none;
  display: block;
  width: var(--avatar);
  height: var(--avatar);
  padding: calc(var(--avatar) * 0.04); /* белое кольцо 4px при 100px; % считался бы от ширины строки */
  border-radius: 50%;
  background: var(--bg-default);
}

.mx__avatar-art {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  transform: scaleX(-1);
}

.mx__avatar-part {
  position: absolute;
}

.mx__avatar-part svg {
  width: 100%;
  height: 100%;
}

/* ── Призыв к действию (call to action, 333:28933) ── */
.mx__cta-stage {
  display: flex;
  flex-direction: column;
  gap: var(--cta-chat-gap);
  padding: var(--cta-pt) var(--page-px) 0;
}

.mx__cta-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cta-head-gap);
  text-align: center;
}

.mx__cta-text {
  display: flex;
  flex-direction: column;
  gap: var(--cta-text-gap);
}

.mx__cta-title {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: var(--cta-title-size);
  line-height: var(--cta-title-lh);
}

.mx__cta-sub {
  max-width: var(--cta-sub-w); /* в макете подзаголовок уже колонки: 504 на 744, 728 на 1920 */
  font-size: var(--cta-sub-size);
  line-height: var(--cta-sub-lh);
}

/* Чат */
.mx__chat {
  display: flex;
  flex-direction: column;
  gap: var(--chat-gap);
  padding: 0;
  list-style: none;
}

.mx__chat-msg {
  display: flex;
  align-items: flex-end;
  gap: var(--avatar-gap);
}

.mx__chat-msg.Right {
  flex-direction: row-reverse;
}

.mx__chat-bubble {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--chat-btn-gap);
  max-width: var(--chat-left-w);
  padding: var(--chat-p);
  border-radius: var(--chat-r) var(--chat-r) var(--chat-r) 0;
  background: var(--bg-default);
}

.mx__chat-msg.Right .mx__chat-bubble {
  max-width: var(--chat-right-w);
  border-radius: var(--chat-r) var(--chat-r) 0 var(--chat-r);
}

.mx__chat-meta {
  margin-bottom: calc(var(--chat-meta-gap) - var(--chat-btn-gap));
  color: var(--text-static-gray);
  font-size: var(--chat-meta-size);
  line-height: var(--chat-meta-lh);
}

.mx__chat-meta b {
  font-weight: 700;
}

.mx__chat-text {
  font-size: var(--chat-text-size);
  line-height: var(--chat-text-lh);
}

.mx__chat-button {
  width: 100%;
  height: var(--cta-btn-h);
  padding: 0 var(--cta-btn-px);
  font-size: var(--cta-btn-text-size); /* макет: 12 до 744, 14 на 1024, 18 с 1440 */
  line-height: var(--cta-btn-text-lh);
  text-decoration: none;
}

/* Большая надпись mixline (Chaumont Script в кривых, цвет карточек) */
.mx__wordmark {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--wordmark-h);
  overflow: hidden;
  color: var(--bg-default);
}

.mx__wordmark svg {
  flex: none;
  width: var(--wordmark-w); /* на мобильной шире экрана — обрезается, как в макете */
  max-width: none;
  height: auto;
}

@media (min-width: 744px) {
  .mx__cta-head {
    align-items: flex-start;
    text-align: left;
  }

  .mx__chat-button {
    width: auto;
  }
}

/* 1024+: заголовок слева, чат справа (в макете колонки на 1024 чуть перекрываются — поэтому одна ячейка грида) */
@media (min-width: 1024px) {
  .mx__cta-stage {
    display: grid;
    grid-template-areas: "stage";
  }

  .mx__cta-head {
    grid-area: stage;
    justify-self: start;
    align-self: start;
    width: var(--cta-left-w);
  }

  .mx__chat-window {
    grid-area: stage;
    justify-self: end;
    width: var(--cta-right-w);
  }

  /* Чат начинается ниже заголовка, как в макете (пустой блок над репликами) */
  .mx__chat-window {
    padding-top: var(--cta-chat-offset);
  }
}

/* ── Режим «прокрутки диалога» (включает cta.js) ──
   Сцена прилипает к экрану; окно чата высотой в самую высокую пару реплик стоит на месте
   из макета, внутри него список едет вверх вместе с прокруткой (transform из cta.js) */
/* высоту трека и top сцены ставит cta.js: top отрицательный, если сцена выше экрана */
.mx__cta.is-scrolly .mx__cta-stage {
  position: sticky;
  top: 0;
}

/* Сверху режем по окну (с запасом в отступ над чатом — там пусто), снизу и по бокам облака не режем:
   уходящее и появляющееся облако размыты и прозрачны, жёсткий край на них был бы заметен */
.mx__cta.is-scrolly .mx__chat-window {
  clip-path: inset(calc(-1 * var(--cta-chat-gap)) -100vw -100vh);
}

.mx__cta.is-scrolly .mx__chat {
  will-change: transform;
}

.mx__cta.is-scrolly .mx__chat-msg {
  transform-origin: 0 100%;
  will-change: opacity, transform, filter;
}

.mx__cta.is-scrolly .mx__chat-msg.Right {
  padding-left: var(--chat-inset, 0px); /* cta.js: не заезжать на подзаголовок, где колонки перекрываются */
  transform-origin: 100% 100%;
}

/* components/doc.css */
/* ── Текстовая страница (политика конфиденциальности и подобные) ──
   Отдельного макета нет: заголовок и текст — в стилях сайта, колонка по левому краю */
.mx__doc {
  padding: var(--doc-pt) var(--page-px) var(--doc-pb);
}

.mx__doc-body {
  max-width: var(--doc-w);
  font-size: var(--doc-text-size);
  line-height: var(--doc-text-lh);
}

.mx__doc-title {
  margin-bottom: var(--space-400);
  font-family: var(--font-title);
  font-weight: 400;
  font-size: var(--doc-title-size);
  line-height: var(--doc-title-lh);
}

.mx__doc-date {
  margin-bottom: var(--doc-pt);
  color: var(--text-static-gray);
}

.mx__doc-body h2 {
  margin: var(--doc-pt) 0 var(--space-400);
  font-weight: 400;
  font-size: var(--doc-h-size);
  line-height: var(--doc-h-lh);
}

.mx__doc-body p,
.mx__doc-body ul {
  margin-bottom: var(--space-300);
}

.mx__doc-body ul {
  padding-left: 1.2em;
}

.mx__doc-body li + li {
  margin-top: var(--space-100);
}

/* Незаполненные реквизиты — заметно, чтобы не уехало на боевой сайт */
.mx__doc-todo {
  padding: 0 0.25em;
  border-radius: 4px;
  background: var(--red-50);
}