/* ОТЛАДКА ДУШИ — ПОЛНЫЙ CSS ДЛЯ ЗАМЕНЫ В РЕДАКТОРЕ
   Сохранены все исходные правила и их порядок.
   Повторяющиеся пояснения сокращены; последние изменения находятся в конце.
   Шрифты: font-size / font-weight / line-height.
   Отступы: margin — снаружи, padding — внутри, gap — между элементами.
*/

/* styles.css — порядок правил сохранён. */
@font-face { font-family: Pangolin; src: url("../fonts/pangolin-400.woff2"); font-display: swap; }
@font-face { font-family: Manrope; src: url("../fonts/manrope-400.woff2"); font-display: swap; }
@font-face { font-family: Manrope; src: url("../fonts/manrope-600.woff2"); font-weight: 600; font-display: swap; }
:root { --accent: #662288; --text: #24232b; --muted: #706777; --line: #eee8f0; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0px; background: rgb(255, 255, 255); color: var(--text); font: 16px / 1.75 Manrope, sans-serif; text-align: center; }
a { color: inherit; text-underline-offset: 5px; }
button { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
img { max-width: 100%; }
[hidden] { display: none !important; }
p { margin: 0px 0px 16px; }
header { max-width: 850px; margin: auto; padding: 24px; }
nav { display: flex; justify-content: center; gap: 30px; font-size: var(--font-body); }
nav a { text-decoration: none; }
nav a:hover { color: var(--accent); }
.hero { padding: 36px 20px 0px; }
.hero-heading h1 { font: clamp(48px, 7vw, 88px) / 1.15 Pangolin; margin: 0px 0px 20px; }
.subtitle { font-size: var(--font-body); line-height: 1.55; margin: 0px; }
.subtitle-main, .online-word, .given-name { white-space: nowrap; }
.online-word { position: relative; margin-left: 4px; }
.logo { display: block; width: 64px; height: auto; margin: 32px auto 25px; }
.role { font-size: var(--font-body); letter-spacing: 0.1em; margin: 0px 0px 6px; }
.name { font: clamp(27px, 3.4vw, 40px) / 1.35 Pangolin; margin: 0px; }
.intro { max-width: 730px; margin: 30px auto 0px; padding: 0px 24px; font-size: var(--font-body); color: var(--muted); }
.intro-copy { margin: 0px; }
.services, .bottom { max-width: 760px; margin: auto; padding: 0px 24px; }
.services { padding-top: 54px; }
.section { min-width: 0px; }
.service-section { padding: 0px 0px 48px; }
.service-section + .service-section { padding-top: 42px; border-top: 1px solid var(--line); }
h2 { font: 400 32px / 1.3 Pangolin; margin: 0px 0px 12px; }
.section-text { color: var(--muted); margin: 0px 0px 16px; }
.details-toggle { color: var(--accent); border: 0px; background: none; cursor: pointer; padding: 3px 6px; text-decoration: underline; text-underline-offset: 5px; font-size: var(--font-body); }
.details-content { max-width: 640px; margin: 22px auto 0px; }
.details-content p { font-size: var(--font-body); }
.price-note { margin: 24px 0px 8px; color: var(--accent); font-size: var(--font-body); font-weight: 600; line-height: 1.5; }
.service-price { display: block; }
.service-label { display: block; font-size: var(--font-body); font-weight: 400; color: var(--muted); }
.duration-note { font-size: var(--font-body); color: var(--muted); margin: 0px 0px 22px; }
.action-row { margin-top: 24px; }
.button { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--accent); border-radius: 30px; background: transparent; color: var(--accent); padding: 11px 30px; font-weight: 600; text-decoration: none; min-height: 44px; }
.button:focus-visible, .button:active { background: var(--accent); color: rgb(255, 255, 255); }
@media (hover: hover) {
  .button:not([aria-disabled="true"]):not(:disabled):hover { background: var(--accent); color: rgb(255, 255, 255); }
}
.status-line { font-size: var(--font-body); margin-top: 16px; }
.bottom { padding-top: 40px; border-top: 1px solid var(--line); }
.bottom > .section { padding-bottom: 36px; }
.bottom h2 { font-size: var(--font-body); }
.bottom .section-text, .doc-list { font-size: var(--font-body); }
.doc-link { margin-bottom: 12px; }
.doc-actions { display: block; color: var(--accent); }
#contacts a { overflow-wrap: anywhere; }
.footer { max-width: 712px; margin: 0px auto; padding: 24px 0px; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--font-body); }
.footer .intro-copy { margin: 0px 0px 18px; }
.footer-inner { font-size: var(--font-body); }
.site-test-notice { max-width: 712px; margin: 0px auto 24px; color: var(--muted); font-size: var(--font-body); }
#trial { max-width: 660px; padding: 32px 24px 0px; margin: auto; }
#trial ul { list-style: none; padding: 0px; }
.messenger-options { padding: 28px; }
.messenger-dialog { width: min(520px, 100% - 32px); max-height: calc(100dvh - 32px); padding: 0px; border: 1px solid var(--line); border-radius: 10px; background: white; color: var(--text); box-shadow: rgba(36, 35, 43, 0.133) 0px 16px 60px; }
.messenger-dialog::backdrop { background: rgba(36, 35, 43, 0.333); }
.messenger-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }
.messenger-status { font-size: var(--font-body); margin-top: 20px; }
.messenger-links [aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 10; background: white; padding: 10px; }
.skip-link:focus { top: 10px; }
.slot-preview { margin: 22px auto 0px; max-width: 620px; font-size: var(--font-body); color: var(--muted); }
.slot-date { font-size: var(--font-body); font-weight: 600; color: var(--text); margin: 0px 0px 12px; }
.slot-controls { display: grid; grid-template-columns: 32px minmax(0px, 1fr) 32px; align-items: center; gap: 8px; }
.slot-arrow { width: 32px; min-height: 44px; border: 0px; background: transparent; color: var(--accent); font-size: var(--font-body); cursor: pointer; padding: 0px; }
.slot-arrow:disabled { opacity: 0.25; cursor: default; }
.slot-track { display: flex; gap: 7px; overflow: auto hidden; scrollbar-width: none; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; touch-action: pan-x pan-y; cursor: grab; user-select: none; padding: 4px 0px; }
.slot-track::-webkit-scrollbar { display: none; }
.slot-track.dragging { cursor: grabbing; scroll-snap-type: none; }
.slot-time { flex: 0 0 calc(16.6667% - 5.83333px); min-width: 0px; min-height: 46px; border: 1px solid rgb(216, 198, 227); border-radius: 8px; background: rgb(250, 247, 252); display: flex; align-items: center; justify-content: center; font-size: var(--font-body); color: var(--accent); scroll-snap-align: start; font-variant-numeric: tabular-nums; white-space: nowrap; }
.slot-context { font-size: var(--font-body); margin: 12px auto 0px; line-height: 1.6; max-width: 520px; }
.slot-status { margin: 0px; }
.slot-track:focus-visible { outline-offset: 2px; }
@media (max-width: 650px) {
  header { padding: 20px 14px; }
  nav { gap: 22px; font-size: var(--font-body); }
  .hero { padding-top: 24px; }
  .hero-heading h1 { font-size: var(--font-body); margin-bottom: 16px; }
  .subtitle { font-size: var(--font-body); }
  .subtitle .online-word { display: block; width: max-content; margin: 7px auto 0px; }
  .given-name { display: block; }
  .name { font-size: var(--font-body); }
  .logo { margin: 26px auto 22px; width: 58px; }
  .intro { font-size: var(--font-body); margin-top: 24px; }
  .services { padding-top: 40px; }
  .services, .bottom { padding-left: 16px; padding-right: 16px; }
  .service-section { padding-bottom: 36px; }
  .service-section + .service-section { padding-top: 32px; }
  h2 { font-size: var(--font-body); }
  .footer { margin: 0px 24px; }
  .site-test-notice { margin: 0px 24px 24px; }
  .slot-controls { grid-template-columns: 26px minmax(0px, 1fr) 26px; gap: 4px; }
  .slot-arrow { width: 26px; }
  .slot-track { gap: 4px; }
  .slot-time { flex-basis: calc(16.6667% - 3.33333px); font-size: var(--font-body); min-height: 42px; border-radius: 6px; }
  .slot-date { font-size: var(--font-body); }
  .price-note { margin-top: 20px; }
  .slot-context { font-size: var(--font-body); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
:root { --font-body: 17.6px; --font-accent: 17.6px; --font-heading: 35.2px; }
body, button, .section-text, .details-content p, .slot-time, .slot-arrow, .slot-date, .slot-day-caption, .duration-note, .role, .footer, .footer-inner, .site-test-notice, .bottom .section-text, .doc-list, .status-line, nav { font-size: var(--font-body); }
h2, .bottom h2, .name { font-size: var(--font-heading); }
.subtitle, .price-note { font-size: var(--font-accent); }
.hero-heading h1 { font-size: clamp(52.8px, 7.7vw, 96.8px); }
.online-word { margin-left: 0px; }
.slot-controls { position: relative; padding-top: 36px; }
.slot-date { position: absolute; top: 0px; left: 40px; right: 40px; height: 30px; margin: 0px; overflow: hidden; text-align: left; pointer-events: none; font-weight: 600; }
.slot-day-caption { position: absolute; top: 0px; height: 30px; line-height: 30px; white-space: nowrap; overflow: hidden; padding-left: 6px; }
.slot-day-caption.clipped { mask-image: linear-gradient(to right, rgb(0, 0, 0) 0%, rgb(0, 0, 0) calc(100% - 22px), transparent 100%); }
.slot-day-caption.day-boundary { border-left: 1px solid rgb(185, 156, 204); }
.slot-day-caption[hidden] { display: none; }
.slot-time { position: relative; }
.slot-time.day-start::before { content: ""; position: absolute; left: -4px; top: -4px; bottom: -4px; border-left: 1px solid rgb(185, 156, 204); }
.slot-time.day-start { overflow: visible; }
.doc-link a { color: var(--accent); }
@media (max-width: 650px) {
  :root { --font-body: 15.4px; --font-accent: 15.4px; --font-heading: 30.8px; }
  .hero-heading h1 { font-size: clamp(46.2px, 11.55vw, 68.2px); }
  .services, .bottom { padding-left: 12px; padding-right: 12px; }
  .slot-controls { grid-template-columns: 22px minmax(0px, 1fr) 22px; gap: 4px; }
  .slot-arrow { width: 22px; }
  .slot-date { left: 26px; right: 26px; }
  .slot-time.day-start::before { left: -3px; }
  .slot-day-caption { padding-left: 4px; }
}
.hero-heading h1, .name, h2, .bottom h2 { font-size: var(--font-heading); }
.hero { padding-top: 22px; }
.hero .logo { margin: 0px auto 20px; width: 64px; }
.hero-heading h1 { margin-bottom: 24px; }
.role { font-family: Manrope, sans-serif; font-size: var(--font-body); letter-spacing: 0px; margin-bottom: 6px; }
.intro { max-width: 1120px; margin: 64px auto 0px; padding: 0px 28px; color: rgb(73, 65, 79); }
.intro-lead { max-width: 780px; margin: 0px auto 32px; color: rgb(36, 35, 43); font-weight: 600; }
.intro-layout { display: grid; grid-template-columns: minmax(0px, 1fr) minmax(0px, 1.1fr); gap: 48px; align-items: center; }
.intro-text { text-align: left; }
.intro-text .intro-copy { margin: 0px 0px 16px; }
.intro-text .intro-copy:last-child { margin-bottom: 0px; }
.emotion-gallery { min-width: 0px; width: 100%; margin: 0px; }
.emotion-track { display: flex; gap: 16px; overflow: auto hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; touch-action: pan-x pan-y; padding: 6px 0px 12px; user-select: none; }
.emotion-track::-webkit-scrollbar { display: none; }
.emotion-scene { flex: 0 0 200px; aspect-ratio: 1 / 1; min-width: 0px; margin: 0px; scroll-snap-align: start; }
.emotion-scene img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.emotion-navigation { display: flex; justify-content: center; gap: 24px; margin-top: 8px; }
.emotion-arrow { border: 1px solid var(--line); background: rgb(255, 255, 255); color: var(--accent); border-radius: 50%; width: 44px; height: 44px; cursor: pointer; font-size: var(--font-body); }
.emotion-arrow:disabled { opacity: 0.3; cursor: default; }
.emotion-track.is-draggable { cursor: grab; }
.emotion-track.dragging { cursor: grabbing; scroll-snap-type: none; }
.emotion-track:focus-visible { outline-offset: 2px; }
@media (max-width: 900px) {
  .intro-layout { grid-template-columns: 1fr; gap: 24px; }
  .intro-text { max-width: 640px; margin: auto; }
  .emotion-scene { flex-basis: 200px; }
}
@media (max-width: 650px) {
  .hero .logo { width: 58px; margin-bottom: 18px; }
  .hero-heading h1 { font-size: var(--font-heading); }
  .intro { margin-top: 48px; padding: 0px 20px; }
  .intro-lead { margin-bottom: 28px; }
  .intro-layout { gap: 20px; }
  .emotion-track { --scene-width: min(58vw,220px); gap: 14px; padding-left: calc((100% - var(--scene-width))/2); padding-right: calc((100% - var(--scene-width))/2); scroll-padding-inline: calc((100% - var(--scene-width))/2); }
  .emotion-scene { flex-basis: var(--scene-width); }
}
.hero-heading h1 { font-size: clamp(48.4px, 6.16vw, 77px); margin-bottom: 18px; }
.hero .intro-lead { margin: 0px auto; max-width: 800px; }
.hero-person { margin-top: 30px; }
.intro { margin-top: 76px; }
.intro-layout { gap: 40px; }
.emotion-gallery { container-type: inline-size; max-width: 520px; margin-inline: auto; }
.emotion-track { --scene-width: calc((100cqw - 32px)/2); gap: 16px; padding-inline: calc((100% - var(--scene-width))/2); scroll-padding-inline: calc((100% - var(--scene-width))/2); mask-image: linear-gradient(to right, transparent, rgb(0, 0, 0) 25%, rgb(0, 0, 0) 75%, transparent); }
.emotion-scene { flex: 0 0 var(--scene-width); width: var(--scene-width); height: var(--scene-width); aspect-ratio: 1 / 1; }
#trial.welcome-gift { position: relative; max-width: 660px; width: calc(100% - 48px); margin: 200px auto 0px; padding: 84px 34px 30px; border: 1px solid rgb(187, 163, 202); border-radius: 0px; background: rgb(255, 255, 255); }
.gift-character { position: absolute; width: 160px; height: 200px; object-fit: contain; left: 50%; top: -140px; transform: translateX(-50%); pointer-events: none; }
#welcomeBonusText { margin: 0px 0px 12px; font-weight: 600; }
#welcomeRateText { margin: 0px; color: var(--text); }
.services { padding-top: 76px; }
@media (max-width: 650px) {
  .hero-heading h1 { font-size: clamp(41.8px, 11vw, 59.4px); }
  .hero-person { margin-top: 28px; }
  .intro { margin-top: 56px; }
  .intro-layout { gap: 28px; }
  .emotion-track { --scene-width: calc((100cqw - 28px)/2); gap: 14px; }
  #trial.welcome-gift { margin-top: 180px; padding: 80px 22px 26px; width: calc(100% - 40px); }
  .services { padding-top: 60px; }
}
.intro-layout { grid-template-columns: minmax(0px, 1fr); gap: 32px; }
.intro-text { width: 100%; max-width: 760px; margin-inline: auto; text-align: left; }
.emotion-gallery { position: relative; max-width: 1064px; }
.emotion-track { --scene-gap: 16px; --scene-width: calc((100cqw - 4 * var(--scene-gap))/5); gap: var(--scene-gap); padding-inline: 0px; scroll-padding-inline: 0px; mask-image: linear-gradient(to right, transparent 0%, rgb(0, 0, 0) 40%, rgb(0, 0, 0) 60%, transparent 100%); }
.emotion-navigation { position: absolute; inset: 0px; display: flex; justify-content: space-between; align-items: center; gap: 0px; margin: 0px; pointer-events: none; }
.emotion-arrow { pointer-events: auto; background: rgba(255, 255, 255, 0.85); box-shadow: rgba(102, 34, 136, 0.04) 0px 2px 12px; position: relative; z-index: 1; }
#trial.welcome-gift { border-radius: 18px; padding-top: 64px; }
.gift-character { width: 130px; height: 164px; top: -114px; }
@media (max-width: 650px) {
  .intro-layout { gap: 28px; }
  .emotion-track { --scene-gap: 6px; --scene-width: calc((100cqw - 4 * var(--scene-gap))/5); }
  #trial.welcome-gift { padding-top: 64px; }
  .emotion-arrow { width: 44px; height: 44px; }
}
:root { --mascot-gallery-width: min(1064px,calc(100vw - 56px)); --mascot-scene-width: calc((var(--mascot-gallery-width) - 64px)/5); --character-height: calc(var(--mascot-scene-width)*.52); }
.emotion-track { --scene-width: var(--mascot-scene-width); padding-inline: calc((100% - var(--scene-width))/2); scroll-padding-inline: calc((100% - var(--scene-width))/2); mask-image: linear-gradient(to right, transparent 0%, transparent 9%, rgb(0, 0, 0) 40%, rgb(0, 0, 0) 60%, transparent 91%, transparent 100%); }
.emotion-scene { position: relative; overflow: hidden; }
.emotion-scene img { position: absolute; max-width: none; width: calc(var(--character-height)*var(--art-scale)); height: calc(var(--character-height)*var(--art-scale)); left: 50%; transform: translateX(-50%); bottom: calc((var(--scene-width) - var(--character-height))/2 - var(--character-height)*var(--art-tail)); }
.emotion-arrow { border: 0px; border-radius: 0px; background: transparent; box-shadow: none; color: var(--accent); font-weight: 600; }
#trial.welcome-gift { margin-top: 88px; padding: 30px 34px calc(var(--character-height)*.85 + 24px); }
.gift-character { width: calc(var(--character-height)*409/456); height: calc(var(--character-height)*512/456); top: auto; bottom: calc(var(--character-height)*-.3); }
.services { padding-top: calc(76px + var(--character-height)*.3); }
@media (max-width: 650px) {
  :root { --mascot-gallery-width: calc(100vw - 40px); --mascot-scene-width: calc((var(--mascot-gallery-width) - 12px)/3); }
  .emotion-track { --scene-width: var(--mascot-scene-width); mask-image: linear-gradient(to right, transparent 0%, transparent 14%, rgb(0, 0, 0) 34%, rgb(0, 0, 0) 66%, transparent 86%, transparent 100%); }
  #trial.welcome-gift { margin-top: 64px; padding: 26px 22px calc(var(--character-height)*.85 + 24px); }
  .services { padding-top: calc(60px + var(--character-height)*.3); }
}
.emotion-scene.scene-anxiety { --art-scale: 1.213270; --art-tail: 0.099526; }
.emotion-scene.scene-couple-distance { --art-scale: 1.984496; --art-tail: 0.399225; }
.emotion-scene.scene-sadness { --art-scale: 1.254902; --art-tail: 0.127451; }
.emotion-scene.scene-parent-child { --art-scale: 1.488372; --art-tail: 0.188953; }
.emotion-scene.scene-overload { --art-scale: 1.546828; --art-tail: 0.111782; }
.emotion-scene.scene-family-tension { --art-scale: 1.510324; --art-tail: 0.224189; }
.emotion-scene.scene-rumination { --art-scale: 1.242718; --art-tail: 0.104369; }
.emotion-scene.scene-couple-listening { --art-scale: 1.828571; --art-tail: 0.310714; }
.emotion-scene.scene-tension { --art-scale: 1.221957; --art-tail: 0.088305; }
.emotion-scene.scene-rest { --art-scale: 1.575385; --art-tail: 0.283077; }
.emotion-scene.scene-confidence { --art-scale: 1.201878; --art-tail: 0.086854; }
.emotion-scene.scene-joy { --art-scale: 1.302799; --art-tail: 0.129771; }
.hero { padding-top: 48px; }
.hero .intro-lead { font-weight: 400; }
.intro-help, .intro-format { display: block; }
.intro-zoom, .intro-messengers { white-space: nowrap; }
.mobile-format-break { display: none; }
.intro { margin-top: 104px; }
#trial.welcome-gift { isolation: isolate; overflow: hidden; padding: 30px 34px 44px; box-shadow: rgba(102, 34, 136, 0.07) 0px 16px 54px, rgba(36, 35, 43, 0.024) 0px 3px 12px; border-color: rgb(229, 218, 236); }
.welcome-content { position: relative; z-index: 1; max-width: 500px; margin: auto; }
.welcome-present { display: block; width: 124px; height: 124px; object-fit: contain; margin: 0px auto 14px; }
.welcome-content h2 { margin-bottom: 18px; }
#welcomeBonusText { font-weight: 400; margin: 0px 0px 14px; line-height: 1.8; }
#welcomeRateText { color: rgb(73, 65, 79); }
.soap-bubbles { position: absolute; inset: 0px; overflow: hidden; pointer-events: none; z-index: 0; }
.soap-bubble { position: absolute; bottom: -80px; left: var(--bubble-left); width: var(--bubble-size); height: var(--bubble-size); border-radius: 50%; border: 1px solid rgba(175, 141, 197, 0.3); background: radial-gradient(at 30% 24%, rgba(255, 255, 255, 0.93) 0%, rgba(255, 255, 255, 0.79) 6%, rgba(255, 255, 255, 0) 18%), radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0) 46%, rgba(240, 201, 221, 0.3) 71%, rgba(188, 223, 231, 0.35) 92%, rgba(255, 255, 255, 0.61) 100%); box-shadow: rgba(255, 255, 255, 0.77) 3px 2px 8px inset, rgba(181, 205, 224, 0.17) -3px -2px 8px inset; opacity: 0; animation: welcome-bubble var(--bubble-duration) var(--bubble-delay) linear infinite; }
.soap-bubble:nth-child(1) { --bubble-left: 5%; --bubble-size: 42px; --bubble-duration: 19s; --bubble-delay: -4s; --bubble-drift: 34px; }
.soap-bubble:nth-child(2) { --bubble-left: 21%; --bubble-size: 24px; --bubble-duration: 23s; --bubble-delay: -12s; --bubble-drift: -26px; }
.soap-bubble:nth-child(3) { --bubble-left: 39%; --bubble-size: 58px; --bubble-duration: 26s; --bubble-delay: -7s; --bubble-drift: 46px; }
.soap-bubble:nth-child(4) { --bubble-left: 60%; --bubble-size: 32px; --bubble-duration: 18s; --bubble-delay: -10s; --bubble-drift: -38px; }
.soap-bubble:nth-child(5) { --bubble-left: 81%; --bubble-size: 52px; --bubble-duration: 24s; --bubble-delay: -17s; --bubble-drift: -28px; }
.soap-bubble:nth-child(6) { --bubble-left: 93%; --bubble-size: 20px; --bubble-duration: 20s; --bubble-delay: -3s; --bubble-drift: -42px; }
.soap-bubble:nth-child(7) { --bubble-left: 11%; --bubble-size: 64px; --bubble-duration: 28s; --bubble-delay: -19s; --bubble-drift: 15px; }
.soap-bubble:nth-child(8) { --bubble-left: 70%; --bubble-size: 26px; --bubble-duration: 22s; --bubble-delay: -6s; --bubble-drift: 30px; }
@keyframes welcome-bubble {
  0% { transform: translate3d(0px, 0px, 0px) scale(0.8); opacity: 0; }
  12% { opacity: 0.6; }
  80% { opacity: 0.5; }
  100% { transform: translate3d(var(--bubble-drift),-620px,0) scale(1.12); opacity: 0; }
}
.bubbles-paused .soap-bubble { animation-play-state: paused; }
.bubble-toggle { position: absolute; right: 8px; bottom: 8px; z-index: 2; width: 44px; height: 44px; border: 0px; background: transparent; color: var(--accent); cursor: pointer; display: grid; place-items: center; padding: 0px; }
.bubble-toggle::before { content: ""; width: 9px; height: 12px; border-left: 3px solid; border-right: 3px solid; opacity: 0.65; }
.bubble-toggle[aria-pressed="true"]::before { width: 0px; height: 0px; border-width: 6px 0px 6px 9px; border-style: solid none solid solid; border-color: transparent currentcolor; border-image: none; }
.services { padding-top: 76px; }
@media (max-width: 650px) {
  .hero { padding-top: 36px; }
  .mobile-format-break { display: block; }
  .intro { margin-top: 80px; }
  :root { --mascot-scene-width: calc((var(--mascot-gallery-width) - 12px)/2); }
  .emotion-track { mask-image: linear-gradient(to right, transparent 0%, transparent 10%, rgb(0, 0, 0) 26%, rgb(0, 0, 0) 74%, transparent 90%, transparent 100%); }
  #trial.welcome-gift { padding: 26px 22px 44px; }
  .welcome-present { width: 116px; height: 116px; }
  .services { padding-top: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .soap-bubble { animation: auto ease 0s 1 normal none running none; opacity: 0.18; transform: translateY(-180px); }
  .bubble-toggle { display: none; }
}
.hero .logo { width: 56px; }
.emotion-track { mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.01) 4%, rgba(0, 0, 0, 0.04) 9%, rgba(0, 0, 0, 0.12) 15%, rgba(0, 0, 0, 0.32) 23%, rgba(0, 0, 0, 0.63) 31%, rgba(0, 0, 0, 0.9) 37%, rgb(0, 0, 0) 40%, rgb(0, 0, 0) 60%, rgba(0, 0, 0, 0.9) 63%, rgba(0, 0, 0, 0.63) 69%, rgba(0, 0, 0, 0.32) 77%, rgba(0, 0, 0, 0.12) 85%, rgba(0, 0, 0, 0.04) 91%, rgba(0, 0, 0, 0.01) 96%, transparent 100%); }
.emotion-arrow { display: grid; place-items: center; width: 48px; height: 48px; }
.emotion-arrow::before { content: ""; display: block; width: 18px; height: 18px; border-left: 2px solid; border-bottom: 2px solid; transform: rotate(45deg); }
#emotionNext::before { transform: rotate(225deg); }
.welcome-present { width: calc(var(--character-height)*512/391*.88); height: calc(var(--character-height)*512/391*.88); }
.welcome-points { display: inline-block; white-space: nowrap; }
.welcome-register { margin-top: 22px; }
.soap-bubble { animation-duration: calc(var(--bubble-duration)*.55); }
@media (max-width: 650px) {
  .hero .logo { width: 50px; }
  .emotion-track { mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.016) 6%, rgba(0, 0, 0, 0.08) 12%, rgba(0, 0, 0, 0.22) 17%, rgba(0, 0, 0, 0.5) 21%, rgba(0, 0, 0, 0.8) 24%, rgb(0, 0, 0) 27%, rgb(0, 0, 0) 73%, rgba(0, 0, 0, 0.8) 76%, rgba(0, 0, 0, 0.5) 79%, rgba(0, 0, 0, 0.22) 83%, rgba(0, 0, 0, 0.08) 88%, rgba(0, 0, 0, 0.016) 94%, transparent 100%); }
}
#trial.welcome-gift { padding-bottom: 60px; }
.emotion-scene.scene-loneliness { --art-scale: 1.600000; --art-tail: 0.265625; }
.emotion-scene.scene-shame { --art-scale: 1.280000; --art-tail: 0.135000; }
.emotion-scene.scene-guilt { --art-scale: 1.414365; --art-tail: 0.237569; }
.emotion-scene.scene-relief { --art-scale: 1.501466; --art-tail: 0.225806; }
.emotion-scene.scene-interest { --art-scale: 1.233735; --art-tail: 0.115663; }
.emotion-scene.scene-tenderness { --art-scale: 1.326425; --art-tail: 0.119171; }
@media (max-width: 650px) {
  .emotion-track { mask-image: none; }
  .emotion-navigation { position: static; inset: auto; justify-content: center; gap: 24px; margin-top: 8px; }
}
.problem-gallery { max-width: 1000px; margin: auto; min-width: 0px; text-align: center; }
.problem-gallery h2 { font: 400 var(--font-body)/1.75 Manrope,sans-serif; margin: 0px 0px 68px; }
.problem-hand { display: inline-block; width: 0.85em; height: 1.1em; vertical-align: -0.2em; }
.problem-grid { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 40px 28px; min-width: 0px; }
.problem-card { min-width: 0px; text-align: center; }
.problem-card img { display: block; width: 75%; height: auto; max-width: 187.5px; aspect-ratio: 1 / 1; object-fit: contain; margin: 0px auto 12px; }
.problem-card p { font-size: var(--font-body); line-height: 1.65; color: rgb(73, 65, 79); margin: 0px; overflow-wrap: break-word; }
.problem-invitation { max-width: 660px; margin: 84px auto 0px; font-size: var(--font-body); line-height: 1.8; color: rgb(73, 65, 79); }
@media (max-width: 650px) {
  .problem-gallery h2 { margin-bottom: 52px; }
  .problem-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 32px 18px; }
  .problem-card img { margin-bottom: 10px; }
  .problem-invitation { margin-top: 68px; }
}
.intro-format-spacer { height: 1.75em; }
.problem-chevron { display: block; width: 11px; height: 11px; margin: 16px auto 0px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg); animation: 1.5s ease-in-out 0s 3 normal none running problem-nudge; }
@keyframes problem-nudge {
  0%, 100% { transform: translateY(0px) rotate(45deg); opacity: 0.55; }
  50% { transform: translateY(6px) rotate(45deg); opacity: 1; }
}
.problem-show-more { margin-top: 34px; }
.problem-fallback { margin-top: 40px; }
.problem-load-status { position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0px; }
@media (max-width: 650px) {
  .intro-format-spacer { height: 3.5em; }
  .problem-fallback { margin-top: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .problem-chevron { animation: auto ease 0s 1 normal none running none; }
}
@media (max-width: 650px) {
  .problem-card img { width: 93.75%; max-width: 234.375px; position: relative; left: 50%; transform: translateX(-50%); margin-inline: 0px; }
}
.hero .name { font-size: 37.4px; }
@media (max-width: 650px) {
  .hero .name { font-size: 33px; }
}
.problem-open { display: block; width: 75%; max-width: 187.5px; padding: 0px; border: 0px; background: transparent; margin: 0px auto 12px; cursor: zoom-in; }
.problem-card .problem-open img { width: 100%; max-width: none; height: auto; margin: 0px; position: static; transform: none; }
@media (hover: hover) {
  .problem-open:hover img { opacity: 0.88; }
}
@media (max-width: 650px) {
  .problem-open { width: 93.75%; max-width: 234.375px; position: relative; left: 50%; transform: translateX(-50%); margin: 0px 0px 10px; }
}
html { scrollbar-gutter: stable; }
html.problem-viewer-open, html.problem-viewer-open body { overflow: hidden; scroll-behavior: auto; overflow-anchor: none; }
.problem-viewer { position: fixed; inset: 0px; width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0px; padding: 20px; border: 0px; background: rgb(255, 255, 255); color: var(--text); box-shadow: none; text-align: center; overflow: auto; }
.problem-viewer::backdrop { background: rgb(255, 255, 255); }
.viewer-content { width: min(900px, 100%); height: 100%; min-height: 0px; margin: auto; padding: 36px 48px 12px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.viewer-stage { flex: 0 1 720px; width: 100%; max-height: min(720px, -136px + 100vw); min-height: 0px; display: flex; justify-content: center; align-items: center; touch-action: pan-y; }
.viewer-image { display: block; width: 100%; height: 100%; max-width: 720px; min-height: 0px; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.viewer-description { flex: 0 0 auto; font: 400 var(--font-body)/1.65 Manrope,sans-serif; color: var(--text); max-width: 680px; margin: 0px auto; overflow-wrap: break-word; }
.viewer-counter { flex: 0 0 auto; font: 400 var(--font-body)/1.5 Manrope,sans-serif; color: var(--muted); margin: 0px; }
.viewer-close, .viewer-arrow { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; padding: 0px; border: 0px; background: transparent; color: var(--accent); cursor: pointer; }
.viewer-close { right: max(12px,env(safe-area-inset-right)); top: max(12px,env(safe-area-inset-top)); }
.viewer-close span { position: relative; width: 22px; height: 22px; }
.viewer-close span::before, .viewer-close span::after { content: ""; position: absolute; left: 10px; top: 0px; width: 2px; height: 22px; background: currentcolor; transform: rotate(45deg); }
.viewer-close span::after { transform: rotate(-45deg); }
.viewer-arrow { top: 50%; transform: translateY(-50%); }
.viewer-prev { left: max(12px,env(safe-area-inset-left)); }
.viewer-next { right: max(12px,env(safe-area-inset-right)); }
.viewer-arrow span { display: block; width: 16px; height: 16px; border-top: 2px solid; border-right: 2px solid; transform: rotate(45deg); }
.viewer-prev span { transform: rotate(-135deg); }
@media (max-width: 650px) {
  .problem-viewer { padding: 12px 8px max(12px,env(safe-area-inset-bottom)); }
  .viewer-content { padding: 44px 20px 4px; gap: 10px; }
  .viewer-prev { left: 0px; }
  .viewer-next { right: 0px; }
  .viewer-stage { max-height: calc(-56px + 100vw); }
}
.problem-open, .viewer-close, .viewer-arrow { touch-action: manipulation; }
.problem-open.viewer-return-focus:focus { outline: none; }
/* logo-only-motion: название неподвижно, переливание только на логотипе. */
.hero-heading h1 { animation: none; background: none; color: var(--text); }
.logo-shimmer { position: relative; }
.logo-base { display: block; width: 100%; height: auto; }
.logo-shimmer::after { content: ""; position: absolute; inset: 0px; background: linear-gradient(100deg, transparent 0%, rgba(184, 173, 195, 0.2) 30%, rgba(198, 189, 204, 0.333) 52%, transparent 75%, rgba(184, 173, 195, 0.2) 100%) 0% 0% / 250% 100%; mask: url("../images/heart.svg") center center / contain no-repeat; pointer-events: none; animation: 9s ease-in-out 0s infinite alternate none running brand-soft-flow; }
@keyframes brand-soft-flow {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
.site-motion-paused .hero-heading h1, .site-motion-paused .logo-shimmer::after { animation-play-state: paused; }
#trial h2, #consultation h2, #messengerTitle { font: 600 var(--font-body)/1.65 Manrope,sans-serif; }
.services { padding-top: 62.5px; }
.service-section .consultation-art { display: block; width: 250px; max-width: 75%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; margin: 0px auto 14px; }
#consultation h2 { margin: 0px 0px 20px; }
.consultation-copy { color: var(--text); line-height: 1.8; margin: 0px auto 24px; max-width: 660px; }
.consultation-price { font: 400 var(--font-body)/1.75 Manrope,sans-serif; margin: 0px 0px 32px; color: var(--text); }
.available-title { font-size: var(--font-body); margin: 0px 0px 18px; }
.booking-days { max-width: 620px; margin: auto; font-size: var(--font-body); color: var(--text); }
.booking-days-list { display: grid; gap: 26px; }
.booking-day-label { margin: 0px 0px 10px; font-size: var(--font-body); font-weight: 600; }
.booking-day-times { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.booking-time { flex: 0 0 calc(16.6667% - 6.66667px); min-width: 0px; min-height: 42px; border: 1px solid rgb(216, 198, 227); border-radius: 6px; color: var(--accent); display: flex; align-items: center; justify-content: center; white-space: nowrap; font-size: var(--font-body); font-variant-numeric: tabular-nums; }
.booking-days-more { margin-top: 26px; }
@media (max-width: 650px) {
  .services { padding-top: 50px; }
  .booking-day-times { gap: 4px; }
  .booking-time { flex-basis: calc(16.6667% - 3.33333px); min-height: 38px; }
  .service-section .consultation-art { width: 220px; margin-bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-heading h1 { animation: auto ease 0s 1 normal none running none; background: none; color: var(--text); }
  .logo-shimmer::after { animation: auto ease 0s 1 normal none running none; display: none; }
}
.problem-actions, .booking-days-actions, #consultation .action-row { display: flex; justify-content: center; flex-wrap: wrap; align-items: center; gap: 12px; }
.problem-actions { margin-top: 34px; }
.problem-actions .problem-show-more { margin: 0px; }
.booking-days-actions { margin-top: 26px; }
.booking-days-actions .booking-days-more { margin: 0px; }
#chat-question h2, .slot-info-dialog h2 { font: 600 var(--font-body)/1.65 Manrope,sans-serif; margin: 0px 0px 20px; }
#chat-question .status-line { color: var(--text); margin: 0px 0px 20px; }
.booking-time-button { display: flex; align-items: center; justify-content: center; align-self: stretch; width: 100%; padding: 6px 0px; border: 0px; border-radius: inherit; background: transparent; color: inherit; cursor: pointer; font: inherit; }
@media (hover: hover) {
  .booking-time-button:hover { background: rgba(102, 34, 136, 0.04); }
}
.slot-info-dialog { width: min(520px, 100% - 32px); max-height: calc(100dvh - 32px); padding: 28px; border: 1px solid var(--line); border-radius: 10px; background: rgb(255, 255, 255); color: var(--text); font-size: var(--font-body); box-shadow: rgba(36, 35, 43, 0.133) 0px 16px 60px; }
.slot-info-dialog::backdrop { background: rgba(36, 35, 43, 0.333); }
.slot-info-dialog p { margin-bottom: 24px; }
.slot-info-dialog form { margin: 0px; }
.problem-actions, .booking-days-actions { flex-direction: column; gap: 12px; }
.registration-button { gap: 9px; }
.registration-icon { display: block; width: 20px; height: 20px; flex: 0 0 auto; }
.slot-info-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; }
#trial h2, #consultation h2, #chat-question h2 { font-size: calc(var(--font-body) + 2.2px); }
.consultation-gallery { position: relative; width: 360px; max-width: 100%; margin: 0px auto; }
.consultation-gallery .consultation-art { touch-action: pan-y; user-select: none; cursor: grab; }
.consultation-gallery .consultation-art:active { cursor: grabbing; }
.consultation-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0px; border: 0px; background: transparent; color: var(--accent); cursor: pointer; }
.consultation-arrow[hidden] { display: none; }
.consultation-prev { left: 0px; }
.consultation-next { right: 0px; }
.consultation-arrow span { display: block; width: 14px; height: 14px; border-top: 2px solid; border-right: 2px solid; transform: rotate(45deg); }
.consultation-prev span { transform: rotate(-135deg); }
.consultation-price-art { display: flex; align-items: center; justify-content: center; gap: 10px; width: 460px; max-width: 100%; margin: 0px auto 32px; }
.price-hourglass { display: block; width: 85px; height: 132px; object-fit: contain; flex: 0 0 auto; }
.price-tag { display: flex; align-items: center; justify-content: center; flex: 1 1 0%; min-width: 0px; min-height: 140px; padding: 30px 24px 30px 88px; background: url("../images/consultation/price-tag.webp") center center / 100% 100% no-repeat; }
.price-tag .consultation-price { margin: 0px; overflow-wrap: anywhere; }
@media (max-width: 650px) {
  .consultation-gallery { width: 330px; }
  .consultation-price-art { gap: 4px; }
  .price-hourglass { width: 64px; height: 104px; }
  .price-tag { min-height: 130px; padding: 26px 14px 26px 64px; }
}
.consultation-arrow, .viewer-arrow, .emotion-arrow { color: rgb(155, 140, 163); }
.consultation-arrow span, .viewer-arrow span { border-width: 1.5px; }
.emotion-arrow::before { border-width: 1.5px; }
.problem-chevron { border-color: rgb(155, 140, 163); border-width: 1.5px; }
@media (hover: hover) {
  .consultation-arrow:hover, .viewer-arrow:hover, .emotion-arrow:hover { color: rgb(117, 99, 126); }
}
.consultation-arrow:focus-visible, .viewer-arrow:focus-visible, .emotion-arrow:focus-visible { color: rgb(117, 99, 126); }
.consultation-price-row { display: flex; align-items: center; justify-content: center; gap: 12px; max-width: 100%; margin: 0px auto 32px; }
.price-coin { display: block; width: 58px; height: 58px; object-fit: contain; flex: 0 0 auto; }
.consultation-price-row .consultation-price { margin: 0px; min-width: 0px; text-align: left; }
.consultation-price-row strong { font-weight: 600; }
.booking-days { max-width: 100%; }
.booking-days-list { display: grid; grid-template-columns: repeat(5, minmax(0px, 1fr)); gap: 24px 12px; align-items: start; }
.booking-day-label { min-height: 3.5em; display: flex; align-items: center; justify-content: center; line-height: 1.5; margin-bottom: 10px; }
.booking-day-times { display: flex; flex-flow: column; justify-content: flex-start; align-items: stretch; gap: 8px; max-height: 192px; overflow: hidden auto; scrollbar-width: thin; scrollbar-color: rgb(216, 198, 227) transparent; }
.booking-day-times .booking-time { flex: 0 0 42px; width: 100%; min-height: 42px; white-space: nowrap; }
.booking-time-button { padding: 6px 2px; }
.booking-scroll-controls { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; }
.booking-scroll-arrow { width: 44px; height: 44px; padding: 0px; border: 0px; background: transparent; color: rgb(155, 140, 163); display: grid; place-items: center; cursor: pointer; }
.booking-scroll-arrow span { width: 10px; height: 10px; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: rotate(45deg); }
.booking-scroll-arrow.scroll-up span { transform: rotate(225deg); }
.booking-scroll-arrow:disabled { opacity: 0.25; cursor: default; }
@media (hover: hover) {
  .booking-scroll-arrow:not(:disabled):hover { color: rgb(117, 99, 126); }
}
@media (max-width: 999px) {
  .booking-days-list { grid-template-columns: repeat(3, minmax(0px, 1fr)); }
}
@media (max-width: 450px) {
  .booking-days-list { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 24px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .booking-day-times { scroll-behavior: auto; }
}
#trial.welcome-gift { border: 0px; box-shadow: none; }
.problem-card img { aspect-ratio: 4 / 3; }
.problem-open, .problem-card > img { width: 100%; max-width: 250px; }
.viewer-content { width: min(1100px, 100%); }
.viewer-stage { flex-basis: 750px; max-height: min(750px, -102px + 75vw); aspect-ratio: 4 / 3; }
.viewer-image { max-width: 1000px; aspect-ratio: 4 / 3; object-fit: contain; }
.price-coin { width: 76px; height: 72px; object-fit: contain; }
#trial.welcome-gift { padding-bottom: 44px; }
@media (max-width: 650px) {
  .problem-open, .problem-card > img { width: 100%; max-width: 312.5px; }
  .viewer-stage { max-height: calc(-42px + 75vw); }
}
#chat-question { border-top: 0px; }
.welcome-coverage { font: 400 var(--font-body)/1.75 Manrope,sans-serif; color: var(--text); margin: 4px auto 24px; max-width: 620px; }
.consultation-lines, .chat-lines { text-align: left; }
.consultation-price-row { flex-direction: column; gap: 8px; margin-bottom: 16px; }
.consultation-price-row .consultation-price { text-align: center; }
.consultation-price-row { flex-direction: row; gap: 12px; }
.booking-day-label { font-weight: 400; }
.consultation-open { display: block; width: 100%; border: 0px; padding: 0px; background: transparent; cursor: zoom-in; }
.consultation-open.viewer-return-focus:focus { outline: none; }
.video-viewer .viewer-stage { aspect-ratio: 3 / 2; max-height: min(650px, -90.6667px + 66.6667vw); }
.video-viewer .viewer-image { aspect-ratio: 3 / 2; }
@media (max-width: 650px) {
  .video-viewer .viewer-stage { max-height: calc(-37.3333px + 66.6667vw); }
}
.consultation-open .consultation-art, .consultation-open .consultation-art:active { cursor: zoom-in; }
@media (max-width: 650px) {
  #consultation .consultation-copy, #chat-question .consultation-copy { margin-left: 12px; margin-right: 12px; }
}
body, .problem-viewer, .messenger-dialog, .slot-info-dialog, #trial.welcome-gift { background-color: rgb(245, 243, 240); }
.problem-chevron { width: 14px; height: 14px; border-width: 2px; border-color: rgb(142, 104, 159); animation: 2.8s ease-in-out 0s infinite normal none running problem-nudge; }
@media (prefers-reduced-motion: reduce) {
  .problem-chevron { animation: auto ease 0s 1 normal none running none; }
}
.intro-surface { background: rgb(255, 255, 255); color: rgb(13, 13, 15); padding-bottom: 40px; }
.intro-surface .intro { max-width: 1200px; color: rgb(13, 13, 15); }
.intro-surface .problem-gallery { max-width: 1080px; }
.problem-grid { gap: 40px 30px; }
.problem-open, .problem-card > img { width: 100%; max-width: none; margin: 0px 0px 14px; cursor: pointer; }
.problem-card .problem-open img { width: 100%; max-width: none; margin: 0px; left: auto; transform: none; aspect-ratio: 4 / 3; }
.problem-card p { width: 100%; margin: 0px; color: rgb(13, 13, 15); font: 400 18px / 22px Manrope, Arial, sans-serif; text-align: center; }
.problem-actions { flex-direction: row; gap: 12px; }
.problem-actions .details-toggle { min-height: 48px; padding: 12px 20px; border: 0px; border-radius: 16px; background: rgb(242, 242, 242); color: rgb(13, 13, 15); font: 600 18px / 24px Manrope, Arial, sans-serif; text-decoration: none; cursor: pointer; }
@media (hover: hover) {
  .problem-actions .details-toggle:hover, #trial .welcome-register:hover { background: rgb(232, 232, 232); color: rgb(13, 13, 15); }
}
#trial.welcome-gift { width: calc(100% - 56px); max-width: 1080px; margin: 64px auto 0px; padding: 36px 42px; border: 0px; border-radius: 32px; background: rgb(255, 255, 255); box-shadow: rgba(13, 13, 15, 0.067) 0px 4px 28px; text-align: left; }
#trial .welcome-content { display: flex; align-items: center; gap: 36px; max-width: none; margin: 0px; }
#trial .welcome-present { width: 180px; height: 180px; flex: 0 0 180px; margin: 0px 0px 14px; }
.welcome-details { min-width: 0px; flex: 1 1 0%; }
#trial h2 { font: 600 28px / 32px Manrope, Arial, sans-serif; margin: 0px 0px 22px; color: rgb(13, 13, 15); }
#trial #welcomeBonusText, #trial #welcomeRateText { font: 400 18px / 24px Manrope, Arial, sans-serif; color: rgb(13, 13, 15); margin: 0px 0px 12px; }
#trial .welcome-register { min-height: 48px; margin-top: 12px; padding: 12px 18px; border: 0px; border-radius: 16px; background: rgb(242, 242, 242); color: rgb(13, 13, 15); font: 600 18px / 24px Manrope, Arial, sans-serif; }
#trial .soap-bubbles { display: none; }
@media (max-width: 650px) {
  .intro-surface { padding-bottom: 28px; }
  .intro-surface .intro { padding-inline: 16px; }
  .problem-grid { gap: 28px 30px; }
  .problem-open, .problem-card > img { width: 100%; max-width: none; left: auto; transform: none; margin-inline: 0px; }
  .problem-card p { font-size: 16px; line-height: 21px; }
  #trial.welcome-gift { width: calc(100% - 32px); margin-top: 48px; padding: 24px; border-radius: 32px; }
  #trial .welcome-content { flex-direction: column; align-items: flex-start; gap: 10px; }
  #trial .welcome-present { width: 130px; height: 130px; flex-basis: auto; align-self: center; }
  #trial h2 { font-size: 24px; line-height: 29px; margin-bottom: 18px; }
  #trial #welcomeBonusText, #trial #welcomeRateText { font-size: 16px; line-height: 23px; }
  #trial .welcome-register { font-size: 16px; line-height: 24px; }
  #trial .welcome-points { display: inline; white-space: normal; }
}
.problem-viewer, .problem-viewer::backdrop { background: rgb(255, 255, 255); }
.problem-invitation { color: rgb(13, 13, 15); }

/* situation-backgrounds.css — порядок правил сохранён. */
.problem-open, .problem-card > img { border-radius: 48px; overflow: hidden; background: rgb(245, 245, 245); }
.problem-viewer:not(.video-viewer) .viewer-stage { border-radius: 0px; background: transparent; }
@media (max-width: 650px) {
  .problem-open, .problem-card > img { border-radius: 40px; }
}

/* approved-typography.css — порядок правил сохранён. */
:root { --font-body: 18px; --font-accent: 18px; --font-heading: 18px; }
body { font-size: 18px; line-height: 1.5; }
.page :is(p, h1, h2, a, button, li) { line-height: 1.5; }
.page h2, #consultation h2, #chat-question h2 { font-family: Pangolin, cursive; font-size: 18px; font-weight: 400; line-height: 1.5; }
.hero-heading h1 { font-size: clamp(44px, 12vw, 100px); }
.hero .name { font-size: clamp(26px, 8.5vw, 42px); }
.problem-card p { font-size: 18px; line-height: 1.5; }
#problemTitle, #trial h2 { font-family: Manrope, sans-serif; font-size: 18px; line-height: 1.5; }
#problemTitle { font-weight: 400; }
#trial h2 { font-weight: 600; }
#trial #welcomeBonusText, #trial #welcomeRateText, #trial .welcome-register { font-size: 18px; line-height: 1.5; }
.intro { margin-top: 156px; }
.problem-invitation { margin-top: 126px; }
#trial.welcome-gift { margin-top: 96px; padding-top: 54px; }
.services { padding-top: 93.75px; }
#chat-question { padding-top: 63px; }
.bottom { padding-top: 60px; }
@media (max-width: 650px) {
  .intro { margin-top: 120px; }
  .problem-invitation { margin-top: 102px; }
  #trial.welcome-gift { margin-top: 72px; padding-top: 36px; }
  .services { padding-top: 75px; }
  #chat-question { padding-top: 48px; }
}
:root { --click-bg: #f2f2f2; --click-hover-bg: #e8e8e8; --click-active-bg: #dedede; --click-text: #0d0d0f; --click-radius: 16px; --invitation-gap: 126px; }
.hero .logo { width: 84px; height: auto; }
.hero .logo-base { display: block; width: 100%; height: auto; }
:is(.page, .messenger-dialog, .slot-info-dialog) :is(a[href], button, [role="button"]) { background: var(--click-bg) !important; color: var(--click-text) !important; border: 0 !important; border-radius: var(--click-radius); box-shadow: none !important; font-family: Manrope, sans-serif !important; font-size: var(--font-body, 18px) !important; font-weight: 400 !important; line-height: 1.5 !important; text-decoration: none !important; cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease; }
:is(.page, .messenger-dialog, .slot-info-dialog) :is(a[href], .button, .details-toggle) { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 18px !important; border-radius: var(--click-radius) !important; }
@media (hover: hover) {
  :is(.page, .messenger-dialog, .slot-info-dialog) :is(a[href], button, [role="button"]):not(:disabled):not([aria-disabled="true"]):hover { background: var(--click-hover-bg) !important; color: var(--click-text) !important; }
  #problemCollapse:hover, #bookingDaysCollapse:hover, #trial .welcome-register:hover, .registration-button:hover { background: var(--click-hover-bg) !important; color: var(--click-text) !important; }
}
:is(.page, .messenger-dialog, .slot-info-dialog) :is(a[href], button, [role="button"]):not(:disabled):not([aria-disabled="true"]):active { background: var(--click-active-bg) !important; }
:is(.page, .messenger-dialog, .slot-info-dialog) :is(button:disabled, [aria-disabled="true"]) { opacity: 0.45; cursor: default; }
.problem-open, .consultation-open { border-radius: 48px !important; overflow: hidden; cursor: pointer !important; }
.problem-open img, .consultation-open img, .problem-open:hover img, .consultation-open:hover img { opacity: 1 !important; cursor: pointer !important; }
#problemViewer .viewer-arrow { width: 44px; height: 44px; padding: 0 !important; background: transparent !important; color: #9b8ca3 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
#problemViewer .viewer-arrow span { border-width: 1.5px; }
@media (hover: hover) {
  #problemViewer .viewer-arrow:hover { background: transparent !important; color: #75637e !important; }
}
#problemViewer .viewer-arrow:focus-visible { background: transparent !important; color: #75637e !important; }
#problemViewer .viewer-arrow:active { background: transparent !important; }
.problem-chevron { animation-duration: 1.4s; }
.problem-invitation { margin-top: var(--invitation-gap); margin-bottom: 0; }
#trial.welcome-gift { margin-top: var(--invitation-gap); }
#trial h2 { font-size: 22px; }
.problem-card p { box-sizing: border-box; width: 100%; padding-left: 20px; padding-right: 20px; text-align: center; }
@media (max-width: 650px) {
  :root { --invitation-gap: 102px; }
  .hero .logo { width: 75px; }
  .problem-open, .consultation-open { border-radius: 40px !important; }
  .problem-card p { padding-left: 12px; padding-right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.page, .messenger-dialog, .slot-info-dialog) :is(a[href], button, [role="button"]) { transition: none; }
  .problem-chevron { animation: none; }
}

/* =====================================================
   ТЕКУЩИЕ ИСПРАВЛЕНИЯ
   ===================================================== */

/* Подарок и окно мессенджеров: одинаковая белая поверхность. */
:root {
  --panel-background: #fff;
  --panel-radius: 32px;
  --panel-shadow: 0 4px 28px rgb(13 13 15 / 6.5%);
  --panel-title-size: 22px;
  --viewer-edge-width: clamp(48px, 8vw, 120px);
}
#trial.welcome-gift, .messenger-dialog {
  background: var(--panel-background) !important;
  color: #0d0d0f;
  border: 0;
  border-radius: var(--panel-radius);
  box-shadow: var(--panel-shadow);
}
#trial h2, .messenger-dialog #messengerTitle {
  font: 600 var(--panel-title-size)/1.5 Manrope, sans-serif;
  margin: 0 0 22px;
}

/* Окно выбора мессенджера: отступы как внутри подарка. */
.messenger-dialog { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; text-align: left; overflow: auto; }
.messenger-dialog::backdrop { background: rgb(36 35 43 / 20%); }
.messenger-dialog .messenger-options { padding: 54px 42px 36px; }
.messenger-dialog p { margin: 0 0 12px; font: 400 18px/1.5 Manrope, sans-serif; color: #0d0d0f; }
.messenger-dialog .messenger-links { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 12px; margin: 12px 0; }
.messenger-dialog form { margin: 0; }
.messenger-dialog :is(.button, .details-toggle, button) { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 18px !important; background: var(--click-bg, #f2f2f2) !important; color: #0d0d0f !important; border: 0 !important; border-radius: 16px !important; box-shadow: none !important; font: 400 18px/1.5 Manrope, sans-serif !important; text-decoration: none !important; cursor: pointer; }
@media (hover: hover) {
  .messenger-dialog :is(.button, .details-toggle, button):not(:disabled):not([aria-disabled="true"]):hover { background: var(--click-hover-bg, #e8e8e8) !important; }
}
.messenger-dialog :is(.button, .details-toggle, button):not(:disabled):not([aria-disabled="true"]):active { background: var(--click-active-bg, #dedede) !important; }

/* Пузыри: слой открыт, содержимое подарка находится над ним. */
#trial.welcome-gift { position: relative; isolation: isolate; overflow: hidden; }
#trial .soap-bubbles { display: block !important; position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
#trial .welcome-content { position: relative; z-index: 1; }
#trial .soap-bubble { animation: welcome-bubble calc(var(--bubble-duration, 20s) * .55) var(--bubble-delay, 0s) linear infinite; }

/* Полноэкранный просмотр: вся боковая полоса является кнопкой.
   Размер полосы задаёт --viewer-edge-width; размер значка — width/height у span. */
#problemViewer .viewer-arrow {
  position: fixed;
  top: 0;
  bottom: 0;
  width: var(--viewer-edge-width);
  height: 100dvh;
  margin: 0;
  padding: 0 !important;
  display: grid;
  place-items: center;
  transform: none;
  background: transparent !important;
  color: #9b8ca3 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  z-index: 2;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
#problemViewer .viewer-prev { left: 0; right: auto; }
#problemViewer .viewer-next { right: 0; left: auto; }
#problemViewer .viewer-arrow span { width: 28px; height: 28px; border-width: 2px; }
#problemViewer .viewer-close { z-index: 3; }
@media (hover: hover) {
  #problemViewer .viewer-arrow:hover { background: rgb(13 13 15 / 7%) !important; color: #75637e !important; }
}
#problemViewer .viewer-arrow:focus-visible { background: rgb(13 13 15 / 7%) !important; color: #75637e !important; outline-offset: -3px; }
#problemViewer .viewer-arrow:active { background: rgb(13 13 15 / 10%) !important; }

/* Телефон: внутренние отступы совпадают с мобильным блоком подарка. */
@media (max-width: 650px) {
  #trial h2, .messenger-dialog #messengerTitle { margin-bottom: 18px; }
  .messenger-dialog .messenger-options { padding: 36px 24px 24px; }
  #problemViewer .viewer-arrow span { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  #trial .soap-bubbles { display: none !important; }
  #problemViewer .viewer-arrow { transition: none; }
}

/* Принятый дизайн: центрированное окно выбора мессенджера с увеличенными полями. */
.messenger-dialog { width: min(560px, calc(100vw - 32px)); text-align: center; }
.messenger-dialog .messenger-options { padding: 64px 56px 48px; text-align: center; }
.messenger-dialog .messenger-links { justify-content: center; }
.messenger-dialog #closeMessenger {
  position: absolute; top: 16px; right: 16px; z-index: 3;
  display: grid; place-items: center;
  width: 44px; height: 44px; min-height: 44px; padding: 0 !important;
  background: transparent !important; color: var(--accent) !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  cursor: pointer;
}
.messenger-dialog #closeMessenger span { position: relative; display: block; width: 22px; height: 22px; }
.messenger-dialog #closeMessenger span::before, .messenger-dialog #closeMessenger span::after { content: ""; position: absolute; left: 10px; top: 0; width: 2px; height: 22px; background: currentColor; transform: rotate(45deg); }
.messenger-dialog #closeMessenger span::after { transform: rotate(-45deg); }
@media (hover: hover) {
  .messenger-dialog #closeMessenger:hover { background: transparent !important; color: #75637e !important; }
}
.messenger-dialog #closeMessenger:active { background: transparent !important; }
@media (max-width: 650px) {
  .messenger-dialog .messenger-options { padding: 48px 32px 36px; }
}
@media (prefers-reduced-motion: reduce) {
  #trial .soap-bubble { animation: none; }
}

/* Согласованная основа: Onest, название Pangolin, ФИО 28 px / 500. */
@font-face {
  font-family: "Onest";
  src: url("/assets/site/fonts/onest-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
.page, .page *, .messenger-dialog, .messenger-dialog *,
.slot-info-dialog, .slot-info-dialog *, .problem-viewer, .problem-viewer *,
:is(.page, .messenger-dialog, .slot-info-dialog) :is(a[href], button, [role="button"]),
.messenger-dialog :is(.button, .details-toggle, button) {
  font-family: "Onest", Arial, sans-serif !important;
}
.page .hero-heading h1, .page .hero-heading h1 * {
  font-family: "Pangolin", cursive !important;
}
.page, .messenger-dialog, .slot-info-dialog, .problem-viewer {
  --font-body: 17px;
}
.page p, .page a, .page button, .page h2,
.messenger-dialog p, .messenger-dialog a, .messenger-dialog button,
.slot-info-dialog p, .slot-info-dialog button, .viewer-description, .viewer-counter {
  font-size: 17px !important;
}
.page .hero-heading h1 { font-size: clamp(42px, 11.3vw, 94px); }
.page .hero .name { font-size: 28px !important; font-weight: 500 !important; }
.page #trial h2, .messenger-dialog #messengerTitle { font-size: 21px !important; }

/* situation-filters: вводная строка и фильтры ситуаций. */
.problem-intro { margin: 0 auto 16px; color: var(--text); font-weight: 400; }
.problem-filters { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin: 0 auto 32px; }
#problemFilters button { min-height: 48px; padding: 12px 18px; }
#problemFilters button[aria-pressed="true"] { background: var(--click-active-bg) !important; font-weight: 400 !important; }
@media(max-width:650px) { .problem-filters { gap: 8px; margin-bottom: 24px; } #problemFilters button { padding: 10px 14px; } }
/* /situation-filters */

/* hero-spacing-v2: равные промежутки название → роль и ФИО → помощь. */
:root { --hero-copy-gap: 78px; }
.hero-heading h1 { margin-bottom: 0; }
.hero-person { margin-top: var(--hero-copy-gap); }
.intro-surface .intro { margin-top: var(--hero-copy-gap); }
#problemFilters button[aria-pressed="true"] { font-weight: 400 !important; }
@media(max-width:650px) { :root { --hero-copy-gap: 106px; } }
/* /hero-spacing-v2 */