@font-face { font-family: 'Nika Comic'; font-style: normal; font-weight: 400; font-display: swap; src: url('./assets/fonts/comic-relief-cyrillic-400-normal.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Nika Comic'; font-style: normal; font-weight: 400; font-display: swap; src: url('./assets/fonts/comic-relief-latin-400-normal.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; }
@font-face { font-family: 'Nika Comic'; font-style: normal; font-weight: 700; font-display: swap; src: url('./assets/fonts/comic-relief-cyrillic-700-normal.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Nika Comic'; font-style: normal; font-weight: 700; font-display: swap; src: url('./assets/fonts/comic-relief-latin-700-normal.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; }

:root { --heading: 'Nika Comic', 'Comic Sans MS', cursive; --body: 'Comic Sans MS', 'Nika Comic', cursive; }
/* Mobile layout: Figma 30:673, reference viewport 390px.
   Content stays in document flow; only decorative compositions are positioned. */
body { min-width: 320px; }
.container, .steps-inner, .comparison-wrap, .parents-wrap { width: min(calc(100% - 40px), 520px); margin: 0 auto; }
.section { width: 100%; height: auto; min-height: 0; padding: 50px 0; overflow: clip; }
.section h2 { position: relative; inset: auto; width: auto; margin: 0 0 30px; font: 400 32px/40px var(--body); letter-spacing: 0; text-align: left; white-space: normal; }
.section h3 { letter-spacing: -.3px; }
.desktop-only, .desktop-label, .main-nav, .desktop-break { display: none; }
.mobile-label { display: inline; }
.site-header { position: sticky; top: 0; z-index: 1000; height: 60px; margin-top: 62px; background: rgb(255 255 255 / 96%); }
.header-inner { display: flex; justify-content: space-between; }
.logo { font-size: 20px; line-height: 28px; }
.header-cta { min-height: 32px; height: 32px; padding: 4px 16px; border: 0; background: #454545; font-size: 14px; }

/* Hero */
.hero { padding: 80px 0 0; }
.hero-layout { transform: none; width: min(calc(100% - 40px), 520px); height: auto; margin: 0 auto; }
.hero-copy { position: relative; inset: auto; width: 100%; }
.hero h1 { width: 100%; font-size: 32px; line-height: 40px; }
.hero h1 mark { padding: 0; }
.hero h1 mark::before { inset: 0 -5px -3px; background: var(--yellow-light); }
.hero-rays { position: absolute; width: 30px; height: 30px; right: -24px; top: -14px; }
.hero-rays-mobile { display: none; }
.hero-sparkle { left: -34px; top: -43px; width: 43px; height: 34px; transform: none; }
.hero-lead { width: 100%; margin-top: 20px; font-size: 14px; line-height: 22px; letter-spacing: .42px; }
.benefit-chips { width: 100%; gap: 10px; margin-top: 20px; }
.benefit-chips li { height: 36px; min-height: 36px; padding: 6px 10px; font-size: 12px; letter-spacing: .12px; }
.benefit-chips li:nth-child(1) { width: 181px; }
.benefit-chips li:nth-child(2) { width: 159px; }
.benefit-chips li:nth-child(3) { order: 4; width: 147px; }
.benefit-chips li:nth-child(4) { order: 3; width: 244px; margin-right: calc(100% - 244px); }
.hero-actions { margin-top: 32px; }
.hero-actions .hero-primary { white-space: nowrap; flex-shrink: 0; width: 202px; padding: 12px 16px; border: 0; font-size: 14px; box-shadow: 0 4px 4px #0000001f; }
.hero-primary::after { flex-shrink: 0; transform: rotate(90deg); content: ''; width: 20px; height: 20px; background: url('./assets/figma/explanation/send.svg') center / 14px 14px no-repeat; }
.hero-art { position: relative; inset: auto; width: 100%; height: auto; margin: 80px 0 0; }
.hero-art .mobile-how-title { display: block; margin: 0 0 40px; white-space: nowrap; }
.mobile-how-title mark::before { inset: -9px -24px -5px -6px; background: url('./assets/figma/steps/title-highlight.png') center / 100% 100% no-repeat; transform: none; }
.mobile-how-rays { display: none; }
.hero-chat { min-height: 552px; position: relative; inset: auto; width: 100%; height: 552px; }
.hero-chat-bg { left: 0; top: 0; width: 100%; height: 519px; transform: rotate(7.13deg); }
.hero-chat-phone { position: relative; inset: auto; width: 100%; min-height: 519px; height: auto; padding: 71px 8px 13px; border-radius: 20px; }
.hero-chat-header { top: 0; width: 100%; height: 56px; }
.hero-chat-header strong { top: 20px; font-size: 20px; line-height: 28px; }
.hero-chat-menu { position: absolute; left: 16px; top: 22px; width: 24px; height: 24px; }
.hero-chat-header-actions { position: absolute; right: 16px; top: 22px; gap: 16px; }
.hero-chat-header-icon, .hero-chat-header-actions .hero-chat-header-icon { width: 24px; height: 24px; }
.hero-chat-subject { position: relative; inset: auto; transform: none; width: max-content; height: 30px; margin: 0 auto 15px; padding: 5px 12px; font-size: 10px; }
.hero-chat-subject img { width: 20px; height: 20px; }
.hero-chat-bubble { position: relative; inset: auto; padding: 12px 16px 18px; font-size: 14px; line-height: 20px; letter-spacing: .14px; border-radius: 12px; }
.hero-chat-question { width: min(277px, calc(100% - 30px)); margin: 0 0 8px auto; }
.hero-chat-answer { width: 100%; }
.hero-chat-answer p { margin: 0 0 8px; }
.hero-chat-answer p:first-child { margin-bottom: 0; }
.hero-chat-chips { position: relative; inset: auto; margin-top: 10px; gap: 10px; }
.hero-chat-chips button { height: 36px; padding: 6px 12px; gap: 6px; font-size: 12px; }
.hero-chat-chips img { width: 20px; height: 20px; }
.hero-chat-input { position: relative; inset: auto; width: 100%; height: 48px; margin-top: 20px; padding: 7px 9px 7px 14px; gap: 10px; }
.hero-chat-input input { width: 0; min-width: 0; font-size: 16px; }
.hero-chat-paperclip { width: 24px; height: 24px; }
.hero-chat-send { width: 33px; height: 33px; flex-shrink: 0; }
.hero-chat-send img { width: 14px; height: 14px; }
.hero-chat-heart { display: none; }
.hero-chat-pencil { top: auto; bottom: 0; right: -42px; width: 65px; height: 102px; object-fit: contain; }
.hero-dots { display: none; }
.hero-copy::after { content: ''; position: absolute; right: -42px; bottom: -37px; width: 60px; height: 60px; background: url('./assets/figma/hero/dots.svg') center / contain no-repeat; pointer-events: none; }

/* Familiar situations */
.situations { padding: 50px 0 20px; }
.situations-inner { position: relative; height: auto; }
.situations h2 { padding: 0; }
.situations-title-mark::after { left: 50%; top: 50%; width: calc(100% + 26px); height: 58px; }
.situation-grid { position: relative; inset: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 238px; gap: 10px; align-items: stretch; }
.situation-card { width: auto; height: 238px; min-height: 238px; padding: 8px; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 12px; }
.situation-icon { width: 94px; height: 101px; flex: 0 0 101px; margin: 0 auto; object-fit: contain; }
.situation-copy { width: 100%; }
.situation-card h3 { width: calc(100% + 13px); max-width: 163px; font-weight: 400; margin: 0 0 6px; font-size: 15px; line-height: 18px; }
.situation-card:nth-child(n) p { width: calc(100% + 8px); max-width: none; font-size: 12px; line-height: 16px; letter-spacing: -.18px; }
.situation-card:nth-child(4) p, .situation-card:nth-child(6) p { width: calc(100% + 8px); max-width: none; }
.situation-text-line { display: block; white-space: nowrap; }
.situation-stage { position: relative; inset: auto; width: calc(100% + 40px); height: 213px; margin: 26px -20px 0; }
.situation-girl { width: 225px; height: 213px; left: -15px; object-fit: contain;  }

.situation-tooltip { left: auto; right: 20px; top: 24px; width: 190px; min-height: 149px; padding: 10px 12px; border-width: 2px; }
.situation-tooltip p { font-size: 12px; line-height: 16px; letter-spacing: .12px; }
.situation-tooltip::before { width: 14px; height: 14px; left: -8px; border-width: 2px; }
.situations-hearts { width: 70px; height: 58px; left: -15px; top: 354px; }
.situations-dots { width: 100px; height: 70px; right: -54px; top: 171px; }

/* Four steps with a separate vertical progress rail */
.steps-inner { height: auto; width: min(calc(100% - 40px), 520px); margin: 0 auto; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) 40px; column-gap: 10px; }
.steps h2 { grid-column: 1 / -1; max-width: 350px; }
.steps h2 mark { display: inline-block; position: relative; white-space: nowrap; }
.steps h2 mark::before { left: -12px; top: -17px; width: calc(100% + 40px); height: 67px; transform: none; background-size: 100% 100%; }
.steps-grid { grid-column: 1; grid-row: 2; grid-template-columns: 1fr; gap: 10px; }
.step-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto; align-items: center; align-content: center; column-gap: 12px; row-gap: 0; width: 100%; height: auto; min-height: 130px; padding: 8px; }
.step-art { grid-row: auto; width: 96px; height: 108px; align-self: center; }
.step-card:nth-child(n) .step-art img { width: 96px; height: 108px; object-fit: contain; }
.step-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; max-width: 100%; min-width: 0; }
.step-card h3 { width: 100%; max-width: 100%; font-size: 15px; line-height: 17px; }
.step-card:nth-child(n) p { width: 100%; max-width: 100%; font-size: 12px; line-height: 16px; letter-spacing: 0; }
.step-text-line { display: block; white-space: nowrap; }
.steps-progress { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; justify-content: space-between; width: 40px; margin: 44px 0; gap: 8px; }
.progress-number { width: 40px; height: 40px; flex-shrink: 0; font-size: 18px; }
.progress-arrow { position: relative; width: 20px; height: auto; min-height: 60px; flex: 1; }
.progress-arrow::before { display: block; top: 0; bottom: 8px; left: 9px; right: auto; border-top: 0; border-left: 2px dashed #1b1b1b; }
.progress-arrow::after { display: block; right: 5px; top: auto; bottom: 3px; transform: rotate(135deg); }
.steps-decor-top, .steps-blob-right { display: none; }
.steps-blob-left { top: 273px; left: -34px; width: 170px; height: 300px; }
.steps-dots { top: 85px; right: -60px; width: 100px; height: 70px; }

/* Two overlapping sample conversations, keeping selectable HTML text. */
.explanation { padding-top: 20px; padding-bottom: 23px; }
.explanation-inner { position: relative; width: min(calc(100% - 40px), 520px) !important; max-width: none !important; height: auto; left: auto !important; margin: 0 auto !important; transform: none !important; }
.explanation h2 { margin-bottom: 26px; }
.explanation-title-mark { padding: 0; }
.explanation-title-mark::before { width: calc(100% + 36px); height: 54px; left: 0; top: -8px; }
.explanation-stage { position: relative; inset: auto; width: 350px; height: 1112px; margin: 0 auto; }
.explanation-phone { transform-origin: top left; width: 455px; height: 599px; }
.explanation-phone-left { left: -60px; top: 34px; transform: rotate(-7.2deg) scale(.76923); }
.explanation-phone-right { left: 84px; top: 304px; transform: rotate(7.2deg) scale(.76923); }
.explanation-nika { left: 157px; top: 884px; width: 200px; height: 228px; border-radius: 0 0 100px 80px; }
.explanation-nika-bg { left: 95px; top: 918px; width: 260px; height: 194px; }
.explanation-cloud-wrap { left: -20px; top: 818px; width: 225px; height: 163px; }
.explanation-cloud-wrap p { inset: 42px 20px auto 31px; font-size: 12px; line-height: 16px; white-space: normal; }
.explanation-blob-left { left: -90px; top: 530px; width: 220px; height: 370px; }

/* Feature grid */
.capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.capabilities-title-mark { display: inline; }
.capabilities-title-mark > img { width: calc(100% + 22px); height: 50px; left: -10px; bottom: -5px; }
.feature-card { width: auto; height: 258px; min-height: 258px; padding: 8px; justify-content: flex-start; }
.feature-art { width: 100%; height: 87px; flex: 0 0 87px; margin-bottom: 12px; }
.feature-copy { display: grid; grid-template-rows: 36px auto; gap: 6px; width: 100%; min-width: 0; align-content: start; }
.feature-card h3 { min-height: 36px; font-size: 15px; line-height: 18px; }
.feature-card p { font-size: 12px; line-height: 16px; letter-spacing: 0; text-wrap: pretty; overflow-wrap: normal; word-break: normal; hyphens: none; }
.feature-heart { width: 62px; height: 52px; left: -20px; bottom: -22px; }
.capabilities-dots-left { display: none; }
.capabilities-dots-top-right { right: -42px; top: 307px; width: 58px; height: 41px; }
.capabilities-blob { width: 254px; height: 380px; right: -144px; bottom: 0; }

/* School subjects */
.subjects-wrap { position: relative; }
.subjects-title-mark { position: relative; z-index: 0; }
.subjects-title-mark > img { position: absolute; z-index: -1; left: -20px; top: -12px; width: calc(100% + 35px); height: 60px; max-width: none; }
.subject-grid { grid-template-columns: 1fr; gap: 10px; }
.subject-card { display: grid; grid-template-columns: 111px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 130px; padding: 8px; border-color: #454545; }
.subject-art { display: block; height: 100px; margin: 0; background: transparent; }
.subject-art img { width: 111px; height: 100px; object-fit: contain; }
.subject-card h3 { margin-bottom: 6px; font-size: 18px; line-height: 20px; }
.subject-card p { font-size: 12px; line-height: 17px; }
.subjects-nika-wrap { position: relative; width: calc(100% + 40px); height: 230px; margin: 16px -20px -30px; }
.subjects-nika { position: absolute; left: -12px; bottom: 0; width: 230px; height: 228px; object-fit: contain; }
.subjects-tooltip { position: absolute; right: 20px; top: 24px; width: 200px; padding: 12px 14px; border: 2px solid #454545; border-radius: 12px; background: white; box-shadow: var(--shadow); font-size: 12px; line-height: 17px; }
.subjects-dots-left, .subjects-gray-stars, .subjects-squiggle, .subjects-dot { display: none; }
.subjects { padding-bottom: 35px; }

/* The five columns fit the reference phone; smaller phones can scroll. */
.comparison-heading-wrap { position: relative; }
.comparison-title-rays { position: absolute; width: 38px; height: 38px; left: 250px; top: -18px; }
.comparison-title-mark { position: relative; }
.comparison-title-mark::before { content: ''; position: absolute; z-index: -1; inset: 50% 0 -5px; background: var(--yellow-light); }
.comparison-table-wrap { width: calc(100% + 20px); margin: 0 -10px; overflow-x: auto; border: 1px solid #696969; border-radius: 12px; box-shadow: 0 4px 4px #0000001f; }
.comparison-table { width: 100%; min-width: 350px; font-size: 12px; table-layout: fixed; }
.comparison-table .criteria-col { width: 27.3%; }
.comparison-table .nika-width { width: 12%; }
.comparison-table col:nth-child(3) { width: 21.4%; }
.comparison-table col:nth-child(4) { width: 18.7%; }
.comparison-table th, .comparison-table td { padding: 14px 6px; height: auto; font-size: 12px; line-height: 17px; overflow-wrap: anywhere; }
.comparison-table tbody th { padding-left: 9px; }
.comparison-table thead th { height: 49px; padding: 6px 3px; }
.comparison-table thead th:nth-child(n+4) { font-size: 10px; line-height: 14px; }
.comparison-table br { display: initial; }
.nika-heading img { display: none; }
.comparison-note { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 14px; margin: 34px 0 0 10px; }
.comparison-note-star { width: 52px; height: 54px; }
.comparison-note p { font-size: 14px; line-height: 24px; }
.comparison-note br { display: none; }
.comparison-blob { position: absolute; width: 170px; height: 350px; }
.comparison-blob-left { left: -135px; top: 445px; }
.comparison-blob-right { right: -125px; top: 150px; }
.comparison-dots, .comparison-bottom-stars { display: none; }
.comparison { padding-bottom: 55px; }

/* Parents */
.parents { padding-top: 40px; padding-bottom: 48px; }
.parents-wrap { position: relative; }
.parents-copy { width: 100%; }
.parents-copy h2 { margin-bottom: 20px; }
.parents-title-mark { position: relative; z-index: 0; }
.parents-title-mark > img { position: absolute; z-index: -1; top: -4px; left: -10px; width: calc(100% + 24px); height: 52px; max-width: none; }
.parents-copy .parents-lead { max-width: 292px; margin-bottom: 40px; font-size: 14px; line-height: 24px; }
.parent-benefits { gap: 20px; }
.parent-benefits li { grid-template-columns: 60px minmax(0, 1fr); gap: 25px; padding-bottom: 20px; border-bottom: 1px solid #eee; }
.parent-benefits li:last-child { padding-bottom: 0; border-bottom: 0; }
.parent-benefits li > img { width: 60px; height: 64px; object-fit: contain; }
.parent-benefits h3 { margin-bottom: 4px; font-size: 18px; line-height: 20px; }
.parent-benefits p { font-size: 14px; line-height: 22px; }
.parent-benefits br { display: none; }
.parents-phone-wrap { position: relative; height: auto; width: calc(100% + 20px); margin: 59px -10px 0; }
.parents-phone-bg-desktop { display: none; }
.parents-phone-bg-mobile {
  display: block;
  position: absolute;
  z-index: 0;
  /* Match the Figma composition: the yellow plate is almost as wide as
     the phone, begins just behind its top edge, and exposes the rays. */
  left: 2.5%;
  top: -42px;
  width: 92%;
  height: auto;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
}
.progress-art { position: relative; z-index: 1; width: 94%; height: auto; margin: 0 auto; transform: rotate(5deg); }
.parents-mobile-flower {
  display: block;
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: -24px;
  width: 48px;
  height: auto;
  pointer-events: none;
}
.parents-dots, .parents-star-gray, .parents-rays-right, .parents-star-left, .parents-bottom-squiggle { display: none; }

/* Signup */
.signup { padding-top: 40px; padding-bottom: 34px; }
.signup h2 { max-width: 350px; }
.signup-title-rays-wrap { display: inline; }
.signup-title-rays { display: none; }
.signup-title-mark { position: relative; z-index: 0; white-space: nowrap; }
.signup-title-mark > img { position: absolute; z-index: -1; left: -8px; top: -6px; width: calc(100% + 26px); height: 58px; max-width: none; }
.signup-grid { display: block; }
.signup-form { padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.field, .signup-form fieldset { margin-bottom: 20px; }
.field > label, .signup-form legend { margin-bottom: 16px; font-size: 18px; line-height: 24px; }
.signup-form select, .signup-form input:not([type='checkbox']) { height: 40px; padding: 6px 14px; font-size: 16px; border-radius: 8px; }
.check-grid { gap: 12px 14px; font-size: 16px; line-height: 24px; letter-spacing: -.3px; }
.check-grid label { min-height: 28px; gap: 8px; }
.signup-form input[type='checkbox'] { width: 20px; height: 20px; flex-shrink: 0; }
.inputs { gap: 12px; }
.consent { font-size: 12px; line-height: 18px; }
.submit-button { min-height: 52px; font-size: 20px; padding: 10px; margin-top: 20px; }
.no-card { margin-top: 20px; font-size: 16px; }
.form-status:empty { display: none; }
.signup-visual { position: relative; width: calc(100% + 40px); height: 450px; margin: 45px -20px 0; }
.signup-tooltip { position: absolute; z-index: 2; left: 12px; top: 6px; width: 270px; height: 199px; }
.signup-tooltip img { position: absolute; width: 100%; height: 100%; }
.signup-tooltip p {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 36px 16px 30px;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}
.signup-nika { position: absolute; right: -10px; bottom: 0; width: 230px; height: 390px; object-fit: contain; }
.signup-form-wrap { position: relative; }
.signup-dots { position: absolute; width: 100px; height: 70px; left: -35px; bottom: -310px; }
.signup-blob-left, .signup-blob-right { position: absolute; pointer-events: none; }
.signup-blob-left { bottom: 0; left: -90px; width: 180px; height: 210px; }
.signup-blob-right { right: -300px; top: 170px; width: 355px; height: 580px; }

/* FAQ keeps the site's existing copy; open answers expand naturally. */
.faq { padding: 40px 0 48px; }
.faq h2 { max-width: 350px; }
.accordion { gap: 14px; }
.accordion summary { padding: 15px 44px 15px 14px; font-size: 18px; line-height: 25px; }
.accordion summary::after { content: '⌄'; top: calc(50% - 17px); right: 16px; font-size: 30px; line-height: 30px; }
.accordion details p { padding: 0 14px 16px; font-size: 14px; line-height: 22px; }
.site-footer { min-height: 701px; padding: 20px 0 34px; }
.footer-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 40px; }
.footer-logo { font-size: 32px; line-height: 40px; }
.footer-logo span { display: none; }
.footer-grid p { margin-top: 14px; font-size: 16px; line-height: 24px; }
.footer-grid h2 { font-size: 22px; line-height: 28px; padding: 6px 10px; margin-bottom: 24px; }
.footer-grid > div > a:not(.footer-logo) { font-size: 16px; margin-bottom: 12px; }
.footer-grid .contacts-title { margin-top: 30px; }
.footer-dots { position: absolute; right: -28px; top: 260px; margin: 0; width: 64px; height: 80px; overflow: hidden; font-size: 0; background: url('./assets/figma/hero/dots.svg') center / cover no-repeat; }

@media (max-width: 389px) {
  .hero h1, .section h2 { font-size: clamp(27px, 8.2vw, 32px); line-height: 1.25; }
  .hero h1 > br:last-of-type { display: none; }
  .benefit-chips li:nth-child(n) { width: auto; margin-right: 0; }
  .benefit-chips li:nth-child(3), .benefit-chips li:nth-child(4) { margin-right: 30px; }
  .hero-art .mobile-how-title { white-space: normal; }
  .hero-chat { height: auto; padding-bottom: 35px; }
  .hero-chat-bg { height: calc(100% - 35px); }
  .hero-chat-answer br { display: none; }
  .hero-chat-chips { gap: 6px; }
  .hero-chat-chips button { padding-inline: 8px; }
  .step-card { grid-template-columns: 76px minmax(0, 1fr); gap: 6px; }
  .step-art, .step-card:nth-child(n) .step-art img { width: 76px; height: 95px; }
  .situation-grid { grid-auto-rows: 246px; }
  .situation-card { height: 246px; min-height: 246px; }
  .feature-card { height: 270px; min-height: 270px; }
  .situation-tooltip { right: 12px; width: 170px; }
  .subject-card { grid-template-columns: 88px minmax(0, 1fr); }
  .subject-art img { width: 88px; }
  .subjects-tooltip { width: 170px; right: 12px; }
  .parent-benefits li { grid-template-columns: 48px minmax(0, 1fr); gap: 15px; }
  .parent-benefits li > img { width: 48px; }
  .check-grid { font-size: 14px; gap: 10px; }
  .submit-button { font-size: 18px; }
}

.desktop-copy { display: none; }
.mobile-copy { display: inline; }
.capabilities h2 { font-size: 32px; }
.capabilities-title-mark { white-space: nowrap; }
.comparison-table th, .comparison-table td { overflow-wrap: normal; hyphens: auto; }
.comparison-table tbody td:last-child { font-size: 11px; padding-inline: 3px; }
.comparison-title-mark { z-index: 0; }
.desktop-only-faq { display: none; }
@media (max-width: 359px) {
  .capabilities h2 { font-size: 25px; }
  .feature-card { height: 286px; min-height: 286px; }
  .situation-stage { height: 250px; }
  .situation-girl { width: 195px; top: 30px; }
  .situation-tooltip { width: 155px; font-size: 11px; }
  .situation-tooltip p { font-size: 11px; }
  .subjects-nika { width: 190px; }
  .subjects-tooltip { width: 155px; font-size: 11px; }
}

@media (min-width: 390px) and (max-width: 400px) {
  /* 390px layout: keep the same internal guides but remove the unused
     vertical space below the copy. Narrower phones retain their own taller
     card rules above/below this breakpoint. */
  .situation-grid { grid-auto-rows: 238px; }
  .situation-card {
    height: 238px;
    min-height: 238px;
    padding: 8px 6px;
    gap: 10px;
  }
  .situation-copy {
    display: grid;
    grid-template-rows: 36px auto;
    row-gap: 6px;
    width: 100%;
    min-width: 0;
    align-content: start;
  }
  .situation-card h3 {
    width: 100%;
    max-width: none;
    height: 36px;
    margin: 0;
    font-size: 15px;
    line-height: 18px;
    letter-spacing: -.3px;
  }
  .situation-card:nth-child(n) p {
    width: 100%;
    max-width: none;
    margin: 0;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: -.1px;
  }
  .situation-card:nth-child(4) p,
  .situation-card:nth-child(6) p { width: 100%; }
  .situation-text-line { display: inline; white-space: normal; }
  .situation-text-line + .situation-text-line::before { content: ' '; }
}

@media (max-width: 359px) {
  .situation-grid { grid-auto-rows: 286px; }
  .situation-card { height: 286px; min-height: 286px; gap: 9px; }
  .situation-icon { width: 88px; height: 94px; flex-basis: 94px; }
  .situation-card h3 { font-size: 13px; line-height: 16px; margin-bottom: 5px; }
  .situation-card:nth-child(n) p { font-size: 12px; line-height: 16px; }
}


/* Capabilities / mobile 390 — Figma node 1:3172.
   Keep the 350px content guide, 170px cards and 10px gutters from the mockup.
   Card rows size to their content so the 12px descriptions can use the font's
   natural line-height without overflowing the card. */
@media (min-width: 390px) and (max-width: 767px) {
  .capabilities {
    min-height: 939px;
    padding: 50px 0;
  }
  .capabilities .capabilities-inner {
    width: 350px;
    margin-inline: auto;
  }
  .capabilities h2 {
    width: 394px;
    margin: 0 0 30px;
    font-size: 32px;
    line-height: 40px;
  }
  .capabilities-title-mark > img {
    left: -10px;
    bottom: -5px;
    width: calc(100% + 22px);
    height: 50px;
  }
  .capability-grid {
    display: grid;
    grid-template-columns: repeat(2, 170px);
    grid-template-rows: repeat(3, auto);
    align-items: stretch;
    gap: 10px;
    width: 350px;
    height: auto;
  }
  .feature-card {
    box-sizing: border-box;
    width: 170px;
    height: auto;
    min-height: 223px;
    padding: 8px;
    align-items: center;
    justify-content: flex-start;
    overflow: visible;
  }
  .feature-art {
    position: relative;
    width: 150px;
    flex: none;
    margin: 0 0 12px;
    display: block;
  }
  .feature-art img {
    position: absolute;
    left: 50%;
    display: block;
    max-width: none;
    transform: translateX(-50%);
    object-fit: contain;
  }
  .feature-card:nth-child(1) .feature-art,
  .feature-card:nth-child(2) .feature-art,
  .feature-card:nth-child(4) .feature-art { height: 87px; flex-basis: 87px; }
  .feature-card:nth-child(3) .feature-art { height: 94px; flex-basis: 94px; }
  .feature-card:nth-child(5) .feature-art { height: 73px; flex-basis: 73px; }
  .feature-card:nth-child(6) .feature-art { height: 89px; flex-basis: 89px; margin-bottom: 10px; }

  .feature-card:nth-child(1) .feature-art img { top: 4px; width: 159px; height: 76px; }
  .feature-card:nth-child(2) .feature-art img { top: 10px; width: 156px; height: 75px; }
  .feature-card:nth-child(3) .feature-art img { top: 21px; width: 160px; height: 66px; }
  .feature-card:nth-child(4) .feature-art img { top: 20px; width: 160px; height: 68px; }
  .feature-card:nth-child(5) .feature-art img { top: 4px; width: 162px; height: 73px; }
  .feature-card:nth-child(6) .feature-art img { top: 8px; width: 164px; height: 73px; }

  .feature-copy {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 150px;
    min-width: 0;
    align-items: flex-start;
    align-content: initial;
  }
  .feature-card h3 {
    width: 163px;
    max-width: 163px;
    height: 36px;
    min-height: 36px;
    margin: 0;
    font-size: 15px;
    line-height: 18px;
    letter-spacing: -.3px;
    text-wrap: wrap;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }
  .feature-card p {
    width: 155px;
    max-width: 155px;
    margin: 0;
    font-size: 12px;
    line-height: normal;
    letter-spacing: -.2px;
    text-wrap: wrap;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }
  .feature-card:nth-child(2) p { width: 166px; max-width: 166px; }
  .feature-card:nth-child(3) p { width: 150px; max-width: 150px; }
  .feature-card:nth-child(4) p { width: 157px; max-width: 157px; }
  .feature-card:nth-child(6) p { width: 158px; max-width: 158px; }
  .feature-card:nth-child(5) h3 { width: 150px; max-width: 150px; }
  .capability-lines { display: block; }
  .capability-lines > span { display: block; white-space: nowrap; }
  .feature-heart { display: none; }
  .capabilities-inner { position: relative; z-index: 2; }
  .capabilities-mobile-heart {
    position: absolute;
    z-index: 1;
    left: 6px;
    top: 659px;
    display: block;
    width: 62px;
    height: 52px;
    pointer-events: none;
  }
  .capabilities-dots-top-right {
    right: -16px;
    top: 307px;
    width: 58px;
    height: 41px;
  }
  .capabilities-blob {
    right: -144px;
    bottom: 4px;
    width: 254px;
    height: 380px;
  }
}

/* Narrower phones keep the same visual hierarchy while allowing the columns to shrink.
   This block also overrides the older emergency card heights above. */
@media (max-width: 389px) {
  .capabilities {
    min-height: auto;
    padding: 50px 0;
  }
  .capabilities h2 { margin-bottom: 30px; }
  .capability-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    align-items: stretch;
    gap: 10px;
    width: 100%;
    height: auto;
  }
  .feature-card {
    width: 100%;
    height: auto;
    min-height: 246px;
    padding: 8px;
    align-items: center;
    justify-content: flex-start;
  }
  .feature-art {
    position: relative;
    width: min(150px, 100%);
    height: 87px;
    flex: 0 0 87px;
    margin: 0 0 12px;
  }
  .feature-art img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .feature-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
  }
  .feature-card h3 {
    width: 100%;
    max-width: none;
    height: 36px;
    min-height: 36px;
    font-size: 15px;
    line-height: 18px;
  }
  .feature-card p {
    width: 100%;
    max-width: none;
    font-size: 12px;
    line-height: normal;
    letter-spacing: -.2px;
  }
  .capability-lines { display: inline; }
  .capability-lines > span { display: inline; white-space: normal; }
  .capability-lines > span + span::before { content: ' '; }
  .feature-heart { display: none; }
  .capabilities-mobile-heart {
    position: absolute;
    z-index: 1;
    left: 4px;
    top: 705px;
    display: block;
    width: 58px;
    height: auto;
    pointer-events: none;
  }
}

/* Comparison — exact mobile geometry from Figma node 1:2535 (390 px). */
.comparison {
  position: relative;
  padding-top: 50px;
  padding-bottom: 43px;
  overflow: clip;
  background: #fff;
}
.comparison-wrap {
  position: relative;
  z-index: 2;
  width: min(calc(100% - 40px), 350px);
  margin: 0 auto;
}
.comparison-heading-wrap {
  position: relative;
  width: 100%;
}
.comparison h2 {
  width: 350px;
  max-width: 100%;
  margin: 0 0 30px;
  font-family: var(--body);
  font-size: 32px;
  font-weight: 400;
  line-height: 40px;
  letter-spacing: 0;
  color: #1b1b1b;
}
.comparison-title-rays {
  position: absolute;
  z-index: 3;
  left: 250px;
  top: -18px;
  width: 39px;
  height: 31px;
  object-fit: contain;
}
.comparison-title-mark {
  position: relative;
  z-index: 0;
}
.comparison-title-mark::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: -8px;
  right: -8px;
  top: 50%;
  bottom: -5px;
  background: #fff5d3;
}
.comparison-table-wrap {
  width: 370px;
  max-width: calc(100vw - 20px);
  margin: 0 0 0 -10px;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid #696969;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 4px rgba(0, 0, 0, .12);
}
.comparison-table {
  width: 370px;
  min-width: 370px;
  table-layout: fixed;
  border-collapse: collapse;
  background: #fff;
  font-family: 'Comic Sans MS', var(--body);
  color: #000;
}
.comparison-table .criteria-col { width: 102px; }
.comparison-table .nika-width { width: 41px; }
.comparison-table col:nth-child(3) { width: 80px; }
.comparison-table col:nth-child(4) { width: 70px; }
.comparison-table col:nth-child(5) { width: 77px; }
.comparison-table th,
.comparison-table td {
  box-sizing: border-box;
  height: auto;
  padding: 16px 5px;
  border-right: 1px solid #454545;
  border-bottom: 1px solid #454545;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .12px;
  vertical-align: middle;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}
.comparison-table tr > *:last-child { border-right: 0; }
.comparison-table tbody tr:last-child > * { border-bottom: 0; }
.comparison-table thead th {
  height: 50px;
  padding: 5px;
  border-color: #696969;
  text-align: center;
}
.comparison-table thead th:first-child {
  padding-left: 10px;
  text-align: left;
}
.comparison-table thead th:nth-child(4),
.comparison-table thead th:nth-child(5) {
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .1px;
}
.comparison-table tbody th {
  padding: 16px 10px;
  text-align: left;
  white-space: nowrap;
}
.comparison-table tbody td {
  padding: 16px 3px;
  text-align: center;
  white-space: nowrap;
}
.comparison-table tbody td:last-child {
  padding-inline: 3px;
  font-size: 12px;
  line-height: 1.4;
}
.comparison-table .nika-col { background: #fff5d3; }
.comparison-table tbody tr:nth-child(odd) .nika-col { background: rgba(255, 222, 117, .13); }
.comparison-table .nika-yes { font-size: 12px; letter-spacing: .12px; }
.nika-heading { display: inline; }
.nika-heading img { display: none; }
.comparison-note {
  display: grid;
  grid-template-columns: 63px 256px;
  gap: 10px;
  align-items: center;
  width: 329px;
  min-height: 120px;
  margin: 20px auto 0;
}
.comparison-note-star {
  display: block;
  width: 63px;
  height: 65px;
  object-fit: contain;
}
.comparison-note p {
  width: 256px;
  margin: 0;
  font-family: 'Comic Sans MS', var(--body);
  font-size: 14px;
  line-height: 24px;
  letter-spacing: .14px;
  color: #1b1b1b;
}
.comparison-note br { display: none; }
.comparison-blob {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  object-fit: fill;
}
.comparison-blob-left {
  left: -190px;
  top: 446px;
  width: 303px;
  height: 404px;
}
.comparison-blob-right {
  right: -80px;
  top: 157px;
  width: 141px;
  height: 225px;
}
.comparison-dots,
.comparison-bottom-stars { display: none; }

@media (max-width: 369px) {
  .comparison-table-wrap {
    max-width: calc(100vw - 20px);
  }
  .comparison-note {
    grid-template-columns: 56px minmax(0, 1fr);
    width: calc(100% - 10px);
  }
  .comparison-note-star {
    width: 56px;
    height: auto;
  }
  .comparison-note p {
    width: auto;
  }
}

/* Final border/column corrections for the 370px Figma table frame. */
.comparison-table-wrap { border: 0; }
.comparison-table {
  border: 1px solid #696969;
}
.comparison-table th:first-child { width: auto; }

/* 2026-09-14: keep the comparison table comfortably inside the 390px frame
   and move the decorative rays to the upper-left of “Не”. */
@media (max-width: 768px) {
  .comparison-title-rays {
    left: -4px;
    top: -24px;
  }

  .comparison-table-wrap {
    width: 360px;
    max-width: calc(100vw - 30px);
    margin-left: -5px;
    margin-right: -5px;
    overflow: hidden;
  }

  .comparison-table {
    width: 100%;
    min-width: 0;
  }

  .comparison-table .criteria-col { width: 27.5%; }
  .comparison-table .nika-width { width: 11.1%; }
  .comparison-table col:nth-child(3) { width: 21.7%; }
  .comparison-table col:nth-child(4) { width: 18.9%; }
  .comparison-table col:nth-child(5) { width: 20.8%; }
}

/* 2026-09-14: comparison polish — exact rays offset, rounded outer frame,
   and enough room for the final “специалиста” cell at 390px. */
@media (max-width: 768px) {
  .comparison-title-rays {
    left: -20px;
    top: -20px;
  }

  /* The rounded frame belongs to the wrapper. Keeping the outer border on
     the collapsed table itself produces square/missing corners in browsers. */
  .comparison-table-wrap {
    border: 1px solid #696969;
    border-radius: 12px;
    overflow: hidden;
  }

  .comparison-table {
    border: 0;
  }

  /* 360px total: 99 + 40 + 77 + 65 + 79. The extra width in the final
     column keeps “специалиста” fully visible without reducing its font. */
  .comparison-table .criteria-col { width: 99px; }
  .comparison-table .nika-width { width: 40px; }
  .comparison-table col:nth-child(3) { width: 77px; }
  .comparison-table col:nth-child(4) { width: 65px; }
  .comparison-table col:nth-child(5) { width: 79px; }
}


/* 2026-09-14: final mobile comparison text fit. */
@media (max-width: 768px) {
  /* Keep the header exactly on two lines: “Поиск” / “в интернете”. */
  .comparison-search-heading .nowrap-line {
    white-space: nowrap;
  }

  /* The final label is the longest value in the narrow 79px column.
     Reduce only this mobile cell so the last character stays inside the frame. */
  .comparison-specialist-cell .mobile-copy {
    font-size: 11px;
    line-height: 1.35;
    letter-spacing: -0.15px;
    white-space: nowrap;
  }
}



/* 2026-09-14: Figma pale-yellow backplates behind the two explanation screens. */
.explanation-screen-underlay {
  display: block;
  position: absolute;
  z-index: 1;
  pointer-events: none;
  max-width: none;
}
.explanation-screen-underlay-left {
  left: 5px;
  top: 34px;
  width: 341px;
  height: 458px;
}
.explanation-screen-underlay-right {
  left: 31px;
  top: 304px;
  width: 319px;
  height: 458px;
}

/* 2026-09-14: final mobile fixed-header override. */
.site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  margin-top: 0 !important;
  z-index: 9999 !important;
}

/* 2026-09-14: mobile header/FAQ polish.
   Keep the fixed header fully opaque and center FAQ chevrons vertically. */
@media (max-width: 768px) {
  .site-header {
    background: #ffffff !important;
    background-color: #ffffff !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .accordion summary::after {
    top: 50% !important;
    right: 16px !important;
    height: 30px;
    line-height: 30px;
    transform: translateY(-50%) !important;
    transform-origin: 50% 50%;
  }

  .accordion details[open] summary::after {
    transform: translateY(-50%) rotate(180deg) !important;
  }
}

/* 2026-09-14: interactive Nika chat layout.
   Keep controls pinned to the bottom while AI/error messages can vary in height. */
@media (max-width: 768px) {
  .hero-chat-phone {
    height: 519px !important;
    min-height: 519px !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .hero-chat-subject {
    flex: 0 0 auto;
  }

  .hero-chat-messages {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }

  .hero-chat-messages::-webkit-scrollbar {
    display: none;
  }

  .hero-chat-question {
    flex: 0 0 auto;
    margin: 0 0 0 auto;
  }

  .hero-chat-answer {
    flex: 0 0 auto;
    margin: 0;
  }

  .hero-chat-chips {
    flex: 0 0 auto;
    margin-top: 10px;
  }

  .hero-chat-input {
    flex: 0 0 auto;
    margin-top: 20px;
  }
}

/* 2026-09-14: persistent mobile dialogue. Messages fill from the bottom and scroll upward. */
@media (max-width: 768px) {
  .hero-chat-phone {
    height: 519px !important;
    min-height: 519px !important;
    padding: 71px 8px 13px !important;
  }

  .hero-chat-messages {
    width: 100%;
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 0 4px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .hero-chat-messages::-webkit-scrollbar {
    display: none;
  }

  .hero-chat-messages > .hero-chat-bubble:first-child {
    margin-top: auto !important;
  }

  .hero-chat-messages .hero-chat-question,
  .hero-chat-messages .hero-chat-answer {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .hero-chat-messages .hero-chat-question {
    align-self: flex-end;
    width: min(277px, calc(100% - 30px));
    margin: 0 !important;
  }

  .hero-chat-messages .hero-chat-answer {
    align-self: flex-start;
    width: 100%;
    margin: 0 !important;
  }

  .hero-chat-chips {
    flex: 0 0 auto;
    margin-top: 8px !important;
  }

  .hero-chat-input {
    flex: 0 0 auto;
    margin-top: 12px !important;
  }

  .hero-chat-loading {
    min-height: 48px;
  }
}

/* 2026-09-14: final visual polish after live chat testing. */
@media (max-width: 768px) {
  /* Familiar-situations grid: give the first column a little more breathing
     room from the left edge without moving the right edge. */
  .situation-grid {
    width: calc(100% - 4px);
    margin-left: 4px;
  }

  /* Keep the subject badge itself, but remove its opaque white fill so the
     dialogue remains visually continuous underneath it. */
  .hero-chat-subject {
    background: transparent !important;
  }

  /* The send.svg contains the full circular icon, so scaling the image up is
     what makes the white arrow itself visibly larger. */
  .hero-chat-send img {
    width: 26px !important;
    height: 26px !important;
  }

  /* Scale both speech-cloud texts with the viewport while keeping them inside
     their supplied cloud artwork on 390px and wider mobile frames. */
  .explanation-cloud-wrap p {
    font-size: clamp(14px, 3.65vw, 15px) !important;
    line-height: clamp(18px, 4.7vw, 20px) !important;
    letter-spacing: 0 !important;
  }

  .signup-tooltip p {
    font-size: clamp(14px, 3.65vw, 16px) !important;
    line-height: clamp(19px, 5vw, 22px) !important;
    letter-spacing: 0 !important;
  }
}

/* 2026-09-14: chat/card spacing correction after live mobile review. */
@media (max-width: 768px) {
  /* The subject badge is now an overlay rather than a separate white row.
     This frees vertical room for the dialogue and allows messages to scroll
     beneath the transparent badge instead of disappearing behind a blank band. */
  .hero-chat-phone {
    position: relative;
    padding: 56px 8px 13px !important;
  }

  .hero-chat-subject {
    position: absolute !important;
    z-index: 6;
    top: 70px !important;
    left: 50% !important;
    inset: auto auto auto 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .hero-chat-messages {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    padding: 54px 4px 4px !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Use a shrinkable spacer instead of margin-top:auto on the first message.
     Short conversations stay at the bottom; long conversations remain fully
     scrollable all the way back to the first message. */
  .hero-chat-messages::before {
    content: '';
    flex: 1 1 auto;
    min-height: 0;
  }

  .hero-chat-messages > .hero-chat-bubble:first-child {
    margin-top: 0 !important;
  }

  /* Restore the cloud copy to a size that actually fits the supplied artwork.
     It still scales slightly on wider phones, without forcing broken 6-line text. */
  .explanation-cloud-wrap p {
    inset: 40px 18px auto 28px !important;
    font-size: clamp(12px, 3.2vw, 13px) !important;
    line-height: clamp(16px, 4.25vw, 17px) !important;
    letter-spacing: 0 !important;
    text-wrap: balance;
  }

  .signup-tooltip p {
    padding: 0 34px 16px 28px !important;
    font-size: clamp(12px, 3.2vw, 13px) !important;
    line-height: clamp(18px, 4.6vw, 19px) !important;
    letter-spacing: 0 !important;
    text-wrap: balance;
  }

  /* Familiar-situations cards: remove the old width overhangs and give the
     text visibly more breathing room from the borders. */
  .situation-grid {
    width: calc(100% - 6px);
    margin-left: 6px;
    grid-auto-rows: 258px;
  }

  .situation-card {
    box-sizing: border-box;
    height: 258px;
    min-height: 258px;
    padding: 12px 11px 14px !important;
    gap: 10px;
  }

  .situation-icon {
    width: 90px;
    height: 96px;
    flex-basis: 96px;
  }

  .situation-copy {
    width: 100% !important;
    min-width: 0;
  }

  .situation-card h3,
  .situation-card:nth-child(n) p,
  .situation-card:nth-child(4) p,
  .situation-card:nth-child(6) p {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (min-width: 390px) and (max-width: 400px) {
  .situation-grid {
    grid-auto-rows: 258px;
  }

  .situation-card {
    height: 258px;
    min-height: 258px;
    padding: 12px 11px 14px !important;
  }

  .situation-copy {
    display: grid;
    grid-template-rows: auto auto;
    row-gap: 6px;
  }

  .situation-card h3 {
    height: auto;
    min-height: 36px;
    margin: 0;
    font-size: 15px;
    line-height: 18px;
  }

  .situation-card:nth-child(n) p {
    margin: 0;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: -.1px;
  }
}

/* 2026-09-14: final mobile balance pass — cards, tooltips and chat subject badge. */
@media (max-width: 768px) {
  /* Situation cards: equal height only within each grid row, while allowing
     every row to shrink to its real content height. Side and bottom padding
     are now identical, so the copy no longer sits in a tall empty box. */
  .situation-grid {
    grid-auto-rows: auto !important;
    align-items: stretch !important;
  }

  .situation-card {
    height: auto !important;
    min-height: 0 !important;
    padding: 14px !important;
    gap: 10px !important;
    align-self: stretch;
  }

  .situation-icon {
    width: 90px !important;
    height: 96px !important;
    flex: 0 0 96px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
  }

  .situation-copy {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    row-gap: 0 !important;
  }

  .situation-card h3 {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 36px !important;
    margin: 0 0 6px !important;
    font-size: 15px !important;
    line-height: 18px !important;
    letter-spacing: -.2px !important;
  }

  .situation-card:nth-child(n) p,
  .situation-card:nth-child(4) p,
  .situation-card:nth-child(6) p {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 16px !important;
    letter-spacing: -.08px !important;
  }

  /* Keep the illustration/title guide consistent across all six cards. */
  .situation-text-line {
    max-width: 100%;
  }

  /* The explanatory card next to Nika should hug its copy instead of keeping
     a large fixed blank area below the last line. */
  .situation-tooltip {
    width: 194px !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 12px 14px !important;
  }

  .situation-tooltip p {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 17px !important;
    letter-spacing: 0 !important;
  }

  /* Slightly enlarge the final speech cloud and its copy together so the
     type reads better without touching the artwork edges. */
  .signup-tooltip {
    left: 4px !important;
    top: 4px !important;
    width: 286px !important;
    height: 210px !important;
  }

  .signup-tooltip p {
    padding: 0 36px 14px 30px !important;
    font-size: clamp(14px, 3.75vw, 15px) !important;
    line-height: clamp(19px, 5vw, 20px) !important;
    letter-spacing: 0 !important;
    text-wrap: balance;
  }

  /* Only the badge itself is white. It lives in the normal flex flow with
     breathing room below the header, so it no longer overlaps the dialogue. */
  .hero-chat-phone {
    padding: 56px 8px 13px !important;
  }

  .hero-chat-subject {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    flex: 0 0 auto !important;
    margin: 14px auto 10px !important;
    background: #fff !important;
    opacity: 1 !important;
    box-shadow: none !important;
  }

  .hero-chat-messages {
    padding: 0 4px 4px !important;
  }
}

@media (min-width: 390px) and (max-width: 400px) {
  .situation-grid {
    grid-auto-rows: auto !important;
  }

  .situation-card {
    height: auto !important;
    min-height: 0 !important;
    padding: 14px !important;
  }

  .situation-copy {
    display: flex !important;
    flex-direction: column !important;
  }
}


/* 2026-09-15: final mobile chat rail correction.
   The scroll rail extends behind the chips, while bottom padding keeps the
   newest message above them. Bubble tails stay within the viewport instead of
   creating horizontal page scrolling. */
@media (max-width: 768px) {
  .hero-chat-phone {
    position: relative !important;
    height: 519px !important;
    min-height: 519px !important;
    padding: 0 !important;
    display: block !important;
    overflow: hidden !important;
  }

  .hero-chat-subject {
    position: absolute !important;
    z-index: 20 !important;
    top: 70px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    width: max-content !important;
    margin: 0 !important;
    background: #fff !important;
    opacity: 1 !important;
    box-shadow: none !important;
  }

  .hero-chat-messages {
    position: absolute !important;
    z-index: 2 !important;
    top: 56px !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 61px !important;
    width: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 58px 2px 54px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-x: none !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
  }

  .hero-chat-messages::before {
    content: '';
    flex: 1 1 auto;
    min-height: 0;
  }

  .hero-chat-messages > .hero-chat-bubble:first-child {
    margin-top: 0 !important;
  }

  .hero-chat-messages .hero-chat-question {
    align-self: flex-end !important;
    width: min(277px, calc(100% - 38px)) !important;
    margin: 0 9px 0 0 !important;
  }

  .hero-chat-messages .hero-chat-answer {
    align-self: flex-start !important;
    width: calc(100% - 18px) !important;
    margin: 0 0 0 9px !important;
  }

  .hero-chat-chips {
    position: absolute !important;
    z-index: 20 !important;
    left: 20px !important;
    right: auto !important;
    top: auto !important;
    bottom: 66px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .hero-chat-input {
    position: absolute !important;
    z-index: 20 !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 13px !important;
    top: auto !important;
    width: auto !important;
    margin: 0 !important;
  }

  /* User-approved card widths retained for the two final situation cards. */
  .situation-card:nth-child(5) .situation-copy,
  .situation-card:nth-child(5) h3,
  .situation-card:nth-child(5) h3 .mobile-copy,
  .situation-card:nth-child(6) .situation-copy,
  .situation-card:nth-child(6) h3,
  .situation-card:nth-child(6) h3 .mobile-copy {
    width: 165px !important;
    max-width: none !important;
  }
}

@media (max-width: 768px) {
  .hero-chat-phone {
    --chat-side: 10px;
  }

  /* Область диалога */
  .hero-chat-messages {
    left: var(--chat-side) !important;
    right: var(--chat-side) !important;
    width: auto !important;
  }

  /* Белый ответ Ники — ровно по тем же краям, что и input */
  .hero-chat-messages .hero-chat-answer {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Сообщение пользователя сохраняем уже, но правый край совпадает */
  .hero-chat-messages .hero-chat-question {
    margin-right: 0 !important;
  }

  /* Кнопки ровно по центру */
  .hero-chat-chips {
      left: var(--chat-side) !important;
      right: auto !important;
      transform: none !important;

      display: flex !important;
      justify-content: flex-start !important;
      gap: 10px !important;

      width: auto !important;
      margin: 0 !important;
      bottom: 70px !important;
    }
  }

  /* Поле ввода — те же 16px с обеих сторон */
  .hero-chat-input {
    left: var(--chat-side) !important;
    right: var(--chat-side) !important;
    width: auto !important;
  }

@media (max-width: 768px) {
  .situation-card {
    box-sizing: border-box !important;
    padding: 10px 10px 10px !important;
  }
}

@media (max-width: 768px) {
  .hero h1 mark {
    position: relative !important;
    display: inline-block !important;
    padding: 0 .08em !important;
  }

  .hero h1 mark::before {
    display: none !important;
    content: none !important;
  }

  .hero h1 .hero-rays {
    display: block !important;
    position: absolute !important;
    z-index: -1 !important;

    left: -12px !important;
    top: -14px !important;

    width: 118px !important;
    height: 60px !important;
    max-width: none !important;

    pointer-events: none !important;
  }
}

@media (max-width: 768px) {
  .situation-tooltip::before,
  .situation-tooltip::after {
    content: none !important;
    display: none !important;
  }
}

@media (max-width: 768px) {
  .feature-card {
    box-sizing: border-box !important;
    padding: 10px !important;
  }

  .feature-card h3,
  .feature-card p {
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    align-self: stretch !important;
  }
}

@media (max-width: 768px) {
  .situation-card:nth-child(6) p .situation-text-line {
    display: block !important;
  }
}

/* ===== FIX: situation cards on wider iPhones ===== */

@media (min-width: 391px) and (max-width: 430px) {

  .situation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .situation-card {
    min-width: 0;
    box-sizing: border-box;
  }

  .situation-copy {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .situation-card h3,
  .situation-card p {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;

    overflow-wrap: normal;
    word-break: normal;
  }
}

/* ===== FIX: title highlights on iPhone Safari ===== */

.section h2 mark {
  position: relative;
  z-index: 0;
  isolation: isolate;
  background: transparent;
}

.section h2 mark::before {
  z-index: -1;
}

/* ===== FINAL RESPONSIVE FIX: situations ===== */

@media (max-width: 768px) {

  .situations {
    width: 100%;
    padding-left: 0px;
    padding-right: 0px;

    box-sizing: border-box;
    overflow: hidden;
  }

  .situation-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    width: 100%;
    max-width: 100%;

    gap: 10px;

    padding-left: 0 !important;
    padding-right: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box;
  }

  .situation-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    box-sizing: border-box;

    padding-left: 12px;
    padding-right: 12px;
  }

  .situation-copy {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .situation-copy h3,
  .situation-copy p {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    box-sizing: border-box;

    white-space: normal !important;
    overflow-wrap: normal;
    word-break: normal;
  }

  .situations .mobile-copy {
    display: inline !important;
    white-space: normal !important;
  }

  .situations .situation-text-line {
    display: inline !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    white-space: normal !important;
  }

  .situations .situation-text-line:not(:last-child)::after {
    content: " ";
  }
}

/* ===== FINAL RESPONSIVE FIX: capabilities ===== */

@media (max-width: 768px) {

  .capabilities {
    width: 100%;
    padding: 0;

    box-sizing: border-box;
    overflow: hidden;
  }

  .capabilities .capabilities-inner {
    width: calc(100% - 40px) !important;
    max-width: none !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    box-sizing: border-box;
  }

  .capability-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    width: 100%;
    max-width: 100%;

    gap: 10px;

    padding: 0 !important;
    margin: 0 !important;

    box-sizing: border-box;
  }

  .feature-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    box-sizing: border-box;

    padding-left: 12px;
    padding-right: 12px;
  }

  .feature-copy {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    box-sizing: border-box;
  }

  .feature-copy h3,
  .feature-copy p {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    box-sizing: border-box;

    white-space: normal !important;
    overflow-wrap: normal;
    word-break: normal;
  }

  .capabilities .mobile-copy {
    white-space: normal !important;
  }

  .capabilities .capability-lines {
    white-space: normal !important;
  }

  .capabilities .capability-lines span {
    white-space: normal !important;
  }
}

/* ===== FINAL: explanation cloud bigger ===== */

@media (max-width: 768px) {

  .explanation .explanation-cloud-wrap {
    position: relative !important;

    width: 270px !important;
    height: 190px !important;
  }

  .explanation .explanation-cloud-wrap > img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
  }

  .explanation .explanation-cloud-wrap > p {
    position: absolute !important;

    top: 30px !important;
    left: 14px !important;
    right: 14px !important;

    width: auto !important;
    height: 96px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;

    font-size: 13px !important;
    line-height: 1.35 !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;

    transform: none !important;

    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;

    box-sizing: border-box !important;
  }
}

@media (max-width: 768px) {

  /* ОБЛАКО */
  .explanation .explanation-cloud-wrap {
    position: relative !important;

    width: 260px !important;   /* ширина облака */
    height: 170px !important;  /* высота облака */
  }

  .explanation .explanation-cloud-wrap > img {
    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
  }

  /* ТЕКСТ ВНУТРИ ОБЛАКА */
  .explanation .explanation-cloud-wrap > p {
    position: absolute !important;

    top: 30px !important;      /* выше / ниже */
    left: 20px !important;     /* левее / правее */

    width: 230px !important;   /* ширина текстовой области */
    height: 100px !important;  /* высота текстовой области */

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;

    font-size: 13px !important;
    line-height: 1.3 !important;

    white-space: normal !important;

    transform: none !important;
  }
}