:root {
  --accent: #0849D4;

  /* button states from the design: default / hover / active / disabled */
  --btn-bg: #0849D4;
  --btn-bg-hover: #3B74EE;
  --btn-bg-active: #618FF0;
  --btn-bg-disabled: #B1B7C4;

  --accent-soft: #E0E9FA;
  --surface-page: #F4F5FD;
  /* background of the steps block. Sections have no background of their own: in the design the
     whole page is one plane, --surface-page, and only the gradient pair integration → capabilities
     goes to white. The "light" section tones measured in August from per-section exports turned
     out to be the viewer's backdrop: those PNGs came from Figma with a transparent background */
  --surface: #FBFCFE;
  /* the design uses one text colour for everything — headings, field labels and the copyright */
  --ink: #212736;
  --ink-strong: #212736;
  --ink-deep: #12161F;
  /* only left on the dial codes in the country list: the design has no such screen */
  --muted: #5A6480;
  /* one hairline for everything in the design: list dividers, field underlines, the footer */
  --line: #E3E8F5;
  --card: #FAFCFE;
  /* card border: in the design a 1px gradient from white to light blue, not a flat line.
     The same gradient as on the form card */
  --card-border: linear-gradient(108.51deg, #FFFFFF 4.95%, #CEDCF9 49.21%, #FFFFFF 97.73%);
  --icon-bg: #F2F5FA;
  --white: #FFFFFF;
  /* form validation and the error toast: the mock has no error state, the red is ours */
  --error: #D93025;
  --error-soft: #FDECEC;

  --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: 'Karla', -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; }

/* the ice design has no rounded corners: div and span have zero radius anyway, but button and input
   in iOS Safari draw their own — so an explicit zero is needed only on the interactive elements */
.btn,
.square-cta,
.navbar__burger,
.field__input,
.phone-input { border-radius: 0; }

/* screen-reader-only content: taken out of the flow but not hidden — otherwise it would not be 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 the 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 page 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 neither anchor jumps nor 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-family: 'Spectral', Georgia, 'Times New Roman', serif;
  /* H2 [mobile] from the dump: 26/120%. Gives the same 31.2 line as the former 24/1.3 — which is
     why the size difference never showed up in the screenshots */
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--ink-strong);
}

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

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

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

/* in the ice design the section marker is a square, not a dot */
.label__dot {
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  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;
  /* 4 vertically, not 10: in the design the two-line buttons (the form, "Deploy the AI
     Assistant") are the same 56 high — at 10 they grew to 62 */
  padding: 4px 28px;

  border: 2px solid transparent;
  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(--btn-bg); color: var(--white); }

/* hover only where there is a pointer: on touch screens it sticks after a tap */
@media (hover: hover) {
  .btn:hover { background: var(--btn-bg-hover); }
}

.btn:active,
.btn.is-pressed {
  background: var(--btn-bg-active);
}

.btn:focus { outline: none; }

.btn:focus-visible {
  outline: 2px solid var(--ink-deep);
  outline-offset: 2px;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--btn-bg-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(--btn-bg-disabled);
  border-color: transparent;
}

/* secondary action next to a primary one (cookie banner "Decline"): outlined in the accent,
   no fill. Listed after the .btn states above so that hover / pressed here win by order */
.btn--ghost {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
}
.btn--ghost:hover,
.btn--ghost:active,
.btn--ghost.is-pressed {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

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

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

/* flat sections have no background of their own — in the design the page plane sits under them */
/* 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(--white) 70.06%); }
.section--fade-in { background: linear-gradient(180deg, var(--white) 9.16%, var(--surface-page) 100%); }

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

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

.hero {
  position: relative;

  /* 784 = 846 of the design frame − 62 of the notch emulation: the content inside is already shifted by the same 62 */
  min-height: 784px;
  padding: 12px var(--gutter) 0;
  background: var(--surface-page);
  overflow: hidden;
}

/* the ice design has no white bar under the navbar, the burger is a square */
.navbar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  padding: 0;
  background: none;
}

.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;
  border: 0;
  /* --btn-bg rather than --accent: the same value, but the burger is a button and follows the state scale */
  background: var(--btn-bg);
  cursor: pointer;
  transition: background-color .2s ease;
}

/* the same states as .btn in ice: no border when pressed, the background lightens in steps.
   The burger needs no disabled state — it is never disabled */
@media (hover: hover) {
  .navbar__burger:hover { background: var(--btn-bg-hover); }
}

.navbar__burger:active,
.navbar__burger.is-pressed {
  background: var(--btn-bg-active);
}

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

.navbar__burger:focus-visible {
  outline: 2px solid var(--ink-deep);
  outline-offset: 2px;
}

.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);
  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 { margin-top: 40px; }

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

.hero__title {
  position: relative;
  z-index: 2;
  margin-top: 13px;
  font-family: 'Spectral', Georgia, 'Times New Roman', serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.1;
  /* H1 [mobile] from the dump: -0.03em (-0.04em on desktop) */
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--ink-strong);
}

/* the art layer = the hero frame: object coordinates from the design are measured from the top of the page */
.hero__art {
  position: absolute;
  z-index: 1;
  top: 0;
  left: calc((100% - 375px) / 2);
  width: 375px;
  height: 784px;
  margin: 0;
}

.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: 1; max-width: none; }

/* layout from the design (Kolya, 2026-08-11): top reduced by 62px — the iPhone status bar in the design.
   width is the layer size, X/Y carry the correction (bbox − W) / 2, bbox = W · (|cos| + |sin|).
   The CSS angle has the opposite sign to the Figma panel; the headphones export is also flipped
   by 180°, hence −162.09 + 180. Angles checked against the design by silhouette, IoU 0.82…0.87. */
.hero__art-img--headphones {
  --rot: 17.91deg;
  top: 270.22px;
  left: 31.22px;
  width: 333.63px;
  transform: rotate(var(--rot));
}

.hero__art-img--router {
  --rot: -23.25deg;
  top: 210.96px;
  left: 285.96px;
  width: 133.73px;
  transform: rotate(var(--rot));
}

.hero__art-img--asic {
  --rot: 13.52deg;
  top: 660.06px;
  left: -42.94px;
  width: 136.42px;
  transform: rotate(var(--rot));
}

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

.hero__art-img--headphones.is-swaying { animation: hero-sway-headphones 7s ease-in-out .1s 1 both; }
.hero__art-img--router.is-swaying     { animation: hero-sway-router 5.6s ease-in-out .55s 1 both; }
.hero__art-img--asic.is-swaying       { animation: hero-sway-asic 8.4s ease-in-out .25s 1 both; }

@keyframes hero-sway-headphones {
  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-router {
  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-asic {
  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)); }
}

/* the button is positioned relative to the hero, so the wrapper has no context of its own */
.hero__bottom {
  /* the art is out of the flow — the margin puts the description where the design has it */
  margin-top: 287px;
}

.hero__text {
  position: relative;
  z-index: 2;
  max-width: 290px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
}

/* a 100×100 square button in the bottom-right corner of the hero — per the design */
.square-cta {
  position: absolute;
  right: var(--gutter);
  top: 675px;
  z-index: 2;

  width: 100px;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0;

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

@media (hover: hover) {
  .square-cta:hover { background: var(--btn-bg-hover); }
}

.square-cta:active,
.square-cta.is-pressed {
  background: var(--btn-bg-active);
  background-clip: padding-box;
}

.square-cta:focus { outline: none; }

.square-cta:focus-visible {
  outline: 2px solid var(--ink-deep);
  outline-offset: 2px;
}

.square-cta:disabled,
.square-cta[aria-disabled="true"] {
  background: var(--btn-bg-disabled);
  cursor: not-allowed;
}

.square-cta__line {
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.22px;
  text-transform: uppercase;
  color: var(--white);
}

.square-cta__play {
  width: 40px;
  height: 40px;
}

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

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

/* padding-top 40.9 = 48 from the dump − 7.1 of the top half-leading of Spectral 26/31.2:
   in the design the section boundary runs along the heading caps, in CSS along the line box */
.in-action {
  display: block;
  padding-top: 40.9px;
}

.in-action__mockup {
  position: relative;
  left: -10px;
  width: 366px;
  max-width: none;
  /* 35.2, not 4: at size 26 the heading takes three lines (as in the dump) instead of four,
     and without this the mockup and the list move a line up from the verified position */
  margin: 35.2px auto 0;
}

.in-action__body {
  display: flex;
  flex-direction: column;
  gap: 36px;
  /* the mockup has a transparent margin at the bottom — the gap is measured from the cards, not the image edge */
  margin-top: -20px;
}

.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;
  /* the item is now multi-line: the number sits on the first line, not centred on the block */
  align-items: flex-start;
  gap: 16px;
  /* 15 at the bottom, not 16: the item in the dump is 86, and 1px goes to the divider the dump does not have */
  padding: 16px 0 15px;
  border-top: 1px solid var(--line);
}

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

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

/* in the design the item title is Karla ExtraBold: at 700 the lines are 4 % narrower than the
   design and the wrapping drifts (items 03/05/06 set in 4 lines instead of 5) */
.numbered__text b { font-weight: 800; }

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

.capability {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px;
  background: var(--card);
  border: 1px solid;
  border-image-source: var(--card-border);
  border-image-slice: 1;
}

.capability__icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--icon-bg);
}

.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(--card);
  border: 1px solid;
  border-image-source: var(--card-border);
  border-image-slice: 1;
  overflow: hidden;
}

/* featured is lighter than --accent-soft, with an accent border instead of the gradient one.
   The border shorthand here also resets the border-image inherited from .plan */
.plan--featured {
  background: #EBF2FF;
  border: 1px solid var(--accent);
}

.plan__tag {
  position: absolute;
  top: 20px;
  right: 17px;
  padding: 4px 8px;
  background: rgba(8, 73, 212, .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; }
/* highlighted numbers in the plans are medium, not bold (weight from the design) */
.plan__features b { font-weight: 500; }

.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(--accent);
}

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

/* in the design the gap from the header to the cards is 6px larger than the common one */
.section--plans { gap: 44px; }

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

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

/* plan objects: sizes from the @2x assets, position is an estimate until the design is measured */
.plan__img {
  position: absolute;
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* the mobile design layout recomputed from the card's bottom-right corner: the card itself is
   fluid (335 at 375, up to 440 at --page-max 480, wider on tablet), and from left/top the objects
   would creep towards its centre. The position at 375 is the same left/top gave.
   For desktop the values are overridden in @media (min-width: 1024px) — the card is 313 there */
.plan:nth-of-type(1) .plan__img { right: -16px; bottom: -3.2px;   width: 128px; }
/* featured has a 2px border, not 1px, so its correction is a pixel larger */
.plan:nth-of-type(2) .plan__img { right: -15px; bottom: -5.8px;   width: 160px; }
.plan:nth-of-type(3) .plan__img { right: -61px; bottom: -58.1px;  width: 264px; }
.plan:nth-of-type(4) .plan__img { right: -71px; bottom: -140.2px; width: 199px; }

.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; }

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

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

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

/* The field holds the switch (see .range__art) in its top-right corner: --art-w is the
   picture's width, the label wraps before it. */
.field--range {
  --art-w: clamp(115px, 48%, 168px);
  position: relative;
  justify-content: flex-end; /* a two-line label grows upwards: the ranges in a row stay level */
}

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

/* the label wraps before the switch column (the picture plus a gap) instead of running over it */
.field--range > .field__label { max-width: calc(100% - var(--art-w) - 12px); }

/* 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. */
.range {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}

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

/* The switch from the Business plan (362×199 asset) stands on the track at the right end of the
   field, behind the track and the thumb, which paint above it. From the field's bottom edge to
   the track's top: the 26px ticks, the 6px gap, the 8px range margin and 2px of track; the
   picture has about 3 % of clear space under the object, hence the smaller offset.
   It is a stack of three layers that follows the value (js/main.js sets the classes):
   the body with the ports painted out, six big jacks along the front that light up one by one
   (.range__port.is-on), and the original picture with both rows of ports over everything from
   60 % of the track on (.field--range.is-full). */
.range__art {
  position: absolute;
  right: 0;
  bottom: 40px;
  z-index: 0;
  display: block;
  width: var(--art-w);
  aspect-ratio: 362 / 199;
  pointer-events: none;
  user-select: none;
}

.range__art-body,
.range__art-full {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.range__art-full {
  opacity: 0;
  transition: opacity .25s ease;
}

.field--range.is-full .range__art-full { opacity: 1; }

/* The jacks. Each is a transparent 724×398 layer with one 48px jack baked in at its place on
   the front panel (x = 99 + 60·i, y = 171.3 + 0.272·(x − 85) of the asset), so it scales with
   exactly the same filter as the body and the six stay one row — positioning a tiny element
   on its own would put each on a different fraction of a pixel. A jack pops in with a small
   scale-up about its own centre. */
.range__port {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: calc((99 + var(--i, 0) * 60) / 724 * 100%) calc((175.1 + var(--i, 0) * 16.32) / 398 * 100%);
  opacity: 0;
  transform: scale(.9);
  transition: opacity .2s ease, transform .25s ease;
}

.range__port.is-on { opacity: 1; transform: none; }
.field--range.is-full .range__port { opacity: 0; }

.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) 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);
}

.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);
}

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

.form-card {
  display: flex;
  flex-direction: column;
  gap: 40px;
  position: relative;
  z-index: 1;
  padding: 24px 18px;
  background: rgba(255, 255, 255, .44);
  backdrop-filter: blur(16px);

  /* the gradient border from the design; border-image-slice is mandatory, otherwise the gradient is not drawn */
  border: 1px solid;
  border-image-source: var(--card-border);
  border-image-slice: 1;
}

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

/* in the design the form heading wraps onto two lines */
.form-card__head .h2 { max-width: 240px; }

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

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

.form {
  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(--ink);
}

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

.field__input::placeholder { color: var(--accent); 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;
}

/* 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(--btn-bg-hover);
  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. Same language as the form card — square
   corners, the 1px gradient border, a blurred translucent white — with a coloured bar on the
   left and an icon telling success (accent) from error. Enters with a slide from the right,
   leaves by fading; reduced-motion collapses both via the rule at the end of the file. */
.toasts {
  position: fixed;
  top: 16px;
  right: 16px;
  left: 16px;
  /* above the country list (20) and the navbar */
  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: rgba(255, 255, 255, .88);
  backdrop-filter: blur(16px);
  border: 1px solid;
  border-image-source: var(--card-border);
  border-image-slice: 1;
  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;
  background: var(--accent-soft);
  color: var(--accent);
}

.toast--error .toast__icon {
  background: var(--error-soft);
  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: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
}

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

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

/* Cookie consent banner: a card pinned to the bottom, full width on phones, a 420px card
   in the bottom-left corner on tablets and centred at the bottom on desktop. Same language as the toasts and the form card —
   square corners, the 1px gradient border, a blurred translucent white. */
.cookie-banner {
  position: fixed;
  right: 16px;
  bottom: 16px;
  left: 16px;
  /* same layer as the toasts: above the country list (20) and the navbar */
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(16px);
  border: 1px solid;
  border-image-source: var(--card-border);
  border-image-slice: 1;
  box-shadow: 0 12px 32px rgb(18 22 31 / 0.16);
  color: var(--ink);
  animation: cookie-banner-in .3s ease both;
}

/* display: flex above would beat the UA's [hidden] rule, so the attribute is honoured here */
.cookie-banner[hidden] { display: none; }

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

.cookie-banner__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  color: var(--ink-deep);
}

.cookie-banner__text {
  font-size: 14px;
  line-height: 20px;
}

.cookie-banner__actions {
  display: flex;
  gap: 8px;
}

/* smaller than the page CTAs: two of them share the card's width */
.cookie-banner__actions .btn {
  flex: 1 1 0;
  min-height: 44px;
  padding: 4px 16px;
  font-size: 14px;
}

@keyframes cookie-banner-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

@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;
  }

  .cookie-banner {
    right: auto;
    bottom: 24px;
    left: 24px;
    width: 420px;
  }
}

/* on desktop the card moves from the bottom-left corner to the bottom centre: auto margins
   rather than a translate, as the entry animation owns transform */
@media (min-width: 1024px) {
  .cookie-banner {
    right: 0;
    left: 0;
    margin-inline: auto;
  }
}

.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);
  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(--ink);
}

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

.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;
  /* .iti from the library is a block wrapper, the flex rules do not reach inside, and the input
     keeps its intrinsic width from size: below 414px it overflowed the field by 16…86px */
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 20px;
  line-height: 24px;
  color: var(--ink-deep);
}

/* the mask in the design is paler than the other placeholders: it hints at the format, not a value */
.phone-input::placeholder { color: #B0BEED; opacity: 1; }
.phone-input:focus { outline: none; }

/* the headphones are a layer under the card: it is translucent, the silhouette shows through */
.form-section {
  position: relative;
  /* the design frame is 1026: a strip is left under the card into which the headphones fit whole.
     At 851 (measured from the old frame) they were clipped by the section's bottom edge */
  min-height: 1026px;
  background: var(--surface-page);
}

/* layout from the design: W is the layer size, X/Y carry the correction (bbox − W) / 2;
   the angle has the opposite sign, the headphones export is flipped by 180° → −158.29 + 180.
   The point is shifted by (−37, +91) against the old frame: the silhouette is checked by the bottom
   and by the slices below the card (widths match 105/104 and 234/229 at the same rotation) */
.form-art {
  position: absolute;
  z-index: 0;
  left: -25.31px;
  top: 497.69px;
  width: 506.36px;
  max-width: none;
  transform: rotate(21.71deg);
  pointer-events: none;
}

/* below desktop the wrapper changes nothing: the headphones stay absolute, relative to .form-section */
.form-stage { display: contents; }

/* the blurred copies exist only in the desktop design */
.form-art--haze { display: none; }

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

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

/* in the dump this label is larger than the others: 18/150% */
.advantages > .label {
  font-size: 18px;
  line-height: 27px;
}

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

.advantage {
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* 38 at the bottom, not 40: the card in the dump is 206, and 2px go to the border the dump does not have */
  padding: 24px 24px 38px;
  background: var(--card);
  border: 1px solid;
  border-image-source: var(--card-border);
  border-image-slice: 1;
}

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

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

/* see .in-action: the heading comes first in the section, so the top half-leading is trimmed */
.section--advantages,
.section--how-it-works { padding-top: 40.9px; }

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

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

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

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

.steps {
  display: flex;
  flex-direction: column;
  gap: 32px;
  /* 31/23 rather than 32/24: the dump has no border, and it takes 1px on each side —
     otherwise the block grows from the design's 1020 to 1022 */
  padding: 31px 23px;
  background: var(--surface);
  border: 1px solid;
  border-image-source: var(--card-border);
  border-image-slice: 1;
}

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

.step__icon {
  /* 14 before the step number, 8 between the number and the text (one group in the dump) */
  margin-bottom: 6px;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--icon-bg);
}

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

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

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

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

/* reopens the cookie banner so the visitor can change their choice */
.footer__cookies {
  display: block;
  margin: 8px auto 0;
  padding: 4px 8px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 16px;
  line-height: 24px;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.footer__cookies:hover,
.footer__cookies:focus-visible { color: var(--accent); outline: none; }

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

  /* the card here is narrower than the design's 335 (280 at 320), and anchoring the object to the right
     edge pushes it onto the price — at these widths we measure from the top-left corner, as before */
  .plan__img { right: auto; bottom: auto; }
  .plan:nth-of-type(1) .plan__img { left: 221px; top: 255px; }
  .plan:nth-of-type(2) .plan__img { left: 186px; top: 237px; }
  .plan:nth-of-type(3) .plan__img { left: 130px; top: 254px; }
  .plan:nth-of-type(4) .plan__img { left: 205px; top: 186px; }
}

.navbar__nav,
.navbar__cta { display: none; }

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

@media (min-width: 768px) {
  /* the mobile values from the dump do not carry higher: that is its own, compressed composition */
  .form-section { min-height: 0; }

  .section--advantages,
  .section--how-it-works { padding-top: var(--section-pad); }

  .advantages > .label { font-size: 16px; line-height: 24px; }
  .advantages-group { gap: 80px; }
  .results,
  .stats { gap: 20px; }
  .advantage { padding: 32px 24px 40px; }
  .numbered__item { padding: 16px 0; }
  .in-action { padding-top: 42px; }
  .footer { margin-top: 0; }

  .step { gap: 14px; }
  .step__icon { margin-bottom: 0; }

  .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: min(640px, 44.444vw);
    font-size: clamp(48px, 4.722vw, 68px);
    line-height: 1.1;
    /* H1 [desk] from the dump: -0.04em */
    letter-spacing: -0.04em;

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

  .hero__bottom { gap: 0; margin-top: 0; }

  .hero__text {
    margin: 23px 0 0 max(40px, 4.444vw);
    /* 27.08vw = 390 from the design at 1440: at 34.097vw (491) the description wrapped
       elsewhere than in the design */
    max-width: max(320px, 27.08vw);
    font-size: clamp(16px, 1.25vw, 18px);
    line-height: 1.5;
  }

  /* layout from the design: 144×144 at (519, 526) on a 1440×684 base */
  .square-cta {
    position: absolute;
    left: calc(50% - 720px + 519px);
    right: auto;
    top: 526px;
    margin: 0;
    width: 144px;
    height: 144px;
    gap: 14px;
  }

  .square-cta__line { font-size: 14px; }
  .square-cta__play { width: 48px; height: 48px; }

  .hero__art {
    position: absolute;
    top: 0;
    right: auto;
    left: 50%;
    width: min(100%, 1440px);
    height: auto;
    aspect-ratio: 1440 / 684;
    margin: 0;
    transform: translateX(-50%);
  }

  .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);
  }

  /* desktop layout (Kolya, 2026-08-11), 1440×1000 base; the same transfer rules as on
     mobile: width is the layer size, X/Y carry the correction (bbox − W) / 2, the angle has the
     opposite sign (the headphones export is flipped, hence −158.29 + 180) */
  .hero__art-img--headphones {
    --rot: 21.71deg;
    left: 53.2335%;
    top: 8.2675%;
    width: 42.5350%;
  }

  .hero__art-img--router {
    --rot: 20.11deg;
    left: 90.7221%;
    top: 46.4035%;
    width: 15.9079%;
  }

  .hero__art-img--asic {
    --rot: 13.52deg;
    left: 80.5020%;
    top: 86.0175%;
    width: 12.7170%;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  /* on tablet the hero is short — its height comes from the art, and the absolute point 526 from
     the desktop design (1440×684 base) pushed the button onto the next section's heading.
     It goes back into the flow: the hero grows by itself, the button sits under the description at the right edge */
  .hero__bottom {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* centred, right under the description with no gap (Kolya's call): at the right edge the button
     overlapped the asic, and beside the description — the headphones' bounding box */
  .square-cta {
    position: static;
    align-self: center;
    margin: 0;
  }

  /* breathing room under the button: otherwise it runs into the section boundary */
  .hero { padding-bottom: 32px; }

  :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; }

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

  .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; }

  /* the columns are narrow here (about 190px) and the switch is at its 115px minimum, i.e. only
     63px tall: it ends at the label line, so the label may run the full width */
  .field--range > .field__label { max-width: none; }

  .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;
  }

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

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

  .form-art { left: auto; right: -40px; top: 380px; width: 520px; }

  .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: 31px;
  }

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

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

  /* gradients from the desktop design: white is reached earlier than on mobile */
  .section--fade-out { background: linear-gradient(180deg, var(--surface-page) 0%, var(--white) 26.45%); }
  .section--fade-in { background: linear-gradient(180deg, var(--white) 70.53%, var(--surface-page) 100%); }

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

  /* per the design: the navbar is 1440−64×2, logo at the left edge, button at the right */
  .navbar {
    min-height: 80px;
    margin: 20px 64px 0;
    padding: 0;
    gap: 40px;
  }

  .navbar__burger { display: none; }

  .navbar__logo {
    font-size: 20px;
    font-weight: 500;
    color: var(--accent);
  }

  .navbar__logo span { color: inherit; }

  /* the menu does not hug the button: in the design the three navbar items are laid out space-between,
     and the menu sits midway between the logo and the button (left edge 520 at 1440) */
  .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: 56px;
    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 {
    min-height: 684px;
    padding: 0;
  }

  .menu { display: none; }

  /* the ice desktop design: the section is 1440×690, content starts at 64 from the left */
  /* height and top padding follow the design frame (673), not the `desktop-in-action.png` screenshot:
     it was taken with ~17.5px of slack at the top, and building to it pushed the whole page down.
     13 = 21 (top of the h2 caps in the design) − 8 of Spectral half-leading at 48/52.8 */
  .in-action {
    position: relative;
    min-height: 673px;
    padding: 13px 64px 0;
    background: var(--surface-page);
  }

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

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

  .in-action__list {
    max-width: 560px;
    gap: 18px;
  }

  /* in the design the lead wraps onto two lines */
  .in-action .lead { max-width: 500px; }

  .in-action__mockup { display: none; }

  .in-action__body .btn {
    position: absolute;
    z-index: 1;
    left: 64px;
    /* Button from the dump: (64, 617) relative to the section frame */
    top: 617px;
    width: 420px;
  }

  .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; }

  /* layout from the design; rotations and shadows are baked into the export, so CSS has none.
     X/Y minus the shadow margins inside the file (17.5 / 10.5) */
  .in-action__card--bookings {
    left: calc(794.5 / 1440 * 100%);
    top: -17.5px;
    width: calc(546.5 / 1440 * 100%);
    aspect-ratio: 1093 / 963;
    background-image: url('../assets/img/in-action-card-bookings.webp');
  }

  .in-action__card--leads {
    left: calc(687.5 / 1440 * 100%);
    top: 219.5px;
    width: calc(512 / 1440 * 100%);
    aspect-ratio: 1024 / 857;
    background-image: url('../assets/img/in-action-card-leads.webp');
  }

  /* the lock is exported without rotation: the angle with the opposite sign plus 180°, as for the
     headphones, plus the correction (bbox − W) / 2 = 24.5 to the position */
  .in-action__cards::after {
    content: '';
    position: absolute;
    left: calc(1049.5 / 1440 * 100%);
    top: 258.5px;
    width: calc(381.85 / 1440 * 100%);
    aspect-ratio: 1;
    transform: rotate(7.95deg) scaleX(-1);
    background: url('../assets/img/in-action-object.webp') center / contain no-repeat;
  }

  /* columns from the dump: left 535 @ 64, right 646 @ 730 — i.e. a 131 gap.
     535 + 131 + 646 = 1312, exactly the content width (it was 682 + 636, and the list overflowed by 6px) */
  .section--integration {
    display: grid;
    grid-template-columns: minmax(0, 535px) minmax(0, 646px);
    grid-template-rows: auto 1fr;
    justify-content: space-between;
    padding: 120px 64px 57px;
    gap: 0 131px;
  }

  .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;
  }

  /* item size on desktop is the base 16/24 from the design: at the mobile 18/27 the list came out
     216px longer and item 07 took an extra line.
     Tracking: our Karla from Google Fonts sets a line about 2.7 % narrower than Figma, so item 03
     fit into two lines instead of three — the list got 24px shorter and items 04…07 sat above
     their design positions. 0.005em (0.08px per glyph) brings the wrapping of all seven items back
     to the design: heights 88/112 and the list exactly 736, as in the frame */
  .numbered__text { letter-spacing: 0.005em; }

  .section--integration .only-desktop {
    display: flex;
    grid-column: 1;
    grid-row: 2;
    /* the button is anchored to the bottom of the list: in the design its bottom is 21px above the
       last item's bottom. So it moves together with the list rather than by a fixed top offset */
    align-self: end;
    margin-bottom: 21px;
    width: 342px;
  }

  .numbered__item {
    gap: 64px;
    /* 39 in total, as in the design (item pitch 88 and 112 at two and three lines);
       19 at the bottom, not 20: 1px goes to the divider the dump does not have */
    padding: 20px 0 19px;
  }

  /* in the design label→h2 = 12, but Spectral 48/52.8 has 8px of top half-leading Figma does not
     (leading-trim: CAP_HEIGHT) — hence 12 − 8 in CSS. That puts the top of the h2 caps at 36, as in the dump */
  .section__head { gap: 4px; }

  .section--capabilities {
    margin-top: -160px;   /* integration and capabilities read as one section, without the common gap */
    /* the section bottom follows the design frame (918): 105 is left under the grid in the design, not 120 */
    padding: 143px 64px 105px;
    /* 85 from the design minus 12.8 of the h2 bottom half-leading — the grid lands at 233 from the frame top */
    gap: 72.2px;
  }

  .section--capabilities .section__head {
    width: min(900px, 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;
  }

  /* desktop design: the cards start at 206 from the section top (dump: Plan Cards Container
     top=206), the heading block including the gap of 4 takes 133.59 — hence the offset; the card is 352 */
  .section--plans { gap: 72.4px; }
  .section--plans .plan { min-height: 352px; }

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

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

  .plan {
    flex: 1;
    min-width: 0;
    /* in the dump regular cards have no border, and the background is rgba(255,255,255,.69): over
       #F4F5FD that gives exactly the design's #FCFCFE. The dump's `backdrop-filter: blur(8px)` is not
       carried over — under the cards is the flat section background, nothing to blur */
    background: rgba(255, 255, 255, .69);
    border: 0;
  }

  /* object layout for the desktop card (313 against 335 on mobile) — from the design dump,
     but anchored to the bottom-right corner rather than the top-left: the card is fluid
     (272 at 1280, 462 at 1024), and from left/top the objects would creep towards the centre.
     Values = 313/352 from the design minus the object's right/bottom edge, minus the card's 1px border:
     right = (313 − 1) − (left + width), bottom = (352 − 1) − (top + height).
     No height is set, it comes from the asset's proportions and matches the design */
  .plan:nth-of-type(1) .plan__img { right: -13px; bottom: -7px;   width: 128px; }
  .plan:nth-of-type(2) .plan__img { right: -14px; bottom: -5px;   width: 160px; }
  .plan:nth-of-type(3) .plan__img { right: -16px; bottom: -30px;  width: 232px; }
  .plan:nth-of-type(4) .plan__img { right: -57px; bottom: -114px; width: 166px; }

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

  /* in the design the perks line is larger than the base size */
  .perks__item {
    font-size: 18px;
    line-height: 27px;
  }

  /* the same surface as the desktop plan card: no border, white at .69 over the section */
  .calc__card {
    padding: 40px;
    background: rgba(255, 255, 255, .69);
    border: 0;
  }

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

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

  /* from 1024 the switch grows with the column and reaches the label line again */
  .field--range > .field__label { max-width: calc(100% - var(--art-w) - 12px); }

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

  /* in the design the card sits 39 from the frame top, the frame itself is 709.
     The headphones hold the section bottom (they give 709.3), min-height only stretches the
     section to the frame so the next one does not get pulled up */
  .form-section {
    min-height: 709px;
    padding-top: 39px;
  }

  /* design: the card is 1182, centred in the section, padding 51 on all sides.
     Above 1440 the card stretches with the section — 1182/1312 of the content width; max() holds
     the design's 1182 at 1440 and below, max-width covers narrow desktop where the content is under 1182 */
  .form-card {
    width: max(1182px, 90.0915%);
    max-width: 100%;
    margin-inline: auto;
    padding: 51px;
  }

  /* the heading on the left, the field column on the right, 436 wide */
  .form-card__body {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 80px;
    max-width: none;
  }

  .form-card__head {
    flex: 1;
    min-width: 0;
    gap: 24px;
  }

  /* the field column stretches in the same proportion (436 of the card's 1080 inner width),
     otherwise above 1440 empty space grows between the heading and the fields */
  .form {
    flex: 0 0 max(436px, 40.3704%);
    /* 32, not 40: in the design the last field line to the button is 33 */
    gap: 32px;
  }

  /* Spectral 48/52.8 has 8px of top half-leading Figma does not (leading-trim:
     CAP_HEIGHT). Without the trim the card heading drifted 8px down, the description 18 */
  .form-card__head .h2 {
    max-width: 510px;
    margin: -8px 0 -10px;
  }

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

  /* layout from the design; as on mobile, W is the layer size, X/Y carry the correction
     (bbox − W) / 2, the angle has the opposite sign (the export is flipped by 180°).
     Subtracting 37 from Y is no longer needed: padding-top: 39 per the dump frame holds the section boundary.
     --art-left is measured from the section's content edge, i.e. its padding already counted */
  /* the card and the headphones are one block in two overlaid cells: the headphones stay in the
     flow, so they define the block bottom (and thus the section's), and the gap to the next
     section follows from them by itself, with no tuning to the card height */
  .form-stage {
    --art-w: 486.07px;
    /* 255.7 = 222 from the design + 72.7 bounding-box correction after rotation − 39 section padding.
       By the old frame this was 250, and the headphones (and the section bottom with them) sat 28px lower */
    --art-top: 255.7px;
    --art-left: -68.41px;
    /* the visible bottom of the rotated image falls at 0.853 of its height — below are only
       transparent margins and rotation slack; the block ends at that fraction */
    --art-visible: .853;

    display: grid;
    /* minmax(0, 1fr), not auto: otherwise the column takes the card's max-content (1182)
       and on narrow desktop it runs off the screen — max-width: 100% will not hold it */
    grid-template-columns: minmax(0, 1fr);
  }

  /* align-self, otherwise the card would stretch to the full block height — down to the headphones */
  .form-card {
    grid-area: 1 / 1;
    align-self: start;
  }

  .form-art {
    position: static;
    grid-area: 1 / 1;
    justify-self: start;
    align-self: start;
    width: var(--art-w);
    margin: var(--art-top) 0 calc(var(--art-w) * (var(--art-visible) - 1)) var(--art-left);
    z-index: 2;
  }

  /* the copies are anchored to the right edge so they do not overlap the form on narrow desktop;
     they are out of the flow — the section's bottom edge is unaffected.
     blur is half of what was sent: Figma and CSS compute the blur radius differently,
     tuned by comparing with the design */
  .form-art--haze {
    display: block;
    position: absolute;
    left: auto;
    margin: 0;
    z-index: 0;
  }

  .form-art--haze-top {
    right: -29.39px;
    /* -103.29 = -153 from the dump + 49.7 bounding-box correction after rotation. The former -140.29
       included a 37 deduction for the drifted section boundary — now padding-top: 39 holds it */
    top: -103.29px;
    width: 315.68px;
    transform: rotate(-23.4deg);
    filter: blur(1.5px);
  }

  .form-art--haze-bottom {
    right: 265.86px;
    /* 554.06 = 530 from the dump + 24.06 bounding-box correction (see the copy above) */
    top: 554.06px;
    width: 165.08px;
    transform: rotate(-20.94deg);
    filter: blur(3px);
  }

  /* in the design 24 is left under the results to the frame bottom (999 against 975 of content) —
     without it the next section gets pulled up */
  .section--advantages { gap: 100px; padding-bottom: 24px; }
  /* 115 from the design: from the bottom of the card grid to the "Results" heading */
  .advantages-group { gap: 115px; }

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

  .advantage-list { display: contents; }

  /* on desktop the cards go in a different order than on mobile:
     [label] Logs · Processes / Handles · Instantly · Sends */
  .advantage:nth-child(1) { order: 2; }
  .advantage:nth-child(2) { order: 4; }
  .advantage:nth-child(3) { order: 1; }
  .advantage:nth-child(4) { order: 5; }
  .advantage:nth-child(5) { order: 3; }

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

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

  .results {
    display: grid;
    /* minmax rather than fixed: 424 + 20 + 855 = 1299 against 1152 of content at 1280 pushed
       the right column 83px past the viewport (clipped by overflow-x: clip on .page) */
    grid-template-columns: minmax(0, 424px) minmax(0, 855px);
    justify-content: start;
    align-items: start;
    gap: 20px;
  }

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

  /* design: a 1228 container centred, inside 4 columns of 280 with centres 300 apart;
     the card is not pure white but #FBFCFE — on the #F4F5FD section background white would be too harsh */
  /* the heading comes first in the section, and in the design the frame boundary runs along the
     caps, not the line box: the Spectral half-leading is trimmed on both sides (8 top, 12.8 bottom).
     After that the common gap of 64 counts exactly as in the dump — the card at 96, the button at 449 */
  .section--how-it-works > .h2 { margin: -8px 0 -12.8px; }

  /* in the design 56 is left under the copyright to the frame bottom, 29 of it taken by the .page padding */
  .section--how-it-works { padding-bottom: 20px; }

  .steps {
    flex-direction: row;
    justify-content: space-between;
    width: 1228px;
    max-width: 100%;
    margin-inline: auto;
    /* 44 at the bottom, not 40: the card height in the design is 289. min-height because our pitch
       comes out 218 against 221 in the dump: Figma measures text by glyphs, we by line-height */
    min-height: 289px;
    padding: 24px 24px 44px;
    gap: 20px;
  }

  .step {
    flex: 0 0 280px;
    gap: 14px;
  }

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

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

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

@media (min-width: 1024px) and (max-width: 1279px) {
  /* horizontal only: the padding shorthand would wipe the padding-bottom of the modifier sections
     below, which are declared before this block and equal it in specificity */
  .section { padding-inline: 40px; }
  .page { gap: 120px; }
  .page__main { gap: 120px; }

  /* the exact values from the 1440 design do not work here: the form frame height would leave 136px
     of emptiness under the card, and the half-leading trim was computed for size 48, whereas here it is 36.
     padding-top is also from the 1440 design — reset here (the .section shorthand used to do that) */
  .form-section { min-height: 0; padding-top: 0; }
  .section--how-it-works > .h2 { margin: 0; }

  /* the page gap here is 120, not 160 — the compensation has to match,
     otherwise capabilities overlaps integration by 40px */
  .section--capabilities { margin-top: -120px; }

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

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

  .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 {
    padding: 60px 40px 80px;
  }
  .capabilities { grid-template-columns: repeat(3, 1fr); }

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

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

  /* the same composition as at 1440, only squeezed for narrow desktop: the block
     recomputes its height from the new headphones size by itself */
  .form-stage {
    --art-w: 360px;
    --art-top: 300px;
    --art-left: -40px;
  }

  /* left: auto is mandatory — otherwise .form-art above overrides the copies' anchoring to the right edge */
  .form-art--haze { left: auto; }
  /* here the section's padding-top does not move the card: .section { padding: 0 40px } below
     overrides it — which is why the copies stay where they were */
  .form-art--haze-top { right: -60px; top: -120px; width: 220px; }
  .form-art--haze-bottom { right: 200px; top: 520px; width: 130px; }

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

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

/* below 1440 the design's button point (519, 526 on the 1440 base) pushes it to the left edge and
   under the art, so here, as on tablet, it is centred right under the description */
@media (min-width: 1024px) and (max-width: 1439px) {
  .hero__bottom {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .square-cta {
    position: static;
    align-self: center;
    margin: 0;
  }

  /* the hero shrinks to its content: with the button by the description the design's 684 left up to
     223px of emptiness under it. 14 at the bottom — the same as between the button and the frame edge in the design */
  .hero {
    min-height: 0;
    padding-bottom: 14px;
  }
}

/* above the design's 1440 base the content no longer stretches to the viewport edges: the 1312 content
   column stays centred and the side insets grow instead — the hero art and the in-action cards are already
   capped at 1440, so the text and the art meet again. 100% (not 100vw) keeps the scrollbar out of the sum */
@media (min-width: 1440px) {
  .page { --page-inset: max(64px, calc((100% - 1312px) / 2)); }

  .navbar { margin-inline: var(--page-inset); }

  .section,
  .in-action,
  .section--integration,
  .section--capabilities { padding-inline: var(--page-inset); }

  .hero__label,
  .hero__title,
  .hero__text { margin-left: var(--page-inset); }

  /* 27.08vw was 390 at 1440 — it must not grow past it with the viewport */
  .hero__text { max-width: 390px; }

  .in-action__body .btn { left: var(--page-inset); }

  /* the card canvas is 1440 wide: centre it with the content rather than pinning it to the right edge */
  .in-action__cards { right: calc((100% - 1440px) / 2); }

  /* the blurred headphones are measured from the right edge of the 1440 design frame, not the viewport */
  .form-art--haze-top { right: calc(-29.39px + (100% - 1440px) / 2); }
  .form-art--haze-bottom { right: calc(265.86px + (100% - 1440px) / 2); }
}

@media (prefers-reduced-motion: reduce) {
  .range__port,
  .range__art-full { transition: none; }

  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;
  }
}