/* ==========================================================================
   Хиринг-квиз 1Fit — mobile first

   Tokens are the 1Fit brand ramp: one hue, #3447F6, taken from the official
   logo at https://1fit.app/icons/logo.svg, stepped by lightness. Same system
   the free.1fit.app funnel uses, so the two products look related.

   NO WEBFONT ON PURPOSE. Inter is named first for the machines that already
   have it and the stack falls through to the system face everywhere else -
   this page opens on cheap phones over mobile data, and a 100kb font file to
   set nine screens of plain text is the wrong trade. Nothing else here loads
   over the network either: the logo is inline SVG.
   ========================================================================== */

:root {
  --brand:      #3447F6;
  --brand-600:  #2436DE;
  --brand-700:  #1A28B4;
  --brand-50:   #F0F1FF;
  --brand-100:  #E1E4FF;
  --brand-200:  #C3C8FE;

  --ink:    #0E1021;
  --ink-2:  #545974;
  --ink-3:  #8B90A8;

  --canvas:  #FFFFFF;
  --canvas-2:#F6F7FB;
  --line:    #E7E8F0;
  --line-2:  #D8DAE6;

  --green:     #1E9E4A;
  --green-tint:#E4F7EA;
  --red:       #D62F4B;
  --red-tint:  #FDECEF;

  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(14,16,33,.05), 0 1px 3px rgba(14,16,33,.04);
  --sh-2: 0 2px 4px rgba(14,16,33,.04), 0 8px 20px rgba(14,16,33,.07);
  --sh-brand: 0 6px 20px rgba(52,71,246,.28);

  --ease: cubic-bezier(.22,1,.36,1);

  /* Room for the sticky action bar plus the iPhone home indicator. */
  --bar-h: calc(76px + env(safe-area-inset-bottom, 0px));

  /* Side padding of the content column. Full-bleed photos pull themselves out
     by exactly this, so it lives here and not in `.wrap` alone. */
  --pad: 20px;
}

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

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

body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* A `display` rule on .screen beats the UA stylesheet's [hidden], so toggling
   the attribute in JS would silently do nothing. Make the attribute win. */
[hidden] { display: none !important; }

button, input, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
ul { list-style: none; }
svg { display: block; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
:focus:not(:focus-visible) { outline: none; }

/* ───────────────────────────── topbar ───────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top, 0px);
}
.topbar__inner {
  max-width: 640px; margin: 0 auto;
  padding: 12px 20px;
  display: flex; align-items: center; gap: 16px;
}
.brand { display: inline-flex; flex: none; }
.brand__logo { width: 57px; height: 29px; }   /* keeps the 65:33 aspect */

.progress { flex: 1; min-width: 0; }
.progress__track {
  height: 5px; border-radius: var(--r-pill);
  background: var(--line); overflow: hidden;
}
.progress__fill {
  height: 100%; width: 0;
  border-radius: var(--r-pill);
  background: var(--brand);
  transition: width .5s var(--ease);
}

/* ───────────────────────────── layout ───────────────────────────── */
.wrap {
  max-width: 640px; margin: 0 auto;
  padding: 0 var(--pad);
}

/* The slide screen owns its own top spacing: the photo starts right under the
   header instead of after the usual 28px of air. */
#screen-slide .stack { padding-top: 0; }

.screen { display: none; }
.screen--active {
  /* The photo layer positions itself against this. */
  position: relative;
  display: flex; flex-direction: column;
  min-height: calc(100dvh - 54px);
  padding-bottom: var(--bar-h);
  animation: screenIn .38s var(--ease) both;
}
@keyframes screenIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.stack { flex: 1; padding: 28px 0 24px; }
.stack--center { display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; gap: 6px; }

/* ───────────────────────────── type ───────────────────────────── */
.eyebrow {
  display: inline-flex; align-items: center;
  padding: 6px 12px; margin-bottom: 18px;
  border-radius: var(--r-pill);
  background: var(--brand-50); color: var(--brand);
  font-size: 13px; font-weight: 600; letter-spacing: -.01em;
}

.title {
  font-size: clamp(28px, 8vw, 38px);
  line-height: 1.1;
  letter-spacing: -.035em;
  font-weight: 700;
  margin-bottom: 14px;
}
.title__alt { color: var(--ink-3); }

.lead { color: var(--ink-2); font-size: 17px; margin-bottom: 8px; }

.step {
  font-size: 13px; font-weight: 600; color: var(--ink-3);
  letter-spacing: -.01em; margin-bottom: 10px;
}

.question {
  font-size: clamp(22px, 5.6vw, 27px);
  line-height: 1.22;
  letter-spacing: -.03em;
  font-weight: 700;
  margin-bottom: 8px;
}

/* The word the question actually turns on - the language being asked about.
   Colour alone is not the only signal (the two questions also differ in
   wording), so this stays readable for anyone who cannot tell the hues apart. */
.accent { color: var(--brand); }

.hint { color: var(--ink-2); font-size: 15px; margin-bottom: 18px; }

.error {
  color: var(--red); font-size: 15px; font-weight: 500;
  background: var(--red-tint);
  border-radius: var(--r-md);
  padding: 12px 14px;
  margin-top: 14px;
}
.error--fatal { margin: 24px 0; }

/* ───────────────────────────── intro ───────────────────────────── */
.points { display: grid; gap: 12px; margin-top: 22px; }
.point {
  display: flex; align-items: flex-start; gap: 12px;
  color: var(--ink-2); font-size: 16px;
}
.point__dot {
  width: 8px; height: 8px; margin-top: 8px; flex: none;
  border-radius: 50%; background: var(--brand);
}

/* ───────────────────────────── language ───────────────────────────── */
/* The two language buttons are the first thing on the page and the only thing
   to do on it, so they carry the brand colour outright rather than sitting
   grey until touched. */
.langs { display: grid; gap: 12px; margin-top: 8px; }
.lang {
  display: block; width: 100%; text-align: left;
  padding: 18px 20px;
  border: 1.5px solid var(--brand-200); border-radius: var(--r-lg);
  background: var(--brand-50);
  transition: border-color .16s, background .16s, box-shadow .16s, transform .12s var(--ease);
}
.lang:hover { border-color: var(--brand); box-shadow: 0 2px 10px rgba(52,71,246,.14); }
.lang:active { transform: scale(.99); }
.lang__name {
  display: block; font-size: 19px; font-weight: 650;
  letter-spacing: -.02em; color: var(--brand-700);
}
.lang__note { display: block; font-size: 14px; color: var(--ink-2); margin-top: 2px; }

/* ───────────────────────────── slides ─────────────────────────────
   A photo slide is the photo. The shots fill the entire screen behind the
   text, the text sits in the middle in white, and the buttons float on top.

   The previous version put small prints in the upper part of the screen and it
   read as decoration: people flicked past it. A full-bleed photo cannot be
   flicked past without being seen, which is the whole job of these screens.

   `inset` pulls the layer out of the column's side padding, so it reaches the
   physical edges of a phone. */
.stage {
  position: absolute;
  top: 0; bottom: 0;
  /* Full bleed regardless of how wide the column is: reach the edges of the
     viewport, not the edges of the 640px text column. `body` has
     overflow-x: hidden, so the scrollbar width in 50vw cannot cause a sideways
     scroll on desktop. */
  left: calc(50% - 50vw); right: calc(50% - 50vw);
  z-index: 0;
  display: grid;
  gap: 4px;
  background: var(--ink);
  overflow: hidden;
}
.stage img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  animation: photoIn .5s var(--ease) both;
}
@keyframes photoIn { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }

/* Two and three photos share the screen. The first one gets the bigger share:
   it is the one chosen to carry the slide. */
.stage--2 { grid-template-rows: 1.25fr 1fr; }
.stage--3 { grid-template-rows: 1.15fr 1fr; grid-template-columns: 1fr 1fr; }
.stage--3 img:first-child { grid-column: 1 / -1; }

/* The wash that makes white text readable over any photo. Darkest where the
   text and the buttons are, almost clear in the middle of the picture. */
.stage::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(10,11,22,.55) 0%, rgba(10,11,22,.28) 32%,
                    rgba(10,11,22,.55) 68%, rgba(10,11,22,.82) 100%);
  pointer-events: none;
}

/* Text over a photo: centred, white, with a shadow so it survives a light
   patch in the image. */
.screen--photo .slide-body {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 20px rgba(10,11,22,.5), 0 1px 3px rgba(10,11,22,.4);
}
.screen--photo .slide-title { font-size: clamp(26px, 7.4vw, 34px); }
.screen--photo .lead { color: rgba(255,255,255,.92); max-width: 30ch; }

/* Figure cards do appear over a photo on no slide today, but the pairing is
   one edit away and a light-blue card on a dark photo would be unreadable. */
.screen--photo .figure {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.24);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.screen--photo .figure__value { color: #fff; }
.screen--photo .figure__label { color: rgba(255,255,255,.85); }

/* The action bar loses its white panel on a photo slide - the wash under it is
   already dark enough - and «Назад» becomes a glass button. */
.screen--photo .actions {
  background: none; border-top: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.screen--photo .btn--ghost {
  background: rgba(255,255,255,.16);
  color: #fff;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.screen--photo .btn--ghost:hover { background: rgba(255,255,255,.26); }

/* Numbers: money and the company. Same idea as the photos - one thing per
   card, big enough to read at a glance while walking. */
.figures { display: grid; gap: 10px; margin-bottom: 20px; }
.figure {
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: var(--r-lg);
  padding: 16px 18px;
}
.figure__value {
  font-size: clamp(24px, 7vw, 30px); font-weight: 750;
  letter-spacing: -.035em; color: var(--brand-700);
  line-height: 1.1;
}
.figure__label { font-size: 15px; color: var(--ink-2); margin-top: 3px; }

@media (min-width: 520px) {
  .figures { grid-template-columns: 1fr 1fr; }
}

/* ───────────────────────────── options ───────────────────────────── */
.options { display: grid; gap: 10px; }

.option {
  position: relative;
  display: flex; align-items: center; gap: 13px;
  padding: 15px 16px;
  border: 1.5px solid var(--line-2); border-radius: var(--r-md);
  background: var(--canvas);
  cursor: pointer;
  /* 54px minimum tap target: this is a phone form filled in one-handed. */
  min-height: 54px;
  transition: border-color .16s, background .16s, transform .12s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.option:active { transform: scale(.995); }

/* The real input is hidden but still focusable, so keyboard users tab through
   the options normally. Without this rule the focus ring would be hidden too
   and the page would be unusable without a mouse - the input is what has
   focus, the label is what is seen. */
.option input, .slot input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.option:focus-within, .slot:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-50);
}

.option__box {
  width: 22px; height: 22px; flex: none;
  border: 2px solid var(--line-2);
  background: var(--canvas);
  display: grid; place-items: center;
  transition: border-color .16s, background .16s;
}
.option__box--radio { border-radius: 50%; }
.option__box--check { border-radius: 7px; }
.option__box svg { width: 13px; height: 13px; opacity: 0; transform: scale(.6); transition: opacity .16s, transform .16s var(--ease); color: #fff; }

.option__label { font-size: 16px; letter-spacing: -.01em; }

.option--picked { border-color: var(--brand); background: var(--brand-50); }
.option--picked .option__box { border-color: var(--brand); background: var(--brand); }
.option--picked .option__box svg { opacity: 1; transform: none; }

/* ───────────────────────────── fields ───────────────────────────── */
.field { margin-bottom: 16px; }
.field__label { display: block; font-size: 14px; font-weight: 600; color: var(--ink-2); margin-bottom: 7px; }
.field__hint { font-size: 14px; color: var(--ink-3); margin: 7px 0 0; }

.input {
  width: 100%;
  padding: 15px 16px;
  border: 1.5px solid var(--line-2); border-radius: var(--r-md);
  background: var(--canvas);
  font-size: 17px;              /* 16px+ or iOS zooms the page on focus */
  transition: border-color .16s, box-shadow .16s;
}
.input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-50); outline: none; }
.input--code { letter-spacing: .35em; font-size: 22px; font-weight: 600; text-align: center; }

textarea.input { min-height: 132px; resize: vertical; line-height: 1.45; }

/* ───────────────────────────── slots ───────────────────────────── */
.slots { display: grid; gap: 10px; }

.slot {
  position: relative;
  display: flex; align-items: center; gap: 13px;
  padding: 15px 16px; min-height: 60px;
  border: 1.5px solid var(--line-2); border-radius: var(--r-md);
  background: var(--canvas); cursor: pointer;
  transition: border-color .16s, background .16s, transform .12s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.slot:active { transform: scale(.995); }
/* Both are spans in the markup, so they need display:block to stack - the time
   and the address on one run-on line is not what this is meant to look like. */
.slot__when { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.015em; }
.slot__where { display: block; font-size: 14px; color: var(--ink-3); margin-top: 1px; }
.slot--picked { border-color: var(--brand); background: var(--brand-50); }
.slot--picked .option__box { border-color: var(--brand); background: var(--brand); }
.slot--picked .option__box svg { opacity: 1; transform: none; }

.slots__empty {
  padding: 18px; border-radius: var(--r-md);
  background: var(--canvas-2); color: var(--ink-2);
}

/* ───────────────────────────── marks ───────────────────────────── */
.mark {
  width: 68px; height: 68px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 14px;
  animation: pop .42s var(--ease) both;
}
.mark svg { width: 32px; height: 32px; }
.mark--ok { background: var(--green-tint); color: var(--green); }
.mark--calm { background: var(--brand-50); color: var(--brand); }
@keyframes pop { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }

.booked-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.booked-head .mark { margin-bottom: 0; width: 54px; height: 54px; }
.booked-head .mark svg { width: 26px; height: 26px; }
.booked-head .question { margin-bottom: 0; }

.booked-when {
  font-size: 19px; font-weight: 650; letter-spacing: -.02em;
  background: var(--brand-50); color: var(--brand-700);
  padding: 14px 18px; border-radius: var(--r-md);
  margin: 0 0 16px;
}

/* ───────────────────────────── getting there ─────────────────────────────
   The last screen has one job left: make the person actually turn up. So the
   address is not a line of small print, it is a block with the metro and both
   map apps one tap away. */
.route {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  margin: 20px 0 18px;
  background: var(--canvas);
}
.route__title {
  font-size: 15px; font-weight: 650; letter-spacing: -.01em;
  margin-bottom: 8px;
}
.route__address { font-size: 16px; font-weight: 550; margin-bottom: 6px; }
.route__metro {
  display: flex; align-items: flex-start; gap: 9px;
  color: var(--ink-2); font-size: 15px; margin-bottom: 14px;
}
.route__metro-dot {
  width: 9px; height: 9px; margin-top: 7px; flex: none;
  border-radius: 50%; background: var(--brand);
}
.route__links { display: flex; gap: 10px; flex-wrap: wrap; }

.maplink {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 16px;
  border: 1.5px solid var(--brand-200); border-radius: var(--r-md);
  background: var(--brand-50); color: var(--brand-700);
  font-size: 15px; font-weight: 600; text-decoration: none;
  transition: border-color .16s, background .16s;
}
.maplink:hover { border-color: var(--brand); background: var(--brand-100); }

/* ───────────────────────────── buttons ───────────────────────────── */
/* The action bar is fixed to the bottom of the viewport: on a phone the
   primary action must be under the thumb, not below the fold after a list. */
.actions {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--line);
  display: flex; gap: 10px;
}
.actions > * { flex: 1; }
.actions--row .btn--ghost { flex: 0 0 34%; }

.btn {
  min-height: 54px; padding: 0 22px;
  border-radius: var(--r-md);
  font-size: 17px; font-weight: 600; letter-spacing: -.015em;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .16s, transform .12s var(--ease), opacity .16s;
  -webkit-tap-highlight-color: transparent;
}
.btn--primary { background: var(--brand); color: #fff; box-shadow: var(--sh-brand); }
.btn--primary:hover { background: var(--brand-600); }
.btn--primary:active { transform: scale(.985); background: var(--brand-700); }
.btn--ghost { background: var(--canvas-2); color: var(--ink-2); }
.btn--ghost:hover { background: var(--line); }
.btn[disabled] { opacity: .5; pointer-events: none; }

.linkbtn {
  display: inline-block; margin-top: 14px;
  color: var(--brand); font-size: 15px; font-weight: 600;
  padding: 8px 0;
}
.linkbtn[disabled] { color: var(--ink-3); pointer-events: none; }

/* ───────────────────────────── wider screens ─────────────────────────────
   Mobile is the design; a desktop visitor gets the same column, centred, with
   the action bar released from the bottom edge so it does not look like a
   phone app stretched across a monitor. */
@media (min-width: 720px) {
  :root { --pad: 24px; }
  .wrap { padding: 0 var(--pad); }
  /* On a wide screen the column is 640px, so "full bleed" just means the width
     of the column - the photo should not try to reach the edges of a monitor.
     The radius goes on the image, NOT on .cover: the prints hang below it, and
     `overflow: hidden` on the container would slice them off. */
  .cover { height: 380px; }
  .cover__main img { border-radius: var(--r-lg); }
  .cover::after { border-radius: 0 0 var(--r-lg) var(--r-lg); }
  .screen--active { min-height: calc(100dvh - 54px); padding-bottom: 40px; }
  .stack { padding: 44px 0 28px; }
  .actions {
    position: static; padding: 0; border: none; background: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    max-width: 380px;
  }
  .actions--row { max-width: 480px; }
  .title { font-size: 40px; }
  .question { font-size: 28px; }
}

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