/* The platform's homepage, 09.10.2026: a website and its booking notice, real demo previews, dark actions on light
   surfaces and compact outcomes whose complete conversations remain available by keyboard and without scripts. */
html:not(.forest) :is(.btn.lime, .topbar-cta, .mobile-cta, .nav-cta) { background: var(--forest); color: var(--on-forest); border-color: var(--forest); }
html:not(.forest) :is(.btn.lime, .topbar-cta, .mobile-cta, .nav-cta):hover { background: var(--forest-deep); color: var(--on-forest); }
html:not(.forest) :is(#hero-join, #hero-copy-join, #proof-join, #start-join, .plan.recommended .btn.lime) { background: var(--lime); color: var(--ink); border-color: var(--lime); }
html:not(.forest) :is(#hero-join, #hero-copy-join, #proof-join, #start-join, .plan.recommended .btn.lime):hover { background: var(--lime-hover); border-color: var(--lime-hover); }
/* The first screen's one ask in the brand's lime (the owner, 14.10.2026: the dark button beside the dark headline did not
   ask to be pressed): «Подключить компанию — месяц бесплатно», «Без карты.» beside it and a lighter step under them —
   the sphere's demo cabinet. A phone's button keeps «Подключить компанию» and the free month goes to the line under it. */
.hero .actions:has(.hero-demo-first) { flex-wrap: wrap; row-gap: 10px; }
.hero-demo-first { flex-basis: 100%; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.hero-demo-first.v { display: none; }
body[data-for=""] .hero-demo-first.v-any, body[data-for="auto"] .hero-demo-first.v-auto,
body[data-for="beauty"] .hero-demo-first.v-beauty, body[data-for="dental"] .hero-demo-first.v-dental { display: block; }
.hero .note-terms { display: none; }
@media (max-width: 760px) {
  .hero .btn-terms { display: none; }
  .hero .note-terms { display: inline; }
  .hero-demo-first { text-align: center; padding: 6px 0; }
}
/* The last block's lime as the first screen's (the review of 09.11.2026): where its whole label would take two lines —
   its column under 410 px, a phone's and 761–819 px beside the form — it says «Подключить компанию», and the terms are
   the line under it. */
.start-terms { display: none; margin: 10px 0 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
@media (max-width: 819px) {
  .final-self .btn-terms { display: none; }
  .final-self .start-terms { display: block; }
}
@media (max-width: 760px) {
  .final-self .start-terms { text-align: center; }
}
.pick.auto { --tone: #132a4a; }
.pick.beauty { --tone: #4a1d33; }
.pick.dental { --tone: #0e4a55; }
.pick.sport { --tone: #d62828; }
.hero-top > .sheet { overflow: hidden; }
.hero-top > .sheet .chat-head { padding: 14px 16px; }
.hero-top > .sheet .chat-head h2 { font-size: 16px; }
.hero-top > .sheet .sheet-demo-link { position: relative; z-index: 1; }
.hero-top > .sheet .sheet-demo-link::after { display: none; }
.hero-top > .sheet:is(:hover, :focus-within) { transform: none; }
.hero-strip .chat-head { justify-content: start; gap: 8px; padding-block: 6px; }
.hero-strip .chat-head b { font-size: 12px; }
.hero-strip .chat-head > span { margin-left: auto; }
.hero-receipt { margin: 8px 16px; padding: 10px 14px; border: 1px solid var(--card-edge); border-left: 3px solid var(--forest); border-radius: 8px; background: var(--shade); font-size: 13px; line-height: 1.4; }
.hero-receipt p { margin: 0 0 4px; }
.hero-receipt p:last-child { margin-bottom: 0; }
.hero-receipt-label { color: var(--muted); font-size: 11px; }
.hero-conversation { border-top: 1px solid var(--rule); }
.hero-conversation > summary, .story-example > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 10px 16px; color: var(--forest); font-size: 13px; font-weight: 600; cursor: pointer; list-style: none; }
:is(.hero-conversation, .story-example) > summary::-webkit-details-marker { display: none; }
:is(.hero-conversation, .story-example) > summary::after { content: "+" / ""; font-size: 20px; }
:is(.hero-conversation, .story-example)[open] > summary::after { content: "−" / ""; }
.hero-conversation .chat-rows > li, .hero-conversation .keys .on, .hero-conversation .out b { animation: none !important; opacity: 1; transform: none; }
.hero-conversation .out b { background-size: 100% 100%; }
.hero-conversation .keys .on { background: var(--forest); color: var(--lime); }
.hero-dialogue-link { display: block; color: inherit; text-decoration: none; }
.hero-dialogue-link:is(:hover, :focus-visible) { outline: 2px solid var(--forest); outline-offset: -2px; }
.hero-dialogue-hint { display: block; padding: 12px 16px; border-top: 1px solid var(--rule); color: var(--forest); font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.hero > .picker { padding: 16px 20px 12px; }
.hero > .picker .pick:not(.stay) a { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "preview preview" "icon name" "icon co"; align-content: start; align-items: center; gap: 0 8px; padding: 0 10px 10px; overflow: hidden; }
.pick-preview { grid-area: preview; display: block; width: calc(100% + 20px); max-width: none; height: 64px; margin: 0 -10px 10px; object-fit: cover; object-position: center 25%; border-bottom: 1px solid var(--rule); }
.hero > .picker .pick:not(.stay) .pick-icon { width: 24px; height: 24px; margin: 0; }
.hero > .picker .pick:not(.stay) .pick-name { font-size: 16px; }
.hero > .picker .pick:not(.stay) .pick-go { display: grid; top: auto; bottom: 12px; right: 6px; width: 12px; height: 24px; font-size: 18px; background: none; color: var(--ink); }
.hero > .picker .pick:not(.stay) .pick-co { padding-right: 10px; }
/* A sphere's single demo shows the complete site, capped at 320 px. Stretching the catalogue's shallow preview
   across the whole panel magnified a thumbnail and cropped almost everything but its heading. */
body:is([data-for="auto"], [data-for="beauty"], [data-for="dental"]) .pick-preview {
  width: 100%; max-width: 320px; height: auto; aspect-ratio: 320 / 189;
  margin: 10px auto; object-fit: contain; border: 1px solid var(--rule); border-radius: 6px;
}
@media (min-width: 761px) {
  body:is([data-for="auto"], [data-for="beauty"], [data-for="dental"]) .hero > .picker .pick a {
    grid-template-columns: 320px auto minmax(0, 1fr);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: "preview . ." "preview icon name" "preview icon co" "preview . .";
    align-content: center; column-gap: 16px; padding: 0 44px 0 0;
  }
  body:is([data-for="auto"], [data-for="beauty"], [data-for="dental"]) .pick-preview {
    grid-row: 1 / -1; margin: 0; border: 0; border-right: 1px solid var(--rule); border-radius: 0;
  }
  body:is([data-for="auto"], [data-for="beauty"], [data-for="dental"]) .hero > .picker .pick .pick-go {
    top: calc(50% - 12px); bottom: auto; right: 14px;
  }
}
.story-outcome { padding: 28px; border: 1px solid var(--card-edge); border-radius: 18px; background: var(--sheet); }
.story-eyebrow { margin: 0 0 20px; color: var(--muted); font-size: 13px; }
.return-path { margin: 0; padding: 0; list-style: none; counter-reset: path; }
.return-path li { position: relative; display: grid; gap: 4px; padding: 0 0 24px 48px; counter-increment: path; }
.return-path li:last-child { padding-bottom: 0; }
.return-path li::before { content: counter(path); position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--forest); color: var(--on-forest); font: 600 13px/1 var(--mono); }
.return-path li:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 34px; bottom: 4px; width: 1px; background: var(--rule); }
.return-path b { font-size: 20px; }
.return-path span { color: var(--muted); font-size: 15px; }
.story-example { margin-top: 12px; border: 1px solid var(--rule); border-radius: 12px; background: var(--sheet); }
.story-example > summary { padding: 12px 20px; font-size: 14px; }
.story-example .chat { margin: 0; }
.cashback-outcome { background: var(--forest); color: var(--on-forest); border-color: var(--forest); }
.cashback-outcome .story-eyebrow { color: var(--forest-muted); }
.bonus-source, .bonus-visit { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin: 0; }
.bonus-source b, .bonus-visit b { font-size: 42px; font-weight: 600; color: var(--lime); letter-spacing: -.03em; }
.bonus-source span, .bonus-visit span { max-width: 18em; color: var(--forest-muted); font-size: 14px; }
.bonus-transfer { padding: 8px 0; color: var(--forest-muted); font-size: 24px; }
.bonus-settlement { margin: 24px 0 0; padding-top: 20px; border-top: 1px solid #ffffff40; color: var(--on-forest); font-size: 15px; }
@media (max-width: 1000px) {
  .hero > .picker .pick:not(.stay) .pick-name { font-size: 15px; }
}
@media (max-width: 760px) {
  .hero > .picker { padding: 16px 12px; }
  .hero > .picker .pick:not(.stay) a { padding: 0 8px 10px; column-gap: 6px; }
  .pick-preview { width: calc(100% + 16px); height: 52px; margin: 0 -8px 10px; }
  .hero > .picker .pick:not(.stay) .pick-name { font-size: 14px; }
  .hero > .picker .pick:not(.stay) .pick-icon { width: 20px; height: 20px; }
  .hero > .picker .pick:not(.stay) .pick-icon .icon { width: 13px; height: 13px; }
  .hero > .picker .pick:not(.stay) .pick-go { display: none; }
  .hero > .picker .pick:not(.stay) .pick-co { padding: 0; font-size: 11px; }
  .story-outcome { padding: 24px 20px; }
}
@media (max-width: 350px) {
  .hero > .picker .pick:not(.stay) a { grid-template-columns: minmax(0, 1fr); grid-template-areas: "preview" "name" "co"; }
  .hero > .picker .pick:not(.stay) .pick-icon { display: none; }
}

/* «Всё в одном кабинете» right after the first screen (13.10.2026): the heading and its line, then the six groups as a
   ruled list — two columns from 761 px, one on a phone, no cards: a glyph and a bold name, one sentence, one text link.
   The glyphs (14.10.2026) come from app/desk_icons.py: four are the cabinet menu's own (calendar-days, users, wallet,
   megaphone), two the landing's (package, chart-column). */
.all-in-one { margin-top: 16px; margin-bottom: 32px; padding-block: 8px; }
.all-heading h2 { max-width: 26em; margin: 0; font-size: 28px; line-height: 1.2; letter-spacing: -.02em; }
.all-heading > p { max-width: 44em; margin: 10px 0 0; color: var(--muted); font-size: 16px; line-height: 1.5; }
.all-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; margin: 24px 0 0; padding: 0; list-style: none; }
.all-list > li { display: block; padding: 18px 0 20px; border-top: 1px solid var(--rule); font-size: 15px; line-height: 1.5; }
.all-list b { font-size: 16px; font-weight: 650; }
/* A group's glyph (the owner, 14.10.2026: «не хватает мысленных якорей картинками?»): 20 px on its name's line, -4px
   puts its middle on the name's capitals; in the sentence's colour, so the name stays the strongest mark. The landing
   draws such icons only here, the block that maps the cabinet's sections: never in a circle or a tile, on a
   background, in a colour of their own per group or with a hover, and none in the page's other bold-lead lists. */
.all-list .all-icon { width: 20px; height: 20px; margin-right: 8px; vertical-align: -4px; color: var(--muted); }
.all-list span { color: var(--muted); }
.all-list .text-link { display: table; margin-top: 8px; font-weight: 650; }
/* The quiet way down to the cashback, a 44 px row as the links over it (WCAG 2.2 target size, the acceptance of
   10.11.2026: 21 px high, it failed once the home opened «Всё в одном кабинете»). */
.all-quiet { display: table; margin: 0; padding: 11px 0; color: var(--muted); font-size: 14px; line-height: 22px; text-underline-offset: 4px; }
.all-note { max-width: 56em; margin: 0; padding-top: 14px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 14px; line-height: 1.5; }
.all-note + .all-note { margin-top: 0; border-top: 0; padding-top: 8px; }
.start-needs { max-width: 30em; margin: 0 0 var(--s3); color: var(--muted); font-size: 15px; line-height: 1.5; }
.feature-details { margin-top: 20px; }
.feature-details > summary, .product-details > summary { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; min-height: 44px; padding: 12px 0; border-block: 1px solid var(--rule); color: var(--forest); font-size: 15px; font-weight: 600; cursor: pointer; list-style: none; }
:is(.feature-details, .product-details) > summary::-webkit-details-marker { display: none; }
:is(.feature-details, .product-details) > summary::after { content: "+" / ""; flex: none; font-size: 22px; }
:is(.feature-details, .product-details)[open] > summary::after { content: "−" / ""; }
.feature-details > .show-items { margin-top: 16px; }
.after-care-overview { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 56px; }
.after-care-plan { display: inline-block; padding: 4px 10px; border-radius: 6px; background: var(--shade); color: var(--muted); font-size: 13px; }
.after-care-heading h2 { max-width: 18em; margin: 12px 0; font-size: clamp(28px, 3.1vw, 42px); line-height: 1.12; }
.after-care-heading > p { max-width: 32em; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.5; }
.after-care-result { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 24px; border: 1px solid var(--card-edge); border-left: 4px solid var(--forest); border-radius: 14px; background: var(--sheet); color: var(--ink); text-decoration: none; }
.after-care-result:is(:hover, :focus-visible) { outline: 2px solid var(--forest); outline-offset: 3px; }
.after-care-result-label { color: var(--muted); font-size: 14px; }
.after-care-result > strong { font-size: 26px; line-height: 1.2; }
.estimate-result { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 0; }
.estimate-result dt { margin-bottom: 4px; color: var(--muted); font-size: 13px; }
.estimate-result dd { margin: 0; font: 600 clamp(24px, 2.4vw, 34px)/1.25 var(--mono); white-space: nowrap; }
.estimate-result > div:last-child { color: var(--forest); }
.after-care-result-note { color: var(--muted); font-size: 14px; line-height: 1.5; }
.after-care-result-action { margin-top: 4px; color: var(--forest); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.product-details { margin-top: 20px; }
.product-details > summary { padding: 14px 0; font-size: 15px; line-height: 1.35; }
.product-details[open] > .show { margin-top: 28px; }
.after-care:has(.product-details:not([open])) { padding-bottom: 24px; }
@media (max-width: 760px) {
  .all-in-one { margin-top: 24px; }
  .all-heading h2 { font-size: 22px; }
  .all-heading > p { font-size: 15px; }
  .all-list { grid-template-columns: minmax(0, 1fr); }
  .after-care-overview { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .after-care-result { padding: 20px; }
  .estimate-result { gap: 12px; }
}

/* The first screen's sheet beyond the booking (the owner, 13.10.2026: one service for the whole business): what the same
   booking leads to in the cabinet — ruled lines, a bold section and its one phrase, no cards and no links; «После
   визита:» a quiet caption over what comes of the visit. The rows come in one after another on the first view, after the
   booking, as the conversation's rows do (site.js .seen); with less motion, without the script and in print they stand. */
.hero-receipt-label { margin-top: 4px; font-size: 12px; }
.cabinet { padding: 0 16px 8px; border-top: 1px solid var(--rule); }
.cabinet-rows { margin: 0; padding: 0; list-style: none; }
.cabinet-rows > li { grid-template-columns: 7.8em minmax(0, 1fr); gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--hair, var(--rule)); font-size: 13px; line-height: 1.4; }
.cabinet-rows > li:last-child { border-bottom: 0; }
/* A row of a sphere's own (class «v v-…») is a grid where its sphere's words show (site.css .v): the same specificity
   ladder, one step higher. */
.cabinet-rows > li:not(.v),
body[data-for=""] .cabinet-rows > li.v-any,
body[data-for="auto"] .cabinet-rows > li.v-auto { display: grid; }
.cabinet-rows b { font-weight: 650; color: var(--ink); }
.cabinet-rows span { color: var(--muted); }
.cabinet-after { margin: 2px 0 0; padding-top: 8px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 12px; line-height: 1.3; }
.sheet > .cabinet-rows { padding: 4px 16px 0; border-top: 1px solid var(--rule); }
.cabinet-link { display: block; padding: 12px 16px 14px; border-top: 1px solid var(--rule); color: var(--forest); font-size: 13px; font-weight: 600; text-underline-offset: 4px; }
.cabinet-link:focus-visible { outline: 2px solid var(--forest); outline-offset: -2px; }
.sheet :is(.cabinet-rows > li, .cabinet-after) { animation: sheet-row 0.4s ease-out both paused; }
.sheet.seen :is(.cabinet-rows > li, .cabinet-after) { animation-play-state: running; }
.sheet .cabinet > .cabinet-rows:first-child > li:nth-child(1), .sheet > .cabinet-rows > li:nth-child(1) { animation-delay: 0.4s; }
.sheet .cabinet > .cabinet-rows:first-child > li:nth-child(2), .sheet > .cabinet-rows > li:nth-child(2) { animation-delay: 0.7s; }
.sheet .cabinet > .cabinet-rows:first-child > li:nth-child(3), .sheet > .cabinet-rows > li:nth-child(3) { animation-delay: 1s; }
.sheet .cabinet > .cabinet-rows:first-child > li:nth-child(4) { animation-delay: 1s; }
.sheet .cabinet-after { animation-delay: 1.3s; }
.sheet .cabinet-after ~ .cabinet-rows > li:nth-child(1) { animation-delay: 1.5s; }
.sheet .cabinet-after ~ .cabinet-rows > li:nth-child(2) { animation-delay: 1.8s; }
.sheet .cabinet-after ~ .cabinet-rows > li:nth-child(3) { animation-delay: 2.1s; }
.sheet .cabinet-after ~ .cabinet-rows > li:nth-child(4) { animation-delay: 2.4s; }
/* A phone's strip: under the booking, in its band, the one line into the cabinet — the sheet's rows have no room on its
   first screen, and the free start stays on it. */
.hero-strip-cabinet { display: inline-block; color: var(--forest); font-size: 14px; font-weight: 600; line-height: 1.4; text-underline-offset: 3px; }
.hero-strip-cabinet:focus-visible { outline: 2px solid var(--forest); outline-offset: -2px; }
@media print {
  .sheet :is(.cabinet-rows > li, .cabinet-after) { animation: none; }
}