/* Inter Tight, self-hosted so the page makes no third-party requests. */
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/inter-tight-cyrillic-ext.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/inter-tight-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/inter-tight-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Landing fonts (licensed, from the design). TT Norms has no Kazakh letters (Ә Ғ Қ Ң Ө Ұ Ү Һ); browsers take those
   from Inter Tight, the next font in the stack. */
@font-face { font-family: "TT Norms"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/TTNorms-Regular.woff2) format("woff2"); }
@font-face { font-family: "TT Norms"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/TTNorms-Medium.woff2) format("woff2"); }
@font-face { font-family: "CoFo Gothic"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/CoFoGothic-Medium.woff2) format("woff2"); }
@font-face { font-family: "Commissioner"; font-style: normal; font-weight: 400 500; font-display: swap; src: url(fonts/Commissioner.woff2) format("woff2"); }

:root {
  --ink: #202020;
  --muted: #5c5c5c;
  --line: #e2e2d6;
  --cream: #f5f5dc;
  --paper: #ffffff;
  --admin-bg: #f6f6f0;
  --brand: #70ad47;          /* harmonia.kz brand green: decoration only */
  --brand-text: #5a9535;     /* large text on light backgrounds */
  --brand-strong: #4b822d;   /* white text on it passes WCAG AA */
  --brand-hover: #3f6f25;
  --brand-soft: #edf5e6;
  --danger: #b3261e;
  --danger-soft: #fbeceb;
  --info-soft: #e8f0fb;
  --info: #2a5ca8;
  --radius: 12px;
  --radius-lg: 20px;
  --shadow: 0 1px 2px rgba(32, 32, 32, .04), 0 12px 32px rgba(32, 32, 32, .08);
  --font: "Inter Tight", "Graphik LCG", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.55 var(--font); display: flex; flex-direction: column; min-height: 100vh; }
body > main { flex: 1; }
a { color: var(--brand-strong); }
a:hover { color: var(--brand-hover); }
h1, h2 { line-height: 1.15; font-weight: 600; letter-spacing: -.01em; margin: 0; }
code { font-size: .9em; background: rgba(0, 0, 0, .05); padding: 1px 5px; border-radius: 5px; }
:focus-visible { outline: 3px solid rgba(112, 173, 71, .5); outline-offset: 2px; }

.wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 640px) { .wrap { padding: 0 24px; } }

.muted { color: var(--muted); }
.small { font-size: 13px; }
.nowrap { white-space: nowrap; }
.h-sm { font-size: 24px; }

/* Top bar */
.topbar { background: var(--paper); border-bottom: 1px solid var(--line); }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); min-width: 0; }
.brand img { display: block; width: 150px; height: auto; }
.brand__tag { font-size: 13px; color: var(--muted); border-left: 1px solid var(--line); padding-left: 12px; white-space: nowrap; }
@media (max-width: 520px) { .brand__tag { display: none; } .brand img { width: 128px; } }
.who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.who__email { font-size: 14px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 520px) { .who__email { display: none; } }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px;
  border: 0; border-radius: var(--radius); background: var(--brand-strong); color: #fff; font: 600 16px/1.2 var(--font);
  text-decoration: none; cursor: pointer; transition: background-color .15s; }
.btn:hover { background: var(--brand-hover); color: #fff; }
.btn--block { width: 100%; }
.btn--sm { min-height: 38px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn--ghost:hover { background: #f3f3ea; color: var(--ink); }
.btn--google { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn--google:hover { background: #f7f7f2; color: var(--ink); }
.btn--danger { background: var(--danger); }
.btn--danger:hover { background: #8f1e18; }

/* Cards and form */
.card { background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 24px; }
@media (min-width: 640px) { .card { padding: 32px; } }
.card--narrow { max-width: 460px; margin: 0 auto; }
.form { display: grid; gap: 20px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 14px; font-weight: 600; }
.field input[type=text], .field input[type=tel], .field textarea, .field select, .search input {
  width: 100%; border: 1.5px solid #d6d6ca; border-radius: var(--radius); background: #fff; color: var(--ink);
  font: 16px/1.4 var(--font); padding: 13px 16px; transition: border-color .15s, box-shadow .15s; }
.field textarea { resize: vertical; min-height: 150px; }
.field input:focus, .field textarea:focus, .field select:focus, .search input:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(112, 173, 71, .2); }
.field :is(input, textarea, select)[aria-invalid=true] { border-color: var(--danger); }
.field__hint, .field__meta { margin: 0; font-size: 13px; color: var(--muted); }
.field__meta { text-align: right; min-height: 1.4em; }
.field__meta .over { color: var(--danger); }
.field--short input[type=text] { max-width: 180px; }
.after-age { display: grid; gap: 24px; }
.after-age[hidden] { display: none; }
.minor-note { background: #fff8e6; border: 1px solid #f0dca8; border-radius: 14px; padding: 20px 22px; font-size: 15px; line-height: 1.6; }
.minor-note p { margin: 0; }
.minor-note__title { font-weight: 600; margin-bottom: 4px !important; }
.disclaimer { background: #f7f7f0; border-radius: var(--radius); padding: 12px 14px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.disclaimer p { margin: 0; }
.disclaimer__phones { margin-top: 6px !important; color: var(--ink); font-weight: 600; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.alert { background: var(--danger-soft); color: #7a1c16; border-radius: var(--radius); padding: 14px 16px; font-size: 14px; }
.alert p { margin: 0; font-weight: 600; }
.alert ul { margin: 6px 0 0; padding-left: 18px; }
.card--done { text-align: center; padding-top: 40px; padding-bottom: 40px; display: grid; gap: 14px; justify-items: center; }
.card--done h1 { margin-top: 4px; }
.card--done p { color: var(--muted); margin: 0; max-width: 28em; }
.card--done .btn { margin-top: 10px; }
.done__icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-strong); }

/* Landing «Один вопрос психологу», after the Figma design (desktop 1440, mobile 390). Headings: CoFo Gothic Medium;
   text: TT Norms Regular/Medium, or Commissioner in Kazakh, which TT Norms lacks letters for. Everything is deep
   forest green on white cards over the green background. */
:root {
  --forest: #00553c;       /* Deep Forest Green */
  --forest-hover: #003f2c;
  --grass: #3e9a4e;        /* Fresh Grass */
  --lime: #d1f0a8;         /* Soft Lime */
  --lotus: #f3eee6;        /* Lotus Light */
  --warm: #f8f6f1;         /* Warm White: fields */
  --teal: #003324;         /* Dark Teal: footer */
  --l-error: #a8452f;
  --font-display: "CoFo Gothic", var(--font);
  --font-text: "TT Norms", var(--font);
}
:root:lang(kk) { --font-text: "Commissioner", var(--font); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Public pages: header, footer, fonts */
.is-public { font-family: var(--font-text); color: var(--forest); }
.is-public :is(.btn, input, textarea) { font-family: var(--font-text); }
.is-public .topbar { border-bottom: 0; }
.is-public .topbar__inner { min-height: 0; padding-top: 24px; padding-bottom: 24px; }
.is-public .brand img { width: 184px; }
@media (max-width: 640px) { .is-public .brand img { width: 120px; } }
.lang-menu { position: relative; }
.lang-menu summary { display: flex; align-items: center; gap: 4px; list-style: none; cursor: pointer;
  font: 500 16px/16px var(--font-text); color: var(--forest); padding: 8px 0 8px 8px; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary img { transition: transform .15s; }
.lang-menu[open] summary img { transform: rotate(180deg); }
.lang-menu__list { position: absolute; right: 0; top: 100%; z-index: 10; margin: 4px 0 0; padding: 8px; list-style: none;
  background: var(--paper); border-radius: 16px; box-shadow: 0 12px 32px rgba(0, 51, 36, .18); min-width: 200px; }
.lang-menu__list a { display: block; padding: 20px 16px; border-radius: 8px; font: 500 16px/16px var(--font-text); color: var(--forest); text-decoration: none; }
.lang-menu__list a:hover, .lang-menu__list a[aria-current] { background: var(--warm); }
.is-public .footer { background: var(--teal); color: #fff; padding: 40px 0; font-size: 13px; line-height: 16px; letter-spacing: .26px; }
.is-public .footer__inner { gap: 8px; }
.is-public .footer a { color: #fff; text-decoration: none; }
.is-public .footer a:hover { text-decoration: underline; }
.footer__sep { margin: 0 8px; }
@media (max-width: 640px) {
  .is-public .footer { padding: 32px 0 16px; font-size: 10px; line-height: 12px; letter-spacing: .2px; }
  .footer__links { display: grid; gap: 8px; }
  .footer__sep { display: none; }
}
@media (min-width: 1024px) { .is-public .wrap { padding-left: 80px; padding-right: 80px; max-width: 1440px; } }

/* Landing body */
html:has(.landing) { scroll-behavior: smooth; }
.landing { position: relative; overflow: clip; background: var(--grass); padding-bottom: 160px; }
.landing > .wrap { position: relative; z-index: 1; }
@media (max-width: 640px) { .landing { padding-bottom: 32px; } }

/* Background: the greens of the palette cross-fade over a 15 s loop, with a soft lime and lotus glow, in step with
   the phrases. All of it stays dark enough for the white lettering and headings on it. */
.sky, .sky__layer { position: absolute; inset: 0; z-index: 0; }
.sky__layer--1 { background: var(--grass); }
.sky__layer--2 { background: radial-gradient(60% 40% at 15% 8%, rgba(209, 240, 168, .45), transparent 70%),
  radial-gradient(50% 35% at 90% 45%, rgba(243, 238, 230, .25), transparent 70%), linear-gradient(160deg, #46a457, var(--grass) 60%);
  opacity: 0; animation: sky-2 15s ease-in-out infinite; }
.sky__layer--3 { background: radial-gradient(55% 35% at 85% 10%, rgba(209, 240, 168, .3), transparent 70%),
  linear-gradient(170deg, var(--forest), #1e7a45 55%, var(--grass));
  opacity: 0; animation: sky-3 15s linear infinite; }
@keyframes sky-2 { 0%, 27% { opacity: 0; } 39%, 72% { opacity: 1; } 72.5%, 100% { opacity: 0; } }
@keyframes sky-3 { 0% { opacity: .5; } 6%, 61% { opacity: 0; } 72%, 94% { opacity: 1; } 100% { opacity: .5; } }

/* Hero: lockup, lettering, progress bars */
.hero { display: flex; flex-direction: column; align-items: center; gap: 56px; padding-top: 40px; padding-bottom: 80px; color: #fff; }
.lockup { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0; }
.lockup__logo, .lockup__date-img { display: block; }
.lockup__date-img { width: 316px; height: auto; }
.lockup__date { display: flex; flex-direction: column; font: 500 32px/24px var(--font-display); text-transform: uppercase; }
.lockup__sub { font-size: 16px; text-transform: none; }

/* Three phrases take 5 s each; inside one, the lines appear left to right like handwriting, one after another.
   Lines are the lettering images from the design, or text when an image is missing. */
.phrases { display: grid; justify-items: center; text-align: center; zoom: 1.08;
  font: 500 64px/1.1 var(--font-display); text-transform: uppercase; }
.phrase { grid-area: 1 / 1; margin: 0; opacity: 0; }
.phrase__line { --line: 0s; display: block; margin: 0 auto; clip-path: inset(0 100% 0 0);
  animation: write 15s linear calc(var(--start) + var(--line)) infinite; }
span.phrase__line { width: fit-content; }
img.phrase__line { max-width: 100%; height: auto; }
.phrase--1 { --start: 0s; animation: phrase-1 15s linear infinite; }
.phrase--2 { --start: 5s; animation: phrase-2 15s linear infinite; }
.phrase--3 { --start: 10s; animation: phrase-3 15s linear infinite; }
.phrase__line--2 { --line: .8s; }
.phrase__line--3 { --line: 1.6s; }
.phrase__line--4 { --line: 2.4s; }
.phrase__line--5 { --line: 3.2s; }
@keyframes phrase-1 { 0% { opacity: 0; } 2%, 29.3% { opacity: 1; } 33.3%, 100% { opacity: 0; } }
@keyframes phrase-2 { 0%, 33.3% { opacity: 0; } 35.3%, 62.6% { opacity: 1; } 66.6%, 100% { opacity: 0; } }
@keyframes phrase-3 { 0%, 66.6% { opacity: 0; } 68.6%, 96% { opacity: 1; } 100% { opacity: 0; } }
/* Each line takes 0.8 s; the delay above starts it when its phrase comes up. Halfway through the loop, with its
   phrase already faded out, the line hides again, so on the next turn it waits hidden for its delay. */
@keyframes write { 0% { clip-path: inset(0 100% 0 0); } 5.33%, 50% { clip-path: inset(0); }
  50.1%, 100% { clip-path: inset(0 100% 0 0); } }

.bars { display: flex; gap: 10px; }
.bars__track { position: relative; width: 62.5px; height: 5px; border-radius: 2.5px; overflow: hidden; background: rgba(255, 255, 255, .5); }
.bars__fill { display: block; height: 100%; background: #fff; transform-origin: left; transform: scaleX(0); }
.bars__fill--1 { animation: bar-1 15s linear infinite; }
.bars__fill--2 { animation: bar-2 15s linear infinite; }
.bars__fill--3 { animation: bar-3 15s linear infinite; }
@keyframes bar-1 { 0% { transform: scaleX(0); } 33.3%, 96% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes bar-2 { 0%, 33.3% { transform: scaleX(0); } 66.6%, 96% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes bar-3 { 0%, 66.6% { transform: scaleX(0); } 96% { transform: scaleX(1); } 100% { transform: scaleX(0); } }

/* Cards */
.landing .card { background: var(--paper); border-radius: 40px; box-shadow: none; padding: 40px; }
.btn--pill { min-height: 72px; gap: 10px; padding: 24px 48px; border-radius: 1000px; background: var(--forest); color: #fff;
  font: 500 20px/24px var(--font-display); letter-spacing: .4px; }
.btn--pill:hover { background: var(--forest-hover); color: #fff; }
.btn--cta img { transition: transform .15s; }
.btn--cta:hover img { transform: translateX(3px); }

/* Offer */
.offer { display: grid; gap: 40px 16px; }
@media (min-width: 1100px) { .offer { grid-template-columns: minmax(0, 541fr) minmax(0, 643fr); } }
.offer__main { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.offer h1 { font: 500 72px/64px var(--font-display); letter-spacing: -.72px; color: var(--forest); }
.lead { margin: 0; font-size: 24px; line-height: 32px; }
.benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 64px; align-content: start; }
.benefit { display: flex; gap: 24px; align-items: flex-start; }
.benefit__icon { position: relative; flex: none; width: 48px; height: 48px; display: grid; place-items: center; }
.benefit__icon > img { grid-area: 1 / 1; }
.benefit__rock { width: 100%; height: 100%; }
.benefit__icon--1 .benefit__rock, .benefit__icon--2 .benefit__rock { transform: rotate(-105deg); }
.benefit__glyph { position: relative; }
.benefit__body { display: grid; gap: 8px; }
.benefit__title { font: 500 32px/32px var(--font-display); }
.benefit__text { font-size: 20px; line-height: 24px; letter-spacing: .2px; }

/* Form */
.landing :is(.landing__form, .faq) { max-width: 1056px; } /* 896 + side padding */
.landing__form { padding-top: 80px; padding-bottom: 80px; scroll-margin-top: 8px; }
.landing .form { gap: 48px; padding-bottom: 48px; }
.form__fields { display: grid; gap: 24px; }
.landing .field { gap: 16px; }
.landing .field label { padding: 0 8px; font-size: 24px; line-height: 32px; font-weight: 400; color: var(--forest); }
.landing .field :is(input, textarea) { border: 2px solid transparent; border-radius: 8px; background: var(--warm); padding: 30px;
  font-family: var(--font-text); font-size: 20px; line-height: 24px; letter-spacing: .2px; color: var(--forest); }
.landing .field :is(input, textarea)::placeholder { color: var(--forest); opacity: .5; }
.landing .field :is(input, textarea):focus { border-color: var(--lime); box-shadow: none; }
.landing .field :is(input, textarea)[aria-invalid=true] { border-color: var(--l-error); }
.landing .field textarea { height: 320px; min-height: 160px; resize: vertical; }
.landing .field--short { max-width: 256px; }
.landing .field--short input[type=text] { max-width: none; }
.age { position: relative; }
.age input { padding-right: 56px !important; }
.age__steps { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); display: grid; opacity: .5; }
.age__step { display: block; padding: 0; border: 0; background: none; cursor: pointer; line-height: 0; }
.age__step:hover { opacity: .7; }
.landing .field__meta { padding: 0 8px; font-size: 20px; line-height: 24px; letter-spacing: .2px; color: var(--forest); }
.landing .minor-note { display: grid; gap: 24px; background: rgba(221, 107, 32, .1); border: 0; border-radius: 40px; padding: 40px;
  font-size: 20px; line-height: 24px; letter-spacing: .2px; }
.landing .minor-note__title { margin: 0 !important; font: 500 24px/24px var(--font-display); letter-spacing: .48px; }
.landing .disclaimer { display: grid; gap: 24px; background: var(--lime); border-radius: 40px; padding: 40px; color: var(--forest);
  font-size: 20px; line-height: 24px; letter-spacing: .2px; }
.landing .disclaimer__phones { margin: 0 !important; font: 500 24px/24px var(--font-display); letter-spacing: .48px; }
.checks { display: grid; gap: 16px; }
.check { display: grid; grid-template-columns: 24px 1fr; gap: 16px; align-items: start; padding: 0 8px;
  font-size: 20px; line-height: 24px; letter-spacing: .2px; }
.check input { appearance: none; width: 24px; height: 24px; margin: 0; border: 2px solid transparent; border-radius: 8px;
  background: var(--warm) center / 16px auto no-repeat; cursor: pointer; }
.check input:checked { background-color: var(--lime); background-image: url(icons/check.svg); }
.check input:focus-visible { outline: 3px solid rgba(62, 154, 78, .5); outline-offset: 2px; }
.check input[aria-invalid=true] { border-color: var(--l-error); }
.check label { cursor: pointer; }
.check a { color: inherit; text-decoration: underline; }
.form__send { display: grid; gap: 48px; }
.form-alert { background: rgba(168, 69, 47, .15); color: var(--l-error); border-radius: 8px; padding: 24px 40px; font-size: 16px; line-height: 16px; font-weight: 500; }
.form-alert p { margin: 0; }
.form-alert p + p { margin-top: 8px; }
.btn--send.is-idle, .btn--send.is-idle:hover { background: #c9d3cc; color: #fff; }

/* FAQ */
.faq { display: grid; gap: 48px; padding-top: 80px; }
.faq__title { text-align: center; font: 500 40px/40px var(--font-display); color: #fff; }
.faq__list { display: grid; gap: 16px; }
.faq__item { background: var(--paper); border-radius: 40px; padding: 40px; }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 32px; cursor: pointer; list-style: none;
  font: 500 32px/32px var(--font-display); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__chevron { flex: none; transition: transform .2s; }
.faq__item[open] .faq__chevron { transform: rotate(180deg); }
.faq__item p { margin: 24px 0 0; font-size: 24px; line-height: 32px; }

/* Thank-you and under-age screens replace the whole page content. */
.landing .landing__done { max-width: 800px; padding-top: 80px; padding-bottom: 0; }
.landing .card--done { gap: 0; justify-items: center; text-align: center; padding: 40px; }
.landing .card--done p { margin: 16px 0 0; max-width: none; color: var(--forest); font-size: 24px; line-height: 32px; }
.landing .card--done .btn { margin-top: 40px; }
.landing .done__icon { width: 96px; height: 96px; border-radius: 0; background: none; display: grid; place-items: center; margin-bottom: 16px; }
.done__icon > img { grid-area: 1 / 1; }
.done__title { font: 500 40px/40px var(--font-display); color: var(--forest); }

/* Phones (Figma mobile frame, 390 wide) */
@media (max-width: 640px) {
  .hero { gap: 32px; padding-top: 24px; padding-bottom: 24px; }
  .lockup { gap: 6px; }
  .lockup__logo { width: 64px; height: auto; }
  .lockup__x { width: 5px; height: auto; }
  .lockup__date-img { width: 126px; }
  .phrases { zoom: .44; }
  .bars { gap: 4px; }
  .bars__track { width: 25px; height: 2px; }
  .landing .card { border-radius: 24px; padding: 24px 24px 32px; }
  .landing__offer, .landing__form { padding-top: 32px; padding-bottom: 32px; }
  .landing__form { padding-top: 0; }
  .offer { gap: 32px; }
  .offer__main { gap: 32px; }
  .offer h1 { font-size: 28px; line-height: 28px; letter-spacing: 0; margin-bottom: -20px; }
  .lead { font-size: 14px; line-height: 16px; letter-spacing: .14px; }
  .btn--pill { width: 100%; min-height: 56px; padding: 20px 24px; font-size: 16px; line-height: 16px; letter-spacing: .32px; }
  .btn--cta img { width: 16px; }
  .benefits { gap: 16px; }
  .benefit { gap: 16px; }
  .benefit__icon { width: 32px; height: 32px; }
  .benefit__glyph { width: 16px; height: 24px; }
  .benefit__title { font-size: 24px; line-height: 24px; }
  .benefit__text { font-size: 14px; line-height: 16px; letter-spacing: .14px; }
  .landing .form { gap: 40px; }
  .landing .field { gap: 8px; }
  .landing .field label { padding: 0 4px; font-size: 14px; line-height: 16px; letter-spacing: .14px; }
  .landing .field :is(input, textarea) { padding: 14px; font-size: 14px; line-height: 16px; letter-spacing: .14px; }
  .landing .field textarea { height: 176px; }
  .landing .field--short { max-width: none; }
  .age__steps { right: 16px; }
  .landing .field__meta { padding: 0 4px; font-size: 13px; line-height: 16px; letter-spacing: .26px; }
  .landing .minor-note, .landing .disclaimer { border-radius: 24px; padding: 24px; font-size: 14px; line-height: 16px; letter-spacing: .14px; }
  .landing .minor-note__title, .landing .disclaimer__phones { font-size: 18px; line-height: 18px; letter-spacing: .36px; }
  .check { padding: 0; font-size: 14px; line-height: 16px; letter-spacing: .14px; }
  .form__send { gap: 40px; }
  .form-alert { padding: 16px 24px; font-size: 13px; line-height: 16px; letter-spacing: .26px; }
  .faq { gap: 32px; padding-top: 32px; }
  .faq__title { font-size: 28px; line-height: 28px; }
  .faq__list { gap: 8px; }
  .faq__item { border-radius: 24px; padding: 24px; }
  .faq__item summary { align-items: flex-start; gap: 24px; font-size: 18px; line-height: 20px; letter-spacing: .36px; }
  .faq__chevron { width: 16px; height: 16px; margin-top: 2px; }
  .faq__item p { font-size: 16px; line-height: 20px; }
  .landing__done { padding-top: 24px; }
  .landing .card--done { padding: 40px 24px 24px; }
  .landing .done__icon { width: 72px; height: 72px; }
  .done__rock { width: 72px; height: auto; }
  .done__check { width: 28px; height: auto; }
  .done__title { font-size: 28px; line-height: 28px; }
  .landing .card--done p { font-size: 16px; line-height: 20px; }
}
@media (min-width: 641px) and (max-width: 1100px) {
  .phrases { zoom: .8; }
  .offer h1 { font-size: 56px; line-height: 52px; }
}

/* With reduced motion: no animation, only the first phrase, on the plain green background. */
@media (prefers-reduced-motion: reduce) {
  html:has(.landing) { scroll-behavior: auto; }
  .sky__layer, .phrase, .phrase__line, .bars__fill, .btn--cta img { animation: none; transition: none; }
  .phrase--1 { opacity: 1; }
  .phrase--1 .phrase__line { clip-path: none; }
  .bars__fill--1 { transform: none; }
}

/* Document pages (privacy, login, errors) */
.doc { padding: 40px 0 64px; }
.doc__inner { max-width: 800px; }
.doc__back { margin: 0 0 24px; font-size: 14px; }
.doc h1 { font-size: clamp(30px, 5vw, 40px); }
.doc__meta { color: var(--muted); margin: 8px 0 32px; font-size: 14px; }
.doc h2 { font-size: 20px; margin: 36px 0 12px; }
.doc p, .doc li { font-size: 16px; line-height: 1.65; }
.doc p { margin: 0 0 12px; }
.doc ul { padding-left: 22px; margin: 0 0 12px; }
.doc li { margin-bottom: 6px; }
.doc li::marker { color: var(--brand); }
.login { text-align: center; display: grid; gap: 16px; }
.login p { margin: 0; }
.login .alert { text-align: left; }

/* Footer */
.footer { background: #10301a; color: #b7c8b3; font-size: 14px; padding: 36px 0; }
.footer__inner { display: grid; gap: 6px; }
.footer p { margin: 0; }
.footer a { color: #fff; }

/* Admin */
.is-admin { background: var(--admin-bg); }
.admin { padding: 24px 0 64px; }
.subnav { display: flex; gap: 20px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.subnav a { padding: 10px 0; color: var(--muted); text-decoration: none; font-weight: 600; font-size: 15px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.subnav a[aria-current] { color: var(--ink); border-color: var(--brand); }
.toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; text-decoration: none; color: var(--ink); font-size: 14px; font-weight: 500; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.tabs a[aria-current] { background: var(--ink); color: #fff; box-shadow: none; }
.count { font-size: 12px; opacity: .7; font-variant-numeric: tabular-nums; }
.search { display: flex; gap: 8px; flex: 1 1 260px; max-width: 420px; }
.search input { padding: 8px 12px; border-radius: 10px; }
.table-wrap { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 12px 14px; border-bottom: 1px solid #efefe6; vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: #fafaf5; }
.table td a { color: var(--ink); text-decoration: none; }
.table td a:hover { color: var(--brand-strong); text-decoration: underline; }
.table .num { color: var(--muted); font-variant-numeric: tabular-nums; }
.table .snippet { min-width: 240px; color: var(--muted); }
.table .snippet a { color: var(--muted); }
.row--warn td { background: var(--danger-soft); }
/* Phones: each request becomes a card — name, status and deadline first, then a tappable number and the text. */
@media (max-width: 760px) {
  .table--cards, .table--cards tbody { display: block; }
  .table--cards thead { display: none; }
  .table--cards tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px 16px; border-bottom: 1px solid #efefe6; }
  .table--cards tr:last-child { border-bottom: 0; }
  .table--cards td { display: block; padding: 0; border: 0; min-width: 0; }
  .table--cards .c-name { grid-area: 1 / 1; font-weight: 600; font-size: 15px; }
  .table--cards .c-status { grid-area: 1 / 2; justify-self: end; text-align: right; }
  .table--cards .c-due { grid-area: 2 / 1; }
  .table--cards .c-age { grid-area: 2 / 2; justify-self: end; color: var(--muted); font-size: 13px; }
  .table--cards .c-age::after { content: " лет"; }
  .table--cards .c-phone { grid-area: 3 / 1 / 4 / 3; font-size: 16px; font-weight: 600; padding: 2px 0; }
  .table--cards .c-phone a { color: var(--brand-strong); }
  .table--cards .c-q { grid-area: 4 / 1 / 5 / 3; }
  .table--cards .c-date { grid-area: 5 / 1; color: var(--muted); font-size: 12px; }
  .table--cards .c-id { grid-area: 5 / 2; justify-self: end; font-size: 12px; }
  .table--cards .c-id::before { content: "№"; }
}
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pill--new { background: var(--brand-soft); color: var(--brand-strong); }
.pill--in_progress { background: var(--info-soft); color: var(--info); }
.pill--overdue { background: var(--danger-soft); color: var(--danger); }
.pill--answered { background: #ececec; color: #555; }
.who-small { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }

/* Time left until the deadline. Under an hour is amber, past it is red. */
.due { display: inline-block; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.due--ok { color: var(--ink); }
.due--soon { color: #8a5a00; background: #fff1cc; padding: 2px 8px; border-radius: 999px; }
.due--late { color: var(--danger); background: var(--danger-soft); padding: 2px 8px; border-radius: 999px; }
.due--done { color: var(--muted); font-weight: 500; }
.table tbody tr.row--soon { box-shadow: inset 3px 0 0 #e0a800; }
.table tbody tr.row--late { box-shadow: inset 3px 0 0 var(--danger); }
.tabs a.tab--alert:not([aria-current]) { color: var(--danger); box-shadow: inset 0 0 0 1px #f0cfcc; }

.banner { background: #fff1cc; color: #5c3d00; border-radius: var(--radius); padding: 12px 16px; margin-top: 16px; font-size: 14px; }
.banner p { margin: 0; }
.banner p + p { margin-top: 6px; }
.empty { background: #fff; border-radius: var(--radius); padding: 40px 16px; text-align: center; color: var(--muted); }
.pager { display: flex; justify-content: center; align-items: center; gap: 16px; margin: 20px 0; font-size: 14px; flex-wrap: wrap; }
.flash { background: var(--brand-soft); color: #2f5a17; padding: 12px 16px; border-radius: var(--radius); margin-bottom: 16px; font-weight: 500; }
.back { margin: 0 0 16px; font-size: 14px; }
.detail { display: grid; gap: 20px; align-items: start; }
@media (min-width: 900px) { .detail { grid-template-columns: minmax(0, 1fr) 340px; } }
.detail__side { display: grid; gap: 20px; }
.detail__side .card { display: grid; gap: 16px; padding: 24px; }
.detail__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.detail__head p { margin: 0 0 4px; }
.detail__badges { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.actions form { display: grid; gap: 10px; }
.actions p { margin: 0; }
.answer fieldset { border: 0; padding: 0; margin: 0; }
.answer legend { font-size: 14px; font-weight: 600; margin-bottom: 8px; padding: 0; }
.channels { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.channel { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; box-shadow: inset 0 0 0 1.5px var(--line); font-size: 14px; cursor: pointer; }
.channel:has(input:checked) { box-shadow: inset 0 0 0 2px var(--brand); background: var(--brand-soft); }
.channel input { accent-color: var(--brand-strong); margin: 0; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; margin: 0 0 24px; font-size: 15px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
@media (max-width: 520px) { .facts { grid-template-columns: 1fr; gap: 2px; } .facts dd { margin-bottom: 10px; } }
.phone { font-size: 18px; font-weight: 600; color: var(--ink); text-decoration: none; }
.label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 8px; }
.question { background: #fafaf5; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; white-space: normal; overflow-wrap: anywhere; line-height: 1.6; }
.card--danger { box-shadow: inset 0 0 0 1px #f0cfcc; }
.card--danger p { margin: 0; color: var(--muted); }