/* «How you start»: четыре шага лежат стопкой в центре ряда, чуть повёрнуты; по появлению (60 %)
   разлетаются веером на свои места, шаг 90 мс. Пружина с критическим затуханием (08.10, как у Apple:
   отскок только после броска пальцем, а здесь его нет) — 500 мс без перелёта. В иврите веер зеркальный.
   Шрифт крупнее, чем был; основной текст в rem — следует за размером текста в системе. */
.start-step .num{font-family:"Martian Mono",ui-monospace,monospace}
.start-step h4{font-size:23px;letter-spacing:var(--hr-font-tracking-subhead,-.015em)}
.start-step p{font-size:1rem}
.start-when{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#8e9399}
.start-note{font-size:16px}
.start-grid.pending .start-step{opacity:0;transform:translate(calc(var(--k,0) * 100% * var(--hr-dir,1)),40px) rotate(calc(var(--r,0deg) * var(--hr-dir,1))) scale(.96)}
.start-grid.in .start-step{opacity:1;transform:none;transition:transform var(--hr-motion-duration-settle,500ms) var(--hr-motion-easing-settle,cubic-bezier(.16,1,.3,1)),opacity 500ms ease;transition-delay:var(--d,0ms)}
.start-step:nth-child(1){--k:1.5;--r:-8deg;--d:0ms}
.start-step:nth-child(2){--k:.5;--r:-3deg;--d:90ms}
.start-step:nth-child(3){--k:-.5;--r:3deg;--d:180ms}
.start-step:nth-child(4){--k:-1.5;--r:8deg;--d:270ms}
@media(max-width:760px){.start-grid.pending .start-step{transform:translate(0,14px)}}
/* «Уменьшить анимацию»: веер не играет (story-stack.js сразу ставит in), а если настройку включили посреди — шаги на местах. */
@media(prefers-reduced-motion:reduce){.start-grid.pending .start-step,.start-grid.in .start-step{transform:none}}
/* Заголовок «How you start» (владелец 30.09: «первое предложение не помещается в одну строку»):
   две строки — «From sign-in to the first candidates.» целиком и «In one day.». Кегль следует за
   шириной колонки (cqi), чтобы первая строка влезала на любом экране; строка в 16 кеглей у Sapphire
   (Rubik 600) и 12,5 у Atelier. С 1181 px заголовок стоит над второй карточкой шагов, на 761–1180 px —
   во всю ширину под надзаголовком, на телефоне переносится как обычно. */
#how-you-start .section-head{container-type:inline-size}
#how-you-start .how-line{display:block}
#how-you-start .section-head h3{max-width:none}
@media(min-width:761px){#how-you-start .how-line{white-space:nowrap}}
@media(min-width:1181px){
  #how-you-start .section-head{grid-template-columns:calc((100% - 54px) / 4) minmax(0,1fr);gap:18px}
  #how-you-start .section-head h3{font-size:min(70px,5.6cqi)}
  [data-landing-theme="sapphire"] #how-you-start .section-head h3{font-size:min(70px,4.5cqi)}
}
@media(min-width:761px) and (max-width:1180px){
  #how-you-start .section-head{grid-template-columns:1fr;gap:20px}
  #how-you-start .section-head h3{font-size:min(64px,7.4cqi)}
  [data-landing-theme="sapphire"] #how-you-start .section-head h3{font-size:min(64px,5.9cqi)}
}