html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  -webkit-text-size-adjust: 100%;
}
body { overflow-x: hidden; }
::selection { background: #d7e5ff; color: #0b0f14; }

/* --- buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 48px; padding: 0 24px; border-radius: 6px;
  border: 1px solid transparent;
  font-size: 15px; font-weight: 600; line-height: 1;
  white-space: nowrap; text-decoration: none;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease,
              transform .12s ease, box-shadow .16s ease;
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn-sm { height: 40px; padding: 0 18px; font-size: 13.5px; }
.btn:active { transform: translateY(1px); }

.btn:focus-visible,
a:focus-visible { outline: 2px solid #1677ff; outline-offset: 3px; border-radius: 6px; }

.btn-primary { background: #1677ff; color: #fff; box-shadow: 0 1px 2px rgba(11,15,20,.10); }
.btn-primary:hover { background: #0b5ed7; color: #fff; box-shadow: 0 6px 18px -8px rgba(22,119,255,.65); }

.btn-secondary { background: #fff; color: #0b0f14; border-color: #d8dde3; }
.btn-secondary:hover { background: #f5f6f8; border-color: #0b0f14; color: #0b0f14; }

.btn-inverse { background: #fff; color: #0b0f14; }
.btn-inverse:hover { background: #e8ebef; color: #0b0f14; }

/* --- hero backdrop -------------------------------------------------------- */
.hero {
  position: relative;
  background:
    radial-gradient(760px 340px at 12% -10%, rgba(22,119,255,.08), transparent 70%),
    radial-gradient(620px 300px at 90% 0%, rgba(22,119,255,.05), transparent 70%),
    #fff;
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(11,15,20,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,15,20,.045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(700px 420px at 25% 20%, #000, transparent 75%);
          mask-image: radial-gradient(700px 420px at 25% 20%, #000, transparent 75%);
}
.hero > * { position: relative; }

/* --- pricing plans -------------------------------------------------------- */
.plan { display: block; cursor: pointer; }
.plan-card {
  display: block; height: 100%;
  border: 1px solid #e3e6ea; border-radius: 10px; background: #fff;
  padding: 24px;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
@media (min-width: 640px) { .plan-card { padding: 28px; } }
.plan:hover .plan-card { border-color: #b9c6d4; transform: translateY(-2px); box-shadow: 0 14px 34px -24px rgba(15, 23, 42, .45); }
.plan-blue .plan-card { border-color: #bcd6ff; }
.plan-blue:hover .plan-card { border-color: #7fb2ff; }
.plan input:checked ~ .plan-card {
  border-color: #1677ff;
  box-shadow: 0 0 0 1px #1677ff, 0 18px 50px -30px rgba(22, 119, 255, .55);
}
.plan input:focus-visible ~ .plan-card { outline: 2px solid #1677ff; outline-offset: 3px; }

.plan-dot {
  display: block; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid #d8dde3; background: #fff; flex: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.plan input:checked ~ .plan-card .plan-dot {
  border-color: #1677ff;
  box-shadow: inset 0 0 0 4px #1677ff;
}

/* --- range slider --------------------------------------------------------- */
.rng {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 999px;
  background: #e3e6ea; outline: none; cursor: pointer;
}
/* The thumb, the focus ring and the monthly price take the chosen plan's
   colour: #calc carries --plan, set by scripts/main.js on every change. */
.rng::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--plan, #1677ff); border: 4px solid #fff;
  box-shadow: 0 1px 5px rgba(11,15,20,.28);
  cursor: grab;
}
.rng::-webkit-slider-thumb:active { cursor: grabbing; filter: brightness(.88); }
.rng::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--plan, #1677ff); border: 4px solid #fff;
  box-shadow: 0 1px 5px rgba(11,15,20,.28);
  cursor: grab;
}
.rng::-moz-range-track { height: 6px; border-radius: 999px; background: #e3e6ea; }
.rng:focus-visible { outline: 2px solid var(--plan, #1677ff); outline-offset: 4px; }
#calc { transition: --plan .16s ease; }
#calc #pcCount:focus { border-color: var(--plan, #1677ff); }

/* --- attendance timeline -------------------------------------------------- */
.track { display: flex; height: 10px; overflow: hidden; border-radius: 2px; background: #eef0f3; }
.track > i { display: block; height: 100%; }
.seg-none {
  background: repeating-linear-gradient(45deg, #e6e9ed, #e6e9ed 3px, #f3f5f7 3px, #f3f5f7 6px);
}

.day-strip { display: flex; height: 3px; }
.day-strip > i { display: block; height: 100%; }

/* --- scroll reveal -------------------------------------------------------- */
.reveal {
  opacity: 0; transform: translateY(12px);
  transition: opacity .5s ease, transform .5s ease;
}
.reveal.is-in { opacity: 1; transform: none; }

/* --- sign-up form --------------------------------------------------------- */
.field + .field { margin-top: 18px; }
.field-label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; color: #0b0f14; }
.field-input {
  display: block; width: 100%; height: 44px; padding: 0 12px;
  border: 1px solid #e3e6ea; border-radius: 6px; background: #fff;
  font: inherit; font-size: 15px; color: #0b0f14; outline: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.field-input::placeholder { color: rgba(109, 117, 126, .7); }
.field-input:focus { border-color: #1677ff; box-shadow: 0 0 0 3px rgba(22, 119, 255, .12); }
.field-input[aria-invalid="true"] { border-color: #ff4d4f; }
.field-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(255, 77, 79, .12); }
select.field-input {
  -webkit-appearance: none; appearance: none; padding-right: 36px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%236d757e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 12px;
}
.field-hint { margin-top: 6px; font-size: 13px; line-height: 1.45; color: #6d757e; }
.field-err { margin-top: 6px; font-size: 13px; line-height: 1.45; color: #cf1322; }

.msg { border: 1px solid; border-radius: 6px; padding: 10px 14px; font-size: 14px; line-height: 1.5; }
.msg-err { background: #fff1f0; border-color: #ffccc7; color: #a8071a; }
.msg-info { background: #eef4ff; border-color: #d7e5ff; color: #0b5ed7; }
.msg a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 374px) { .g-recaptcha { transform: scale(.88); transform-origin: 0 0; } }

:root {
  --iti-border-color: #e3e6ea;
  --iti-hover-color: #eef4ff;
  --iti-icon-color: #6d757e;
  --iti-country-selector-bg: #fff;
  --iti-mobile-popup-margin: 16px;
}
.iti { display: block; width: 100%; }
.iti__country-selector { border-radius: 6px; font-size: 14.5px; color: #0b0f14; }
.iti--inline-country-selector .iti__country-selector {
  box-shadow: 0 18px 50px -24px rgba(11, 15, 20, .35), 0 2px 6px rgba(11, 15, 20, .06);
}
.iti--inline-country-selector .iti__country-list { max-height: 240px; }
.iti__search-input { height: 42px; outline: none; font: inherit; font-size: 14.5px; }
.iti__dial-code { color: #6d757e; }

.otp {
  width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto;
  margin: auto; padding: 24px;
  border: 1px solid #e3e6ea; border-radius: 10px; background: #fff; color: #414952;
  box-shadow: 0 30px 80px -30px rgba(11, 15, 20, .45);
}
@media (min-width: 640px) { .otp { padding: 28px; } }
.otp::backdrop { background: rgba(0, 21, 41, .55); }
body:has(.otp[open]) { overflow: hidden; }
.otp-code {
  height: 56px; text-align: center;
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 26px;
  letter-spacing: .45em; padding-left: calc(12px + .45em);
}
.otp-x {
  display: grid; place-items: center; width: 36px; height: 36px; flex: none;
  margin: -6px -6px 0 0; border-radius: 6px; color: #6d757e;
}
.otp-x:hover { background: #f5f6f8; color: #0b0f14; }
.link-btn { padding: 0; border: 0; background: none; font: inherit; font-weight: 500; color: #1677ff; cursor: pointer; }
.link-btn:hover:not(:disabled) { color: #0b5ed7; text-decoration: underline; text-underline-offset: 3px; }
.link-btn:disabled { color: #6d757e; cursor: default; }
.otp-x:focus-visible,
.link-btn:focus-visible { outline: 2px solid #1677ff; outline-offset: 2px; }

/* --- sticky header state -------------------------------------------------- */
.site-header { transition: box-shadow .2s ease; }
.site-header.is-stuck { box-shadow: 0 1px 0 rgba(11, 15, 20, .06), 0 6px 20px rgba(11, 15, 20, .04); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .no-print { display: none !important; }
  body { color: #000; }
}

/* --- control plan: the legend's green («Стандарт» is the brand blue) --------- */
.plan-green-name { color: #2f8a46; }
.plan-green-bullet { background: #3aa655; }
.plan-green .plan-card { border-color: #bfe3c8; }
.plan-green:hover .plan-card { border-color: #8fd0a1; }
.plan-green input:checked ~ .plan-card {
  border-color: #3aa655;
  box-shadow: 0 0 0 1px #3aa655, 0 18px 50px -30px rgba(58, 166, 85, .55);
}
.plan-green input:focus-visible ~ .plan-card { outline-color: #3aa655; }
.plan-green input:checked ~ .plan-card .plan-dot {
  border-color: #3aa655;
  box-shadow: inset 0 0 0 4px #3aa655;
}

/* --- business plan -------------------------------------------------------- */
.plan-gold-name { color: #9a7a14; }
.plan-gold-bullet { background: #c9a227; }
.plan-gold:hover .plan-card { border-color: #dcc57a; }
.plan-gold input:checked ~ .plan-card {
  border-color: #c9a227;
  box-shadow: 0 0 0 1px #c9a227, 0 18px 50px -30px rgba(201, 162, 39, .6);
}
.plan-gold input:focus-visible ~ .plan-card { outline-color: #c9a227; }
.plan-gold input:checked ~ .plan-card .plan-dot {
  border-color: #c9a227;
  box-shadow: inset 0 0 0 4px #c9a227;
}
.plan-gold .plan-card { border-color: #e2cd84; }