:root {
  --accent: #F712AE;
  --accent-strong: #FA32BB;

  --accent-press: #DD0699;
  --accent-soft: #FFEBF9;
  /* the lightest point of the section gradient in the design — not pure white */
  --surface-lift: #FEF9F7;
  --surface-page: #FDE8E1;
  --ink: #272E3F;
  --ink-strong: #212736;
  --ink-deep: #12161F;
  --muted: #574552;
  --muted-2: #82657A;
  --line: #CDCDCD;
  --line-field: #D5C1D1;
  --disabled: #CDCDCD;
  --error: #D6323C;
  --white: #FFFFFF;

  --gutter: 20px;
  --section-pad: 48px;
  --page-max: 480px;
}

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--surface-page);
  font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

picture { display: contents; }

h1, h2, h3, p, dd, dl { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

a,
button,
label,
select,
[role="button"] { -webkit-tap-highlight-color: transparent; }

/* screen-reader-only content: taken out of the flow but not hidden — otherwise it is not read */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* skip to content past the navbar: visible only on keyboard focus */
.skip-link {
  position: absolute;
  z-index: 10;
  top: 8px;
  left: 8px;
  padding: 10px 16px;
  background: var(--white);
  color: var(--ink-strong);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  transform: translateY(-200%);
}

.skip-link:focus-visible { transform: none; }

/* main separates the content from the navbar for screen readers but must not change the layout:
   the vertical gaps between sections are set on .page, so the same values are repeated here.
   display: contents would not do — an element without a box gets no anchor jump and no focus */
.page__main {
  display: flex;
  flex-direction: column;
}

.page__main:focus { outline: none; }

.page {
  max-width: var(--page-max);
  margin: 0 auto;
  overflow-x: clip;
}

.h2 {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--ink-strong);
}

.h2--center { text-align: center; }

/* in the mobile design the headings are single-coloured; the pink part appears only on desktop */
.h2__accent { color: inherit; }

.label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--ink);
}

.label__dot {
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
}

.lead {
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
  color: var(--ink-strong);
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 10px 28px;

  border: 2px solid transparent;
  border-radius: 40px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: 0.32px;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;

  transition: background-color .2s ease, border-color .1s ease;
}

.btn--primary { background: var(--accent); color: var(--white); }
.btn--primary:hover { background: var(--accent-press); }

.btn--sm {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.28px;
  background: var(--accent-strong);
}
.btn--sm:hover { background: var(--accent-press); }

.btn:active,
.btn.is-pressed,
.btn:focus-visible {
  outline: none;
  background: var(--accent-press);
  border-color: var(--accent-soft);
}

.btn:focus,
.circle-cta:focus { outline: none; }

.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--disabled);
  border-color: transparent;
  cursor: not-allowed;
}

.btn:disabled:hover,
.btn:disabled:active,
.btn[aria-disabled="true"]:hover,
.btn[aria-disabled="true"]:active,
.btn[aria-disabled="true"].is-pressed {
  background: var(--disabled);
  border-color: transparent;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.section {
  display: flex;
  flex-direction: column;
  gap: var(--section-pad);
  padding: var(--section-pad) var(--gutter);
}

/* Pricing block switch: only one of the two sections shows, picked by data-pricing on <body>
   (set by nginx from the PRICING_VIEW env var, or by ?pricing= in the URL — see index.html).
   Anything but "plans" means the calculator. */
body:not([data-pricing="plans"]) .section--plans:not(.section--calculator) { display: none; }
body[data-pricing="plans"] .section--calculator { display: none; }

.section--flat { background: var(--surface-page); }

.section--fade-out { background: linear-gradient(180deg, var(--surface-page) 0%, var(--surface-lift) 70.06%); }
.section--fade-in { background: linear-gradient(180deg, var(--surface-lift) 9.16%, var(--surface-page) 100%); }

.section__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.section__head .label { justify-content: center; }

.hero {
  position: relative;

  min-height: 763px;
  padding: 16px var(--gutter);
  background: var(--surface-page);
  overflow: hidden;
}

.navbar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 8px 8px 8px 20px;
  background: var(--white);
  border-radius: 100px;
}

.navbar__logo {
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  color: var(--ink-strong);
}

.navbar__logo span { color: var(--accent); }

.navbar__burger {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  /* the border is transparent but always present — like on .btn: otherwise it would appear only
     when pressed and nudge the icon inside the box (box-sizing: border-box, the border goes inward) */
  border: 2px solid transparent;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  transition: background-color .2s ease, border-color .1s ease;
}

/* the same states as .btn (screen 220:8394): darker on hover, a border when pressed.
   The burger needs no disabled state — it is never disabled */
@media (hover: hover) {
  .navbar__burger:hover { background: var(--accent-press); }
}

.navbar__burger:active,
.navbar__burger.is-pressed,
.navbar__burger:focus-visible {
  outline: none;
  background: var(--accent-press);
  /* without padding-box the background runs under the border and peeks out as a strip on the rounding (see .circle-cta) */
  background-clip: padding-box;
  border-color: var(--accent-soft);
}

/* Safari draws its own ring on :focus — after a tap it stayed outside the border */
.navbar__burger:focus { outline: none; }

.navbar__burger-icon,
.navbar__burger-icon::before,
.navbar__burger-icon::after {
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--white);
  transition: transform .25s ease, background-color .2s ease;
}

.navbar__burger-icon { position: relative; }

.navbar__burger-icon::before,
.navbar__burger-icon::after {
  content: '';
  position: absolute;
  left: 0;
}

.navbar__burger-icon::before { top: -6px; }
.navbar__burger-icon::after { top: 6px; }

.navbar__close-icon { display: none; }

.navbar__burger[aria-expanded="true"] .navbar__burger-icon { display: none; }
.navbar__burger[aria-expanded="true"] .navbar__close-icon { display: block; }

.menu {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 40px;
  animation: menu-in .2s ease;
}

.menu[hidden] { display: none; }

@keyframes menu-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

.menu__link {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line-field);
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
  color: var(--ink);
}

.menu__link:hover { color: var(--accent); }

body.is-scroll-locked {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

.hero.is-menu-open .hero__label,
.hero.is-menu-open .hero__title,
.hero.is-menu-open .hero__art,
.hero.is-menu-open .hero__text { display: none; }

.hero.is-menu-open .hero__bottom { position: static; min-height: 0; }

.hero.is-menu-open .circle-cta {
  right: var(--gutter);
  bottom: 16px;
}

.hero__label {
  position: relative;
  z-index: 2;
  margin-top: 36px;
}

.hero__title {
  position: relative;
  z-index: 2;
  margin-top: calc(20px - 7.1px);
  font-size: 48px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  color: #000;
}

.hero__art {
  position: relative;
  width: 375px;
  height: 336px;

  margin-top: calc(-47px + 7.1px);
  margin-right: auto;

  margin-left: max(calc(var(--gutter) * -1), calc((100% - 375px) / 2 - var(--gutter)));
}

.hero__art-glow {
  position: absolute;
  z-index: 1;
  top: 63px;
  left: 39px;
  width: 288px;
  height: 288px;
  border-radius: 50%;
  background: var(--white);
  filter: blur(86px);
}

.hero__art-img,
.hero__art-glow { pointer-events: none; }

.hero__art-img { position: absolute; z-index: 3; max-width: none; }

.hero__art-img--headset {
  --rot: 8.47deg;
  top: 31.6px;
  left: 40.4px;
  width: 275px;
  transform-origin: 48.72% 62.19%;
  transform: rotate(var(--rot));
}

.hero__art-img--bubble {
  --rot: 5.31deg;
  top: 30.9px;
  left: -24.4px;
  width: 88.7px;
  transform: rotate(var(--rot));
}

.hero__art-img--plane {
  --rot: 8.77deg;
  top: -16.6px;
  left: 284.4px;
  width: 131.1px;
  transform: rotate(var(--rot));
}

.hero__art-img--bus {
  top: 405.3px;
  left: -50.3px;
  --rot: 5.48deg;
  width: 159px;
  transform: rotate(var(--rot));
}

.hero__art-img.is-swaying { will-change: transform; }

.hero__art-img--headset.is-swaying { animation: hero-sway-headset 7s ease-in-out .1s 1 both; }
.hero__art-img--bubble.is-swaying  { animation: hero-sway-bubble 5.6s ease-in-out .55s 1 both; }
.hero__art-img--plane.is-swaying   { animation: hero-sway-plane 8.4s ease-in-out .25s 1 both; }
.hero__art-img--bus.is-swaying     { animation: hero-sway-bus 6.6s ease-in-out .85s 1 both; }

@keyframes hero-sway-headset {
  0%   { transform: translate3d(0, 0, 0) rotate(var(--rot)); }
  25%  { transform: translate3d(4px, -13px, 0) rotate(calc(var(--rot) + .85deg)); }
  50%  { transform: translate3d(-3px, -3px, 0) rotate(calc(var(--rot) - .57deg)); }
  75%  { transform: translate3d(5px, 11px, 0) rotate(calc(var(--rot) + .58deg)); }
  100% { transform: translate3d(0, 0, 0) rotate(var(--rot)); }
}

@keyframes hero-sway-bubble {
  0%   { transform: translate3d(0, 0, 0) rotate(var(--rot)); }
  30%  { transform: translate3d(-3px, -8px, 0) rotate(calc(var(--rot) - 1.41deg)); }
  55%  { transform: translate3d(2px, 2px, 0) rotate(calc(var(--rot) + 1.19deg)); }
  80%  { transform: translate3d(-1px, 6px, 0) rotate(calc(var(--rot) - .71deg)); }
  100% { transform: translate3d(0, 0, 0) rotate(var(--rot)); }
}

@keyframes hero-sway-plane {
  0%   { transform: translate3d(0, 0, 0) rotate(var(--rot)); }
  20%  { transform: translate3d(7px, -5px, 0) rotate(calc(var(--rot) + 1.23deg)); }
  45%  { transform: translate3d(-2px, -10px, 0) rotate(calc(var(--rot) - 1.17deg)); }
  70%  { transform: translate3d(-6px, 4px, 0) rotate(calc(var(--rot) + .63deg)); }
  100% { transform: translate3d(0, 0, 0) rotate(var(--rot)); }
}

@keyframes hero-sway-bus {
  0%   { transform: translate3d(0, 0, 0) rotate(var(--rot)); }
  35%  { transform: translate3d(-4px, -9px, 0) rotate(calc(var(--rot) + 1.32deg)); }
  60%  { transform: translate3d(3px, -2px, 0) rotate(calc(var(--rot) - 1.08deg)); }
  85%  { transform: translate3d(-2px, 4px, 0) rotate(calc(var(--rot) + .62deg)); }
  100% { transform: translate3d(0, 0, 0) rotate(var(--rot)); }
}

.hero__bottom {
  position: relative;
  z-index: 2;
  min-height: 161px;
}

.hero__text {
  max-width: 273px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
}

.circle-cta {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  appearance: none;
  border-radius: 50%;

  border: 2px solid transparent;
  background: var(--accent);
  cursor: pointer;
  transition: background-color .2s ease, border-color .1s ease;
}

.circle-cta:hover { background: var(--accent-press); }

.circle-cta:active,
.circle-cta.is-pressed,
.circle-cta:focus-visible {
  outline: none;
  background: var(--accent-press);
  border-color: var(--accent-soft);

  background-clip: padding-box;
}

.circle-cta__text {
  position: absolute;
  inset: -2px;
}

.circle-cta__text text {
  fill: var(--white);
  font-family: inherit;
  font-size: 10.4px;
  font-weight: 700;
  letter-spacing: .85px;
}

.circle-cta__play {
  width: 32px;
  height: 32px;
}

.circle-cta__play svg { width: 100%; height: 100%; display: block; }

.in-action .h2 { max-width: 238px; }

.in-action { display: block; }

.in-action__mockup {
  width: calc(100% + 9px);
  margin: 16px 0 0 11px;
}

.in-action__body {
  display: flex;
  flex-direction: column;
  gap: 36px;
  margin-top: 21px;
}

.in-action__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.checks {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checks__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-size: 18px;
  line-height: 27px;
  color: var(--ink);
}

.checks__icon { flex: 0 0 24px; margin-top: 2px; }

.numbered__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.numbered__item:last-child { border-bottom: 1px solid var(--line); }

.numbered__num {
  flex: 0 0 28px;
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
  color: var(--accent);
}

.numbered__text {
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
  color: var(--ink-strong);
}

.capabilities {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.capability {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  background: var(--white);
  border-radius: 20px;
}

/* the icon size is set explicitly at both breakpoints: the width/height attributes in the
   markup reflect the desktop 32px from the design and no longer drive the layout */
.capability__icon img {
  width: 24px;
  height: 24px;
}

.capability__icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(33, 39, 54, .05);
}

.capability__text {
  font-size: 16px;
  line-height: 24px;
  color: var(--ink-strong);
}

.plans {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.plan {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  min-height: 343px;
  padding: 32px 32px 40px;
  background: var(--white);
  border-radius: 20px;
  overflow: hidden;
}

.plan--featured {
  background: var(--accent-soft);
  border: 2px solid var(--accent);
}

.plan__tag {
  position: absolute;
  top: 20px;
  right: 17px;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(250, 50, 187, .1);
  font-size: 12px;
  font-weight: 500;
  line-height: 16.2px;
  text-transform: uppercase;
  color: var(--accent);
}

.plan__name {
  font-size: 28px;
  font-weight: 600;
  line-height: 34.2px;
  color: var(--ink);
}

.plan__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.plan__features {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 271px;
}

.plan__features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 16px;
  line-height: 24px;
  color: var(--ink);
}

.plan__features img { flex: 0 0 24px; }
.plan__features b { font-weight: 700; }

.plan__price {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 0 4px;
}

.plan__from { font-size: 16px; line-height: 16px; color: var(--ink); }
.plan__period { font-size: 16px; line-height: 24px; color: var(--ink); }

.plan__amount {
  font-size: 24px;
  font-weight: 500;
  line-height: 22.32px;
  color: var(--ink);
}

.plan__stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.plan__stack .plan__period { margin-top: -4px; }

.plan__old {
  position: relative;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  line-height: 17.08px;
  color: var(--muted-2);
}

.plan__strike {
  position: absolute;
  left: 1px;
  top: 6.5px;
  width: 38px;
  height: 11px;
  max-width: none;
  pointer-events: none;
}

.plans-group {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.plans-group__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.plan__img {
  position: absolute;
  bottom: 0;
  height: auto;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.plan:nth-of-type(1) .plan__img {
  width: 27.4627%;
  aspect-ratio: 92 / 141;
  right: 6.1194%;
  transform: translateY(42.631%) rotate(-20deg);
}

.plan:nth-of-type(2) .plan__img {
  width: 31.4199%;
  aspect-ratio: 104 / 161;
  right: 5.8308%;
  transform: translateY(31.714%) rotate(-20deg);
}

.plan:nth-of-type(3) .plan__img {
  width: 35.8209%;
  aspect-ratio: 120 / 186;
  right: 2.3313%;
  transform: translateY(29.522%) rotate(-20deg);
}

.plan:nth-of-type(4) .plan__img {
  width: 41.7910%;
  aspect-ratio: 140 / 217;
  right: 0.0328%;
  transform: translateY(35.668%) rotate(-20deg);
}

.perks {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.perks__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  line-height: 24px;
  color: var(--ink);
}

.perks__item img { flex: 0 0 32px; }

.form-card {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 20px 16px;
  background: var(--white);
  border-radius: 20px;
}

.form-card__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-card__text {
  font-size: 16px;
  line-height: 24px;
  color: var(--ink);
}

.form-card__body {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.form {
  position: relative; /* anchor for the honeypot, which is moved off-screen */
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.form__fields {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.field__label {
  font-size: 12px;
  line-height: 18px;
  text-transform: uppercase;
  color: var(--muted-2);
}

.field__input {
  width: 100%;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--line-field);
  border-radius: 0;
  background: transparent;
  font-family: inherit;
  font-size: 18px;
  line-height: 24px;
  color: var(--ink-deep);
}

.field__input::placeholder { color: var(--muted); opacity: 1; }
.field__input:focus { outline: none; border-bottom-color: var(--accent); }

/* Form states: an invalid field colours its underline and gets an error line below;
   sending is shown on the button (.btn.is-loading), the result goes to a toast. */
.field.is-invalid .field__input { border-bottom-color: var(--error); }

.field__error {
  margin: 0;
  font-size: 12px;
  line-height: 18px;
  color: var(--error);
}

/* honeypot: moved off-screen rather than display:none — bots skip hidden fields */
.form__hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Savings calculator (#calculator): the fields sit on a white card like the plan cards and the
   form card — the underline inputs need a light surface. */
.calc__card {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 32px 20px;
  background: var(--white);
  border-radius: 20px;
}

.calc__card .btn { align-self: center; width: min(465px, 100%); }

.calc__fields {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* The field is the stage for the suitcase (see .range__stage): the top padding reserves room for
   it standing fully out — 161px of picture plus a 1px gap above the tick-label line minus the
   130px that the label, the input, the range and the upper half of the tick labels take. */
.field--range {
  position: relative;
  justify-content: flex-end; /* a two-line label grows upwards: the ranges in a row stay level */
  padding-top: 32px;
}

.field--range > .field__label,
.field--range > .field__input {
  position: relative;
  z-index: 1;
}

/* the label wraps before the suitcase column (104px plus a gap) instead of running over it */
.field--range > .field__label { max-width: calc(100% - 116px); }

/* the number input looks like the other underline fields, but short — four digits are enough —
   and without spin buttons */
.field--range .field__input {
  width: 6ch;
  -moz-appearance: textfield;
  appearance: textfield;
}
.field--range .field__input::-webkit-inner-spin-button,
.field--range .field__input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Range under a number input. The two share one value (js/main.js keeps them in sync) and expose
   it as --progress (0–1) on the field: it fills the track up to the thumb and lifts the suitcase. */
.range {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}

.range__input,
.range__ticks {
  position: relative;
  z-index: 1;
}

/* The stage covers the field from its top down to the middle of the tick labels (the 18px text
   line at the bottom of the ticks) and clips whatever is below, so the suitcase rises from the
   line of digits and passes behind the track and the thumb, which paint above the stage. */
.range__stage {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 9px;
  left: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* The suitcase (104×161, the Professional plan size). At 0 only the grip and the very top of the
   rods show — the top 13 % of the picture — so it is pushed down by the remaining 87 % of its own
   height; at 1 it stands fully out, wheels included — the picture ends right at the wheels, so a
   hairline gap keeps them clear of the clip line. */
.range__art {
  position: absolute;
  right: 0;
  bottom: 1px;
  width: 104px;
  aspect-ratio: 104 / 161;
  height: auto;
  transform: translateY(calc((1 - var(--progress, 0)) * 87%));
  transition: transform .2s ease;
  user-select: none;
}

.range__input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  margin: 8px 0;
  border: 0;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    var(--accent) calc(var(--progress, 0) * 100%),
    var(--line-field) calc(var(--progress, 0) * 100%)
  );
  cursor: pointer;
}

.range__input::-webkit-slider-runnable-track { height: 4px; background: transparent; }
.range__input::-moz-range-track { height: 4px; background: transparent; }

.range__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -8px; /* centre the thumb on the 4px track */
  border: 2px solid var(--white);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 1px 4px rgba(18, 22, 31, .2);
}

.range__input::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 2px solid var(--white);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 1px 4px rgba(18, 22, 31, .2);
}

.range__input:focus { outline: none; }
.range__input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--accent-soft); }
.range__input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--accent-soft); }

/* Tick labels. Each one sits at its share of the track, --at (0–1, set in the markup), so the
   labels stay true to the values even when the steps between them differ; the edge labels are
   pulled inwards so the first and the last line up with the track ends. */
.range__ticks {
  position: relative;
  height: 26px; /* 6px tick, 2px gap, 18px text line */
  font-size: 12px;
  line-height: 18px;
  color: var(--muted-2);
  background: rgba(255, 255, 255, .7); /* keeps the digits readable over the suitcase */
}

.range__ticks li {
  position: absolute;
  top: 0;
  left: calc(var(--at, 0) * 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
  transform: translateX(-50%);
}

.range__ticks li::before {
  content: '';
  width: 1px;
  height: 6px;
  background: var(--line-field);
}

.range__ticks li:first-child { align-items: flex-start; transform: none; }
.range__ticks li:last-child { align-items: flex-end; transform: translateX(-100%); }


/* Button while sending: the label gives way to a spinner with "Sending…"; the button is
   disabled but keeps the accent colour — the grey disabled look would read as "not allowed". */
.btn__loading {
  display: none;
  align-items: center;
  gap: 10px;
}

.btn.is-loading { pointer-events: none; }
.btn.is-loading .btn__label { display: none; }
.btn.is-loading .btn__loading { display: inline-flex; }

.btn.is-loading:disabled,
.btn.is-loading:disabled:hover {
  background: var(--accent-press);
  border-color: transparent;
  cursor: progress;
}

.btn__spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgb(255 255 255 / 0.35);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: btn-spin .8s linear infinite;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* Toasts: the form result in the top-right corner. A card in the landing palette; the
   coloured bar on the left and the icon tell success (accent) from error. Enters with a
   slide from the right, leaves by fading; reduced-motion collapses both via the rule below. */
.toasts {
  position: fixed;
  top: 16px;
  right: 16px;
  left: 16px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}

.toast {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  margin-left: auto;
  padding: 16px 44px 16px 20px;
  overflow: hidden;
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgb(18 22 31 / 0.16);
  color: var(--ink);
  pointer-events: auto;
  animation: toast-in .3s ease both;
}

.toast::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--accent);
}

.toast--error::before { background: var(--error); }

.toast.is-leaving {
  animation: toast-out .25s ease both;
}

.toast__icon {
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}

.toast--error .toast__icon {
  background: #FDECEC;
  color: var(--error);
}

.toast__icon svg { display: block; }

.toast__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.toast__title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  color: var(--ink-deep);
}

.toast__text {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
}

.toast__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted-2);
  cursor: pointer;
}

.toast__close:hover { background: var(--accent-soft); color: var(--ink); }

.toast__close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ElevenLabs widget: hidden until a CTA opens it; its colours and radii follow the landing.
   The variables are the widget's own theme hooks (:host inside its shadow root); a rule on the
   host element from the page wins over them. */
elevenlabs-convai {
  --el-accent: var(--accent);
  --el-accent-hover: var(--accent-press);
  --el-accent-active: var(--accent-press);
  --el-accent-primary: var(--white);
  --el-base-primary: var(--ink-deep);
  --el-base-subtle: var(--muted-2);
  --el-base-border: var(--line-field);
  --el-button-radius: 40px;
  --el-sheet-radius: 20px;
  --el-input-radius: 12px;
  --el-bubble-radius: 16px;
}

elevenlabs-convai[hidden] { display: none; }

/* a CTA waiting for the widget to load */
.btn[aria-busy="true"],
.circle-cta[aria-busy="true"] { cursor: progress; }

@keyframes toast-in {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: none; }
}

@keyframes toast-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@media (min-width: 768px) {
  .toasts {
    top: 24px;
    right: 24px;
    left: auto;
    width: 380px;
  }
}

.field__input--phone {
  display: flex;
  align-items: center;
  gap: 8px;
}

.phone-country {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}

.phone-country__button {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -12px 0;
  padding: 12px 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.phone-country__button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.phone-country__list {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  z-index: 20;
  width: max-content;
  max-width: calc(100vw - var(--gutter) * 2);
  max-height: 264px;
  margin: 0;
  padding: 4px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--line-field);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgb(18 22 31 / 0.16);
}

.phone-country__list:focus { outline: none; }
.phone-country__list[hidden] { display: none; }

.phone-country__list.is-up {
  top: auto;
  bottom: calc(100% + 12px);
}

.phone-country__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: 16px;
  line-height: 24px;
  color: var(--ink-deep);
  cursor: pointer;
}

.phone-country__option.is-active { background: var(--accent-soft); }

.phone-country__option[aria-selected='true'] { font-weight: 600; }

.phone-country__name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
}

.phone-country__dial { color: var(--muted); }

.phone-country__chevron { flex: 0 0 12px; }

.phone-flag {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
}

.phone-flag .iti__flag {
  --iti-flag-width: 32px;
  --iti-flag-height: 24px;
  border-radius: 0;
  box-shadow: none;
}

.phone-iso {
  font-size: 20px;
  line-height: 24px;
  color: var(--muted);
}

.phone-code {
  padding-left: 8px;
  border-left: 1px solid var(--line-field);
  font-size: 20px;
  line-height: 24px;
  color: var(--muted);
}

.field__input--phone .iti { flex: 1; min-width: 0; }

.field__input--phone .iti__country-container { display: none; }
.field__input--phone .phone-input { padding-left: 0 !important; }

.phone-input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 20px;
  line-height: 24px;
  color: var(--ink-deep);
}

.phone-input::placeholder { color: var(--line-field); opacity: 1; }
.phone-input:focus { outline: none; }

.form-card__media {
  height: 289px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  border-radius: 16px;
  overflow: hidden;
}

.form-card__media img {
  width: 371px;
  max-width: none;
}

/* in the design the object is shifted to the right edge of the block: the lock sticks out past the
   pink plate. translateY makes it protrude the same amount below without poking out above the plate */
@media (max-width: 767px) {
  .form-card__media { overflow: visible; }
  .form-card__media img { transform: translate(41px, 33px); }
}

.advantages-group {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.advantages {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.advantage-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.advantage {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px 24px 40px;
  background: var(--white);
  border-radius: 20px;
}

.advantage__icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 36px;
  background: var(--accent-strong);
}

.advantage__text {
  font-size: 18px;
  line-height: 27px;
  color: var(--ink);
}

.results {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.stats {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.stat__value {
  font-size: 64px;
  font-weight: 600;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--accent);
}

.stat__caption {
  font-size: 18px;
  line-height: 27px;
  color: var(--muted);
}

.steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 24px 32px;
  background: var(--white);
  border-radius: 24px;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.step__icon {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-soft);
}

.step__num {
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
  color: var(--ink-strong);
}

.step__text {
  font-size: 20px;
  line-height: 30px;
  text-align: center;
  color: var(--ink);
}

.footer {
  padding-top: 40px;
  border-top: 1px solid var(--line-field);
}

.footer__copy {
  font-size: 20px;
  line-height: 30px;
  text-align: center;
  color: var(--muted);
}

@media (max-width: 374px) {
  .hero__art {
    transform: scale(.9);
    transform-origin: top center;
    margin-bottom: -55px;
  }
  .hero__title { font-size: 42px; }
  .stat__value { font-size: 56px; }
}

.navbar__nav,
.navbar__cta { display: none; }

.br-desktop,
.only-desktop,
.in-action__cards { display: none; }

@media (min-width: 768px) {
  .hero {
    --nav-h: 80px;
    --art-w: min(1440px, 100vw);
    --art-top: max(0px, calc(var(--nav-h) - var(--art-w) * 0.06944));

    min-height: calc(var(--art-top) + var(--art-w) * 0.475);
    padding: 16px 0 0;

    overflow: visible;
  }

  .navbar,
  .menu { margin-inline: max(40px, 4.444vw); }

  .hero__label {
    display: inline-flex;
    margin: clamp(24px, 5.139vw, 74px) 0 0 max(40px, 4.444vw);
    font-size: clamp(14px, 1.111vw, 16px);
  }

  .hero__title {
    margin: calc(clamp(12px, 1.389vw, 20px) - 0.1974em) 0 0 max(40px, 4.444vw);
    max-width: max(360px, 57.014vw);
    font-size: clamp(48px, 5.278vw, 76px);
    line-height: 1.10526;
    letter-spacing: -0.03em;

    color: var(--ink-strong);
  }

  .hero__bottom {
    position: static;
    min-height: 0;
  }

  .hero__text {
    margin: calc(clamp(32px, 5.556vw, 80px) - 0.7333em) 0 0 max(40px, 4.444vw);
    max-width: max(300px, 34.097vw);
    font-size: clamp(16px, 1.25vw, 18px);
    line-height: 1.5;
  }

  .circle-cta {
    position: relative;
    left: auto;
    top: auto;
    right: auto;
    bottom: auto;

    margin: clamp(-13px, -0.903vw, -8px) auto 0;
    width: clamp(96px, 10vw, 144px);
    height: clamp(96px, 10vw, 144px);
    background: var(--accent);
  }

  .hero.is-menu-open .circle-cta {
    right: auto;
    bottom: auto;
  }

  .circle-cta__play { width: clamp(31px, 3.194vw, 46px); height: clamp(31px, 3.194vw, 46px); }

  .hero__art {
    position: absolute;
    top: var(--art-top);
    right: 0;
    left: auto;
    width: min(100%, 1440px);
    height: calc(var(--art-w) * 0.475);
    margin: 0;
    transform: none;
  }

  .hero__art-glow {
    left: calc(887 / 1440 * 100%);
    top: calc(149 / 684 * 100%);
    width: calc(500 / 1440 * 100%);
    height: auto;
    aspect-ratio: 1;
    filter: blur(150px);
  }

  .hero__art-img--headset {
    --rot: 2.46deg;
    left: calc(830.404 / 1440 * 100%);
    top: calc(81.7 / 684 * 100%);
    width: calc(435.943 / 1440 * 100%);
  }

  .hero__art-img--bubble {
    z-index: 1;
    left: calc(535.205 / 1440 * 100%);
    top: calc(56.813 / 684 * 100%);
    width: calc(153.764 / 1440 * 100%);
  }

  .hero__art-img--plane {
    --rot: 9.07deg;
    left: calc(1288.849 / 1440 * 100%);
    top: calc(267.927 / 684 * 100%);
    width: calc(214.324 / 1440 * 100%);
  }

  .hero__art-img--bus {
    left: calc(1145.868 / 1440 * 100%);
    top: calc(545.353 / 684 * 100%);
    width: calc(247.172 / 1440 * 100%);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --gutter: 40px;
    --section-pad: 64px;
  }

  .page { max-width: none; }

  .br-mobile { display: none; }

  .h2 { font-size: 36px; line-height: 39.6px; }

  .navbar {
    min-height: 64px;
    padding: 10px 10px 10px 28px;
  }

  .navbar__burger { flex: 0 0 44px; width: 44px; height: 44px; }

  .menu { margin-top: 48px; }
  .menu__link { font-size: 24px; line-height: 34px; }

  .in-action .h2 { max-width: 420px; }

  .in-action__mockup {
    display: block;
    width: min(100%, 520px);
    margin: 24px auto 0;
  }

  .in-action__body { margin-top: 32px; gap: 40px; }

  .in-action__list { max-width: 640px; }

  .section--integration .section__head,
  .section--capabilities .section__head,
  .section--plans .section__head {
    width: min(600px, 100%);
    margin-inline: auto;
  }

  .numbered__item { gap: 32px; padding: 20px 0; }

  .capabilities {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .capability { padding: 16px; }

  .plans { flex-direction: row; flex-wrap: wrap; }

  .plan {
    flex: 1 1 calc(50% - 10px);
    min-width: 0;
  }

  .plan__features { max-width: none; }

  .plan:nth-of-type(1) .plan__img { width: min(27.4627%, 92px); }
  .plan:nth-of-type(2) .plan__img { width: min(31.4199%, 104px); }
  .plan:nth-of-type(3) .plan__img { width: min(35.8209%, 120px); }
  .plan:nth-of-type(4) .plan__img { width: min(41.7910%, 140px); }

  .calc__card { padding: 32px; }

  /* three ranges in a row, the e-mail centred below them, one column wide */
  .calc__fields {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px 24px;
  }

  .field--email { grid-column: 2; }

  .perks {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 40px;
  }

  .in-action__body .btn,
  .plans-group > .btn,
  .section--how-it-works > .btn {
    align-self: center;
    width: min(465px, 100%);
  }

  .form-card {
    gap: 48px;
    padding: 32px;
    border-radius: 28px;
  }

  .form-card__body,
  .form-card__media {
    width: min(600px, 100%);
    margin-inline: auto;
  }

  .form-card__head .h2 { max-width: 510px; }
  .form-card__media { height: 380px; }

  .advantages {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .advantage-list { display: contents; }

  .advantages > .label {
    grid-column: 1 / -1;
    font-size: 20px;
    line-height: 30px;
  }

  .stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 20px;
  }

  .steps {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px 24px;
    padding: 32px;
  }

  .step { flex: 0 1 calc(50% - 12px); }
}

@media (min-width: 1024px) {
  .page { max-width: none; }

  .br-desktop { display: inline; }
  .br-mobile { display: none; }

  .h2__accent { color: var(--accent); }

  .navbar {
    min-height: 80px;
    margin: 20px 64px 0;
    padding: 16px 16px 16px 40px;
    gap: 40px;
  }

  .navbar__burger { display: none; }

  .navbar__logo { font-weight: 500; }

  .navbar__nav {
    display: flex;
    align-items: center;
    gap: 40px;
  }

  .navbar__link {
    font-size: 14px;
    line-height: 17.1px;
    color: var(--ink-strong);
    transition: color .2s ease;
  }

  .navbar__link:hover { color: var(--accent); }

  .navbar__cta {
    display: flex;
    flex: 0 0 auto;
    min-height: 48px;
    padding: 10px 28px;
  }

  .page {
    display: flex;
    flex-direction: column;
    gap: 160px;
    padding-bottom: 29px;
  }

  .page__main { gap: 160px; }

  .section {
    padding: 0 64px;
    gap: 64px;
  }

  .hero {
    --nav-h: 100px;
    padding: 0;
  }

  .menu { display: none; }

  .in-action {
    position: relative;
    min-height: 673px;
    padding: 21px 64px 0;
  }

  .in-action .h2 {
    max-width: 893px;
    font-size: 48px;
    line-height: 52.8px;
  }

  .in-action__body { margin-top: 64px; }

  .in-action__list {
    max-width: 514px;
    gap: 20px;
  }

  .in-action__mockup { display: none; }

  .in-action__body .btn {
    position: absolute;
    z-index: 1;
    left: 64px;
    top: 610px;
    width: 465px;
  }

  .in-action__cards {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: min(100%, 1440px);
    height: 100%;
  }

  .in-action .h2,
  .in-action__list {
    position: relative;
    z-index: 1;
  }

  .in-action__card {
    position: absolute;
    background: center / contain no-repeat;
  }

  .in-action__card--bookings { z-index: 0; }
  .in-action__card--leads { z-index: 2; }
  .in-action__cards::after { z-index: 3; }

  .in-action__card--bookings {
    left: calc(778 / 1440 * 100%);
    top: -19px;
    width: calc(625.5 / 1440 * 100%);
    aspect-ratio: 1251 / 1101;
    background-image: url('../assets/img/in-action-card-bookings.webp');
  }

  .in-action__card--leads {
    left: calc(700 / 1440 * 100%);
    top: 200px;
    width: calc(587 / 1440 * 100%);
    aspect-ratio: 1174 / 981;
    background-image: url('../assets/img/in-action-card-leads.webp');
  }

  .in-action__cards::after {
    content: '';
    position: absolute;
    left: calc(1084 / 1440 * 100%);
    top: 369px;
    width: calc(320 / 1440 * 100%);
    aspect-ratio: 1;
    background: url('../assets/img/in-action-object.webp') center / contain no-repeat;
  }

  .section--integration {
    display: grid;
    grid-template-columns: 465px 646px;
grid-template-rows: auto 1fr;
    justify-content: space-between;
    padding: 120px 64px 80px;
    gap: 0;
  }

  .section--integration .section__head {
    grid-column: 1;
    grid-row: 1;
    align-items: flex-start;
  }

  .section--integration .h2--center { text-align: left; }

  .section--integration .numbered {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .section--integration .only-desktop {
    display: flex;
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    width: 465px;
  }

  .numbered__item {
    gap: 64px;
    padding: 19px 0 20px;
  }

  .section--capabilities {
    margin-top: -160px;
    padding: 80px 64px 120px;
  }

  .section--capabilities .section__head {
    width: min(600px, 100%);
    margin-inline: auto;
  }

  .capabilities {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }

  .capability {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    min-height: 180px;
    padding: 16px;
  }

  .capability__icon {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
  }

  .capability__icon img {
    width: 32px;
    height: 32px;
  }

  .capability__text {
    font-size: 18px;
    line-height: 27px;
  }

  .section--plans .section__head {
    width: min(893px, 100%);
    margin-inline: auto;
  }

  .plans-group { gap: 48px; }
  .plans-group__inner { gap: 36px; }

  .plans {
    flex-direction: row;
    gap: 20px;
  }

  .plan {
    flex: 1;
    min-width: 0;
  }

  .calc__card { padding: 40px; }

  .calc__fields {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px 32px;
  }

  .field--email { grid-column: 2; }

  .perks {
    flex-direction: row;
    justify-content: center;
    gap: 40px;
  }

  .perks__item {
    font-size: 18px;
    line-height: 27px;
  }

  .plans-group > .btn {
    align-self: center;
    width: 465px;
  }

  .plan:nth-of-type(1) .plan__img {
    width: min(calc(92 / 313 * 100%), 92px);
    right: max(calc(-1.55 / 313 * 100%), -1.55px);
  }

  .plan:nth-of-type(2) .plan__img {
    width: min(calc(104 / 309 * 100%), 104px);
    right: max(calc(-2.7 / 309 * 100%), -2.7px);
  }

  .plan:nth-of-type(3) .plan__img {
    width: min(calc(120 / 313 * 100%), 120px);
    right: max(calc(-14.2 / 313 * 100%), -14.2px);
  }

  .plan:nth-of-type(4) .plan__img {
    width: min(calc(140 / 313 * 100%), 140px);
    right: max(calc(-21.9 / 313 * 100%), -21.9px);
  }

  .form-card {
    flex-direction: row;
    justify-content: space-between;
    gap: 80px;
    min-height: 821px;
    padding: 64px;
    border-radius: 48px;
  }

  .form-card__body {
    flex: 1;
    min-width: 0;
    max-width: 700px;
    gap: 36px;
  }

  .form-card__head { gap: 24px; }

  .form-card__head .h2 { max-width: 510px; }

  .form-card__text {
    max-width: 475px;
    font-size: 20px;
    line-height: 30px;
  }

  .form-card__media {
    position: relative;
    flex: 0 0 547px;
    height: auto;
    border-radius: 28px;
    overflow: visible;
  }

  .form-card__media img {
    position: absolute;
    left: 0;
    top: calc(126 / 693 * 100%);
    width: min(calc(722 / 547 * 100%), 722px);
  }

  .section--advantages { gap: 100px; }
  .advantages-group { gap: 100px; }

  .advantages {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .advantage-list { display: contents; }

  .advantages > .label {
    align-self: start;
    font-size: 20px;
    line-height: 30px;
  }

  .advantage {
    gap: 20px;
    min-height: 211px;
    padding: 32px 32px 40px;
  }

  .results {
    display: grid;
    /* 855px is the width from the design at 1440; below 1427px the fixed track did not fit
       and the right column was cut off by overflow-x on .page */
    grid-template-columns: 424px minmax(0, 855px);
    justify-content: start;
    align-items: start;
    gap: 20px;
  }

  .stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .steps {
    flex-direction: row;
    justify-content: space-between;
    gap: 16px;
  }

  .step { flex: 0 0 280px; }

  .section--how-it-works > .btn {
    align-self: center;
    min-width: 412px;
    white-space: nowrap;
  }

  .footer {
    margin-top: 16px;
    margin-inline: 6px;
  }

  .h2 {
    font-size: 48px;
    line-height: 52.8px;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .section { padding: 0 40px; }
  .page { gap: 120px; }
  .page__main { gap: 120px; }

  .navbar {
    margin: 20px 40px 0;
    padding: 12px 12px 12px 24px;
    gap: 16px;
  }

  .navbar__nav { gap: 24px; }
  .navbar__cta { padding: 10px 20px; }

  /* 18px does not fit in the row at this width — the row must not wrap */
  .perks__item { font-size: 16px; line-height: 24px; }

  .h2 { font-size: 36px; line-height: 39.6px; }

  .in-action {
    min-height: 520px;
    padding: 21px 40px 0;
  }

  .in-action .h2 { max-width: 520px; }
  .in-action__body { margin-top: 40px; }
  .in-action__list { max-width: 400px; }

  .in-action__body .btn {
    position: static;
    align-self: flex-start;
    width: min(400px, 100%);
  }

  .section--integration {
    grid-template-columns: minmax(0, 380px) minmax(0, 520px);
    padding: 80px 40px 60px;
  }

  .section--integration .only-desktop { width: 100%; }

  .numbered__item { gap: 32px; }

  .section--capabilities {
    margin-top: -120px;
    padding: 60px 40px 80px;
  }
  .capabilities { grid-template-columns: repeat(3, 1fr); }

  .plans { flex-wrap: wrap; }
  .plan { flex: 1 1 calc(50% - 10px); }

  .plan:nth-of-type(1) .plan__img { width: min(calc(92 / 313 * 100%), 92px); }
  .plan:nth-of-type(2) .plan__img { width: min(calc(104 / 309 * 100%), 104px); }
  .plan:nth-of-type(3) .plan__img { width: min(calc(120 / 313 * 100%), 120px); }
  .plan:nth-of-type(4) .plan__img { width: min(calc(140 / 313 * 100%), 140px); }

  .form-card {
    gap: 40px;
    min-height: 0;
    padding: 40px;
    border-radius: 40px;
  }

  .form-card__media { flex: 0 0 40%; }

  .form-card__media img {
    left: calc(-2% + 10px);
    top: auto;
    bottom: -7%;
    width: min(calc(667 / 547 * 100%), 722px);
  }

  .results { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }

  .step { flex: 1 1 0; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }

  .hero__art-img.is-swaying {
    animation: none !important;
    will-change: auto;
  }
}