/* The company's website (app/business_page.py's full site, a service's, a specialist's, an article's page and «Условия
   покупки»): one booking page in four looks by sphere — the owner's «Все четыре по сферам», 09.10.2026
   (app/site_looks.py). The colours, the fonts and the first screen follow the body's site-<sphere>; the booking is the
   same for all. The palette is business.css's --s-* tokens, each sphere's values here from the approved mockups:
   - a car service, «Цветная сцена»: warm paper, the navy scene, the orange accent with navy words; Unbounded;
   - a salon, «Расписание на витрине»: ivory, berry, the gold accent with berry words; Playfair Display. A barbershop
     keeps the salon's layout in graphite and gold on a warm off-white, never the salons' berry;
   - a clinic, «Спокойная клиника»: sand, a pale teal scene, the teal accent with white words, mint ticks; Lora;
   - a club, «Ночной зал»: near-black, charcoal cards, off-white words, the red accent with white words; Oswald in
     capitals — its headings alone.
   Every pair of words and their ground reads at 4.5:1 or more — the club's red as words on its black is a lighter red
   (--s-scene-accent, --s-link) —, a control's outline (--s-edge) at 3:1. Prices are never set in Playfair, which has no
   ₽ (playfair-display.source.md): Manrope is second in every display stack, prices are Manrope's or mono's. */
body.company-site.site-auto {
  --s-bg: #f4efe6; --s-surface: #ffffff; --s-sunken: #eef2f7; --s-ink: #0e1a2b; --s-muted: #5b6676; --s-line: #e4dccb;
  --s-scene: #132a4a; --s-scene-ink: #ffffff; --s-scene-muted: #c9d3e2;
  --s-accent: #ff8a3d; --s-accent-ink: #132a4a; --s-pick: #132a4a; --s-pick-ink: #ffffff;
  --s-display: "Unbounded", Manrope, system-ui, sans-serif; --s-display-weight: 700; --s-display-case: none; --s-radius: 24px;
  --s-heading: #132a4a; --s-edge: #7d8899; --s-hi: #e3e9f2; --s-link: #132a4a; --s-ghost: #132a4a;
  --s-scene-accent: #ff8a3d; --s-scene-line: rgb(244 239 230 / .45); --s-head: var(--s-scene);
}
body.company-site.site-beauty {
  --s-bg: #f7f1ea; --s-surface: #ffffff; --s-sunken: #f9eef2; --s-ink: #2b1720; --s-muted: #6e5a63; --s-line: #eadcd5;
  --s-scene: #4a1d33; --s-scene-ink: #ffffff; --s-scene-muted: #e2c9d2;
  --s-accent: #e3b868; --s-accent-ink: #3a1628; --s-pick: #4a1d33; --s-pick-ink: #ffffff;
  --s-display: "NS Display Serif", Manrope, Georgia, serif; --s-display-weight: 600; --s-display-case: none; --s-radius: 24px;
  --s-heading: #3a1628; --s-edge: #9c7f8c; --s-hi: #f3dce3; --s-link: #4a1d33; --s-ghost: #4a1d33;
  --s-scene-accent: #e3b868; --s-scene-line: rgb(255 255 255 / .45); --s-head: var(--s-bg);
}
/* A barbershop: the salon's layout and Playfair, graphite and gold on a warm off-white — never the salons' berry. */
body.company-site.site-beauty.site-barber {
  --s-bg: #f4f2ee; --s-surface: #ffffff; --s-sunken: #efece6; --s-ink: #1f1f1f; --s-muted: #5e5a55; --s-line: #e2ded6;
  --s-scene: #2b2b2b; --s-scene-ink: #ffffff; --s-scene-muted: #d2cdc5;
  --s-accent: #c9a25a; --s-accent-ink: #1f1f1f; --s-pick: #2b2b2b; --s-pick-ink: #ffffff;
  --s-heading: #1f1f1f; --s-edge: #8a857e; --s-hi: #ece4d3; --s-link: #2b2b2b; --s-ghost: #2b2b2b;
  --s-scene-accent: #d9b56e;
}
body.company-site.site-health {
  --s-bg: #f2ede6; --s-surface: #ffffff; --s-sunken: #fbfaf7; --s-ink: #13262a; --s-muted: #56676b; --s-line: #e0d8cc;
  --s-scene: #ddeff0; --s-scene-ink: #0e3b44; --s-scene-muted: #56676b;
  --s-accent: #0e4a55; --s-accent-ink: #ffffff; --s-pick: #0e4a55; --s-pick-ink: #ffffff;
  --s-display: "NS Text Serif", Manrope, Georgia, serif; --s-display-weight: 500; --s-display-case: none; --s-radius: 26px;
  --s-heading: #0e3b44; --s-edge: #6e8a8c; --s-hi: #ddeff0; --s-link: #0e4a55; --s-ghost: #0e4a55;
  --s-scene-accent: #0e4a55; --s-scene-line: #6e8a8c; --s-scene-open: #2f9e62; --s-tick: #7fd8c6; --s-head: var(--s-bg);
}
body.company-site.site-sport {
  --s-bg: #121212; --s-surface: #1b1b1b; --s-sunken: #262626; --s-ink: #edeae6; --s-muted: #a8a39d; --s-line: #2a2a2a;
  --s-scene: #1b1b1b; --s-scene-ink: #ffffff; --s-scene-muted: #c9c4be;
  --s-accent: #d62828; --s-accent-ink: #ffffff; --s-pick: #d62828; --s-pick-ink: #ffffff;
  --s-display: "Oswald", Manrope, system-ui, sans-serif; --s-display-weight: 700; --s-display-case: uppercase; --s-radius: 26px;
  --s-heading: #ffffff; --s-edge: #8a8580; --s-hi: #2a2a2a; --s-link: #ff6b6b; --s-ghost: #edeae6;
  --s-scene-accent: #f04848; --s-scene-line: #74706b; --s-alert: #ff6b6b; --s-head: var(--s-bg);
  --s-pick-quiet: #ffffff; /* the red takes no quieter words at 4.5:1 */
  color-scheme: dark;
}
/* The hovers and the few brand names the business sheet still reads (a row's hover, a hairline inside a card) follow;
   the scenes' pictures reach the screen's edge, never past it (the first screens below). */
body.company-site {
  --s-accent-hover: color-mix(in srgb, var(--s-accent) 88%, #000); --s-pick-deep: color-mix(in srgb, var(--s-pick) 80%, #000);
  --s-pick-quiet: color-mix(in srgb, var(--s-pick-ink) 72%, var(--s-pick)); /* a count on the chosen tab */
  --s-open: #2f9e62; --s-scene-open: #4ade80; --s-tick: var(--s-hi); --row-hover: var(--s-sunken); --hair: var(--s-line);
  --s-head: var(--s-bg); /* the bar's and the menu's ground: the page's, a car service's its scene */
  background: var(--s-bg); color: var(--s-ink); overflow-x: clip;
}
.company-site ::placeholder { color: var(--s-muted); opacity: 1; }
.company-site :is(input, select, textarea):focus { border-color: var(--s-pick); box-shadow: 0 0 0 4px var(--s-hi); }
/* The sphere's display face over the first screen and the sections; a car service's sections in Manrope's heaviest, as
   its mockup sets them (Unbounded stays the first screen's); a club's headings in capitals. h3 stays Manrope. */
.company-site .biz :is(h1, h2) { font-family: var(--s-display); font-weight: var(--s-display-weight); text-transform: var(--s-display-case); color: var(--s-heading); }
.company-site.site-auto .biz h2 { font-family: var(--sans); font-weight: 800; letter-spacing: -.03em; }
.company-site.site-sport .biz :is(h1, h2) { letter-spacing: 0; }
/* The words brand.css leaves to the platform's muted grey (a paragraph, .muted, .hint): the sphere's own — the club's
   black takes no platform grey at 4.5:1 —, the scene's on a scene. */
:where(.company-site .biz) p, :where(.company-site .biz) :is(.muted, .hint) { color: var(--s-muted); }
:where(.company-site .biz :is(.biz-hero, .site-enquiry)) p,
:where(.company-site .biz :is(.biz-hero, .site-enquiry)) :is(.muted, .hint) { color: var(--s-scene-muted); }
/* The stars in the sphere's colour, no highlighter (the mockups); the missing ones faint. */
.company-site .biz .stars { background: none; color: var(--s-link); }
.company-site .biz-review .stars .off { color: color-mix(in srgb, var(--s-ink) 22%, transparent); }
/* The site's buttons in the sphere's look: the accent's a pill (a section's call, the memberships'), an outline the
   ghost's colour, a plain one the pick's. */
.company-site .control-main :is(.btn.primary, .btn.lime) { border: 0; border-radius: 999px; background: var(--s-accent); color: var(--s-accent-ink); font-weight: 800; }
.company-site .control-main :is(.btn.primary, .btn.lime):hover { background: var(--s-accent-hover); color: var(--s-accent-ink); }
.company-site .control-main .btn.ghost { border: 1.5px solid var(--s-ghost); border-radius: 999px; background: transparent; color: var(--s-ghost); }
.company-site .control-main .btn.ghost:hover { background: var(--s-sunken); }
.company-site .control-main .btn:not(.primary, .lime, .ghost) { background: var(--s-pick); color: var(--s-pick-ink); }
.company-site .control-main.biz { max-width: 1240px; }
.company-site .biz-page { display: block; }
/* The scene: a service's and a specialist's first screen, a card of the sphere's own colour — the car service's navy,
   the salon's berry, the clinic's pale teal, the club's charcoal; a home page wears its sphere's own first screen
   («the four first screens» below), whose light ones re-point these tokens to the page's own. */
.company-site .biz-hero { position: relative; top: auto; display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px; margin-bottom: 48px; padding: 44px; border-radius: var(--s-radius); background: var(--s-scene); color: var(--s-scene-ink); overflow: hidden; }
.company-site .biz-hero:not(.with-cover) { position: relative; top: auto; }
.company-site .biz-hero h1 { font-size: clamp(28px, 4vw, 54px); color: var(--s-scene-ink); margin-bottom: 24px; overflow-wrap: anywhere; }
.company-site .biz-hero .biz-kicker { color: var(--s-scene-muted); margin-bottom: 24px; }
.company-site .biz-hero .biz-tagline { font-size: 19px; color: var(--s-scene-ink); max-width: 29em; }
.company-site .biz-hero :is(.biz-also, .biz-next, .biz-proof, .biz-move) { color: var(--s-scene-muted); }
/* The average in the proof line stands on the scene too (it was ink on the forest, unreadable). */
.company-site .biz-hero .biz-proof b { color: var(--s-scene-ink); }
.company-site .biz-hero .stars { color: var(--s-scene-accent); }
/* The links on the scene are the scene's accent; the gift's plaque keeps the page's words on its highlighter. */
.company-site .biz-hero a:not(.btn, .site-slot, .site-chip, .site-picker-go, .site-ghost, .site-call-ghost),
.company-site .biz-hero button.biz-next-link { color: var(--s-scene-accent); }
.company-site .biz-hero .biz-next b { color: var(--s-scene-accent); background: none; text-decoration-color: currentColor; }
.company-site .biz-hero .biz-kicker a { color: inherit; } /* open now: quiet words with their dot, a link to the hours */
.company-site .biz-hero :is(.biz-branch-here, .biz-branch-switch) { color: var(--s-scene-ink); }
.company-site .biz-hero .biz-branches small { color: var(--s-scene-muted); }
.company-site .biz-hero .biz-branches small b { color: var(--s-scene-accent); }
.company-site .biz-hero .biz-branches { border-top-color: var(--s-scene-line); }
.company-site .biz-hero .biz-branches li { border-bottom-color: var(--s-scene-line); }
.company-site .biz-hero .biz-branches li > a:hover { background: color-mix(in srgb, var(--s-scene-ink) 10%, var(--s-scene)); box-shadow: -12px 0 0 color-mix(in srgb, var(--s-scene-ink) 10%, var(--s-scene)), 12px 0 0 color-mix(in srgb, var(--s-scene-ink) 10%, var(--s-scene)); }
.company-site .biz-hero .biz-gift { color: var(--s-ink); }
.company-site .biz-hero :is(.biz-pause, .biz-pause-note) { color: var(--s-scene-ink); border-color: var(--s-scene-accent); }
.company-site .biz-hero :focus-visible { outline-color: var(--s-scene-accent); }
.company-site .site-hero-media { position: relative; min-height: 320px; border-radius: 14px; overflow: hidden; }
/* A picture fills its box whatever its own proportions: the drawn covers (16:9) keep their subject, right of centre. */
.company-site .site-hero-media img { display: block; width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: 66% 50%; }
.company-site .biz-body { width: 100%; }
.company-site .biz-section { margin-bottom: 48px; }
.company-site .site-section-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 24px; }
.company-site .site-section-heading h2 { margin: 0; }
.company-site .site-section-heading > p { margin: 0; font-size: 13px; color: var(--s-muted); }
.company-site .site-visit { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; margin-bottom: 48px; }
.company-site .site-visit .site-section { margin: 0; padding: 28px; border: 1px solid var(--s-line); border-radius: var(--s-radius); background: var(--s-surface); }
.company-site #team .biz-people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; border: 0; }
.company-site #team .biz-people > li { min-width: 0; padding: 20px; border: 1px solid var(--s-line); border-radius: var(--s-radius); background: var(--s-surface); }
.company-site #team .biz-people > li::after { display: none; }
/* A specialist's photo inside the card's padding, their name, role and «Работы (N)» beside it — not under it. */
.company-site #team .biz-people > li:has(> .svc.has-photo) { padding-left: 88px; }
.company-site #team .biz-people .svc .who-photo { top: 20px; left: 20px; }
/* The name leads to the specialist's own page (app/specialist_page.py): a link of a thumb's height of its own, above
   the card's button — the card's top padding gives it the room, nothing overlaps the role line under it. The role and
   the nearest time stay the button's, on one line while the role keeps 9em beside the time; a narrower card (three
   columns at 1024 px, a photo's 88 px) puts the time under the role, from its start — never a word cut mid-way. The
   button keeps the name for the chat's words. */
.company-site #team .biz-people > li:has(> .who-page) { padding-top: 10px; }
.company-site #team .biz-people .who-page { position: relative; z-index: 1; display: inline-block; padding: 10px 0; font-size: 17px; font-weight: 600; line-height: 24px; color: var(--s-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--s-edge); }
.company-site #team .biz-people .who-page:hover { text-decoration-color: currentColor; }
.company-site .control-main #team .biz-people li:has(> .who-page) button.svc:not(.btn) { padding-top: 0; flex-wrap: wrap; row-gap: 2px; align-items: baseline; }
.company-site .control-main #team .biz-people li:has(> .who-page) .svc:not(.btn) > span:first-of-type { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.company-site .control-main #team .biz-people li:has(> .who-page) button.svc:not(.btn) small { order: 0; flex: 1 1 9em; min-width: 0; }
.company-site .control-main #team .biz-people li:has(> .who-page) button.svc:not(.btn) small .who-rating { white-space: normal; }
.company-site .control-main #team .biz-people li:has(> .who-page) button.svc:not(.btn) b.who-free { flex: none; margin-left: 0; }
/* A phone's card has no room for both on one line: the role takes its line whole, the time the next, from the left. */
@media (max-width: 699px) {
  .company-site .control-main #team .biz-people li:has(> .who-page) button.svc:not(.btn) small { flex: 1 1 100%; }
}
/* A clinic that books through МедФлекс: the row's booking is a link there (medical_web.book_links), the role its line. */
.company-site #team .biz-people li:has(> .who-page) > a.svc { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; padding: 0 0 12px; color: var(--s-ink); font-size: 14px; text-decoration: none; }
.company-site #team .biz-people li:has(> .who-page) > a.svc small { flex: 1 1 auto; font-size: 14px; color: var(--s-muted); }
.company-site #faq .site-section-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; align-items: start; }
.company-site #faq details { padding: 0; border: 0; border-bottom: 1px solid var(--s-line); border-radius: 0; background: transparent; }
.company-site #faq summary { cursor: pointer; min-height: 52px; padding: 16px 0; font-size: 15px; font-weight: 600; }
.company-site #about { max-width: 780px; font-size: 17px; }
.company-site .biz-promos { max-width: 860px; } /* «Акции»: a reading width, the benefit near its title */
.company-site .biz-section h2, .company-site .site-service-detail h2 { font-size: 30px; letter-spacing: -.8px; margin-bottom: 24px; }
.company-site #services h3 { display: inline-block; margin: 24px 0 16px; padding: 5px 12px; border-radius: 6px; background: var(--s-hi); font-size: 14px; color: var(--s-ink); }
/* The catalogue's tabs (business_site.catalog; the owner, 08.10.2026: «плашки незаметны»): a bar of 44 px tabs in
   16 px words, each with its count in mono, quieter than the word; the chosen one filled with the forest, the others
   white with a border of 4.0:1 against the page. The bar stays hidden without the script, every category shown under
   its heading then. A phone scrolls the bar sideways, never cutting a word, an edge fading while tabs wait past it
   (the script's `.more-left`, `.more-right`). */
.company-site .site-catalog-bar { position: relative; margin: 0 0 24px; }
.company-site .site-catalog-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.company-site .control-main .site-catalog-tabs button[data-service-tab]:not(.btn) { position: relative; display: inline-flex; flex: none; align-items: baseline; gap: 8px; padding: 10px 16px; min-height: 44px; border: 1px solid var(--s-edge); border-radius: 8px; background: var(--s-surface); color: var(--s-ink); font: 600 16px/1.4 var(--sans); white-space: nowrap; }
.company-site .control-main .site-catalog-tabs button[data-service-tab][aria-selected="true"]:not(.btn) { background: var(--s-pick); border-color: var(--s-pick); color: var(--s-pick-ink); }
.company-site .site-tab-count { font: 500 14px/1 var(--mono); color: var(--s-muted); }
.company-site [aria-selected="true"] > .site-tab-count { color: var(--s-pick-quiet); }
.company-site .site-catalog-bar:not([hidden]) + #service-catalog:not(.show-all) [data-service-group] > h3 { display: none; }
/* Under a large catalogue's shown category (business_site.catalog_more): how many more services and where, each
   category's name a button of its tab that reads as a link in the sentence — underlined, its tap area a finger's
   height around the words without moving a line. */
.company-site .site-catalog-more:not([hidden]) { display: block; margin: 24px 0 0; padding: 20px 0 0; border-top: 1px solid var(--s-line); }
.company-site .site-catalog-more p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--s-ink); }
.company-site .control-main button.site-catalog-goto:not(.btn) { display: inline; margin: -10px -2px; padding: 10px 2px; border: 0; border-radius: 4px; background: none; color: var(--s-ink); font: inherit; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.company-site .control-main button.site-catalog-goto:not(.btn):hover { background: none; text-decoration-thickness: 2px; }
.company-site .biz-who a.svc { text-decoration: none; }
.company-site .control-main details.biz-fold { margin: 0 0 24px; padding: 8px 24px 16px; border: 1px solid var(--s-line); border-radius: var(--s-radius); background: var(--s-surface); }
.company-site .control-main details.biz-fold > summary { font-size: 24px; }
.company-site .biz-fold-body { padding: 16px 0 0; }
.company-site .site-service-detail { max-width: 760px; padding: 0 0 40px; font-size: 18px; }
.company-site .site-back { display: inline-block; margin-bottom: 24px; font-size: 14px; }
.company-site .site-review-widget { width: 100%; height: 560px; border: 1px solid var(--s-line); border-radius: 12px; background: var(--s-surface); margin-bottom: 16px; }
.company-site .site-enquiry { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; padding: 40px; margin: 48px 0 24px; background: var(--s-scene); border-radius: var(--s-radius); color: var(--s-scene-ink); }
.company-site .site-enquiry h2 { font-size: 34px; line-height: 1.15; letter-spacing: -.8px; margin: 16px 0 24px; }
.company-site .site-enquiry-intro h2 { color: var(--s-scene-ink); }
.company-site .site-enquiry-intro > p { color: var(--s-scene-muted); }
.company-site .site-enquiry-note { font-size: 14px; color: var(--s-scene-muted); margin-top: 32px; }
.company-site .control-main details.site-human { margin: 24px 0 0; padding: 0; border: 1px solid var(--s-edge); border-radius: 12px; background: var(--s-surface); color: var(--s-ink); }
.company-site .control-main details.site-human > summary { padding: 16px 20px; font-size: 14px; font-weight: 600; min-height: 52px; cursor: pointer; }
.company-site .site-human > p, .company-site .site-human > form { margin: 0 20px 20px; }
.company-site .site-human > p { font-size: 13px; color: var(--s-muted); }
.company-site .site-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.company-site .site-form-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; margin: 0; min-width: 0; }
.company-site .site-form-grid label span { font-weight: 400; color: var(--s-muted); }
.company-site .site-form-grid input, .company-site .site-form-grid textarea, .company-site .site-form-grid select { box-sizing: border-box; width: 100%; min-height: 48px; margin: 0; padding: 12px; border: 1px solid var(--s-edge); border-radius: 8px; background: var(--s-surface); color: var(--s-ink); font: 400 16px/1.4 var(--sans); }
.company-site .site-field-wide { grid-column: 1/-1; }
.company-site .site-consent { display: flex; gap: 12px; margin: 20px 0; font-size: 12px; line-height: 1.6; align-items: start; }
.company-site .site-consent input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--s-pick); }
.company-site #enquiry-status { font-size: 14px; margin-bottom: 0; }
.company-site [id] { scroll-margin-top: 80px; }
.company-site .control-main button.biz-fab:not(.btn) { display: none; }
/* «Расписание» (app/site_classes.py): plain ruled rows — the time in mono, the class, the trainer and the hall. A computer
   shows the days side by side, a phone one day under its tab (the script's), today first. */
.company-site .site-days { display: flex; gap: 4px; margin: 0 0 16px; }
.company-site .site-days[hidden] { display: none; }
.company-site .control-main .site-days button[role="tab"]:not(.btn) { flex: 1 1 0; min-width: 0; max-width: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 56px; padding: 6px 2px; border: 1px solid var(--s-edge); border-radius: 8px; background: var(--s-surface); color: var(--s-ink); font: 500 13px/1.25 var(--sans); }
.company-site .control-main .site-days button[role="tab"]:not(.btn) b { font: 600 17px/1.25 var(--mono); }
.company-site .control-main .site-days button[role="tab"][aria-selected="true"]:not(.btn) { background: var(--s-pick); border-color: var(--s-pick); color: var(--s-pick-ink); }
.company-site .site-week { display: grid; grid-template-columns: repeat(var(--days, 7), minmax(0, 1fr)); gap: 0 20px; }
.company-site .site-day h3 { display: flex; flex-direction: column; margin: 0; padding: 0 0 10px; border-bottom: 2px solid var(--s-pick); font-size: 16px; line-height: 1.3; }
.company-site .site-day h3 small { font-size: 13px; font-weight: 500; color: var(--s-muted); }
.company-site .site-classes { list-style: none; margin: 0; padding: 0; }
.company-site .site-classes li { border-bottom: 1px solid var(--s-line); }
.company-site .site-class { display: flex; flex-direction: column; gap: 2px; min-height: 44px; padding: 10px 0; color: var(--s-ink); text-decoration: none; }
.company-site a.site-class:hover .site-class-name, .company-site a.site-class:hover .site-class-day { text-decoration: underline; text-underline-offset: 3px; }
.company-site .site-class-time { font: 600 15px/1.35 var(--mono); font-variant-numeric: tabular-nums; }
.company-site .site-class-name { display: block; font-size: 15px; font-weight: 600; line-height: 1.35; }
.company-site .site-class-what small { display: block; font-size: 13px; line-height: 1.4; color: var(--s-muted); }
.company-site .site-class-what .site-class-state { color: var(--s-alert); font-weight: 600; }
.company-site .site-class-off .site-class { color: var(--s-muted); }
.company-site .site-class-off .site-class-what .site-class-state { color: var(--s-muted); font-weight: 500; }
.company-site .site-week-note { margin: 16px 0 0; font-size: 14px; color: var(--s-muted); }
/* «Абонементы»: a ruled row a kind — what it gives and covers on the left, the price and a visit's price on the right. */
.company-site .site-memberships { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--s-line); }
.company-site .site-memberships li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 32px; padding: 20px 0; border-bottom: 1px solid var(--s-line); }
.company-site .site-memberships h3 { grid-column: 1; margin: 0; font-size: 19px; line-height: 1.3; }
.company-site .site-mship-price { grid-column: 2; grid-row: 1; justify-self: end; font: 600 20px/1.3 var(--mono); white-space: nowrap; }
.company-site .site-memberships p { grid-column: 1; margin: 0; font-size: 15px; }
.company-site .site-memberships .site-mship-covers { font-size: 14px; color: var(--s-muted); }
.company-site .site-memberships .site-mship-visit { grid-column: 2; grid-row: 2 / span 2; justify-self: end; align-self: start; max-width: 24em; text-align: right; font-size: 14px; color: var(--s-ink); }
.company-site .site-sum { font-family: var(--mono); font-weight: 600; white-space: nowrap; }
.company-site .site-mship-terms { max-width: 46em; margin: 16px 0 0; font-size: 14px; color: var(--s-muted); }
/* A kind's row is its button: the title's button stretched over the row, the row tinted under the pointer, «Оформить →»
   at its right, the keyboard's ring round the whole row. */
.company-site .site-memberships li { position: relative; transition: background-color .15s; }
.company-site .site-memberships li:hover { background: var(--row-hover, var(--s-sunken)); }
.company-site .control-main .site-memberships button.site-mship-pick:not(.btn):not(.logout):not(.delete-row) { display: inline; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.company-site .control-main .site-memberships button.site-mship-pick:not(.btn):not(.logout):not(.delete-row):hover { background: none; color: inherit; }
.company-site .site-mship-pick::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.company-site .site-memberships li:hover .site-mship-pick { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.company-site .site-mship-pick:focus-visible { outline: none; }
.company-site .site-memberships li:has(.site-mship-pick:focus-visible) { outline: 3px solid var(--s-pick); outline-offset: 2px; }
.company-site .site-memberships .site-mship-visit { grid-row: 2; }
.company-site .site-mship-go { grid-column: 2; grid-row: 3; justify-self: end; align-self: end; font-size: 14px; font-weight: 600; color: var(--s-ink); white-space: nowrap; }
.company-site .site-mship-action { margin: 20px 0 0; }
/* A class's page: when it runs, who leads it, the hall, the membership — headings over plain rows. */
.company-site .site-facts { margin: 32px 0 24px; }
.company-site .site-fact { margin: 0 0 28px; }
.company-site .site-fact h3 { margin: 0 0 8px; font-size: 19px; }
.company-site .site-fact > p { margin: 0; font-size: 16px; }
.company-site .site-facts .site-class { flex-direction: row; align-items: center; gap: 16px; }
.company-site .site-facts .site-class-day { min-width: 9.5em; font-size: 16px; font-weight: 600; }
.company-site .site-facts .site-class-what { display: flex; flex-wrap: wrap; gap: 0 12px; }
.company-site .site-leads, .company-site .site-kinds-list { list-style: none; margin: 0; padding: 0; }
.company-site .site-leads li { display: flex; align-items: center; gap: 16px; min-height: 72px; padding: 8px 0; border-bottom: 1px solid var(--s-line); }
.company-site .site-leads img { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.company-site .site-leads span, .company-site .site-kinds-list li { display: flex; flex-direction: column; gap: 2px; }
.company-site .site-leads small, .company-site .site-kinds-list small { font-size: 14px; color: var(--s-muted); }
.company-site .site-kinds-list li { padding: 10px 0; border-bottom: 1px solid var(--s-line); font-size: 16px; }
/* Seven columns need 1180 px (a class's name holds its word); a laptop's narrower window and a tablet take the tabs. */
@media (max-width: 1179px) {
  .company-site .site-week { display: block; }
  .company-site .site-day + .site-day { margin-top: 24px; }
  .company-site .site-class { flex-direction: row; align-items: baseline; gap: 16px; }
  .company-site .site-class-time { flex: none; width: 3.2em; }
}
@media (max-width: 699px) {
  .company-site .site-memberships li { column-gap: 16px; }
  .company-site .site-memberships .site-mship-visit { grid-column: 1 / -1; grid-row: auto; justify-self: start; max-width: none; text-align: left; }
  .company-site .site-mship-go { grid-column: 1 / -1; grid-row: auto; justify-self: start; margin-top: 4px; }
  .company-site .site-facts .site-class { flex-wrap: wrap; gap: 4px 16px; }
}
@media (max-width: 1023px) {
  .company-site .biz-hero { padding: 28px; gap: 24px; }
  .company-site #team .biz-people, .company-site #reviews .site-section-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .company-site .site-enquiry { gap: 24px; padding: 28px; }
}
@media (max-width: 699px) {
  .company-site [id] { scroll-margin-top: 64px; }
  .company-site .biz-hero { grid-template-columns: 1fr; padding: 24px; border-radius: 16px; margin-bottom: 32px; }
  .company-site .biz-hero h1 { font-size: clamp(26px, 7vw, 40px); }
  .company-site .biz .biz-tagline { font-size: 16px; }
  /* The bar in one row from edge to edge of the screen, scrolled sideways; room above and below for the focus ring. */
  .company-site .site-catalog-bar { margin: 0 -16px 20px; }
  .company-site .site-catalog-tabs { flex-wrap: nowrap; overflow-x: auto; padding: 4px 16px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .company-site .site-catalog-tabs::-webkit-scrollbar { display: none; }
  .company-site .site-catalog-bar::before, .company-site .site-catalog-bar::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: 56px; opacity: 0; pointer-events: none; transition: opacity .15s ease; }
  .company-site .site-catalog-bar::before { left: 0; width: 32px; background: linear-gradient(to left, transparent, var(--s-bg) 80%); }
  .company-site .site-catalog-bar::after { right: 0; background: linear-gradient(to right, transparent, var(--s-bg) 80%); }
  .company-site .site-catalog-bar.more-left::before, .company-site .site-catalog-bar.more-right::after { opacity: 1; }
  .company-site #team .biz-people, .company-site #reviews .site-section-body, .company-site #faq .site-section-body, .company-site .site-visit { grid-template-columns: 1fr; }
  .company-site .site-visit .site-section { padding: 24px; }
  .company-site .site-enquiry { grid-template-columns: 1fr; padding: 24px; border-radius: 16px; }
  .company-site .site-enquiry h2 { font-size: 28px; }
  .company-site .site-enquiry-note { margin-top: 16px; }
  .company-site .site-form-grid { grid-template-columns: 1fr; }
  .company-site .control-main details.biz-fold { padding: 4px 16px 12px; }
  .company-site .control-main details.biz-fold > summary { font-size: 20px; }
}
/* BentoML's diagonal lift and turning arrow, applied to the background so typing targets stay still. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .company-site .control-main .site-catalog-tabs button[data-service-tab] { transition: transform .2s ease, box-shadow .2s ease; }
  .company-site .control-main .site-catalog-tabs button[data-service-tab]:is(:hover, :focus-visible) { transform: translate(3px, -3px); box-shadow: -3px 3px 0 var(--s-pick); }
}

/* --- the first screen's parts, the bar, the menu and the ways in (the owner's audit, 08.10.2026, and the four looks of
   09.10.2026: app/business_page.py hero, app/business_site.py navigation, hero_media, hero_times, enquiry_form) ----- */
/* The line over the name: open now, or when it opens, with its dot; a link to «Часы работы» underlined under the
   pointer alone. The dot on a scene is the mockups' bright green, on the page their deep one. */
.company-site .site-hours-link { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.company-site .site-hours-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.company-site .biz-hero .biz-status { background: var(--s-scene-muted); }
.company-site .biz-hero .biz-status.open { background: var(--s-scene-open); }
.company-site .biz-hero .biz-status.soon { background: #ffd27a; }

/* Under the one action: the assistant as one quiet link, then what the visitor can do afterwards by themselves. */
.company-site .biz .site-hero-ask { margin: 8px 0 0; font-size: 15px; line-height: 1.4; }
.company-site .biz-hero .site-hero-ask a { display: inline-flex; align-items: center; min-height: 44px; color: var(--s-scene-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--s-scene-line); }
.company-site .biz-hero .site-hero-ask a:hover { text-decoration-color: currentColor; }
.company-site .biz-hero .biz-move { margin: 4px 0 0; font-size: 14px; color: var(--s-scene-muted); }

/* One column when there is nothing beside the words (a seasonal pause, nothing free). */
.company-site .biz-hero.site-hero-solo { grid-template-columns: minmax(0, 1fr); }

/* «Свободное время» on the first screen: the grid of every page (app/site_times.py, «.site-free» below with the
   service's page) drawn on the scene — the day over its times, four of them a row, outlined, in mono; the screen's
   accent stays its one action —; «Другой день» a link. */
.company-site .site-hero-times { align-self: center; min-width: 0; }
.company-site .biz .site-times-title { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--s-scene-muted); }
.company-site .biz-hero .site-free { border-top-color: var(--s-scene-line); }
.company-site .biz-hero .site-free > li { display: block; padding: 14px 0; border-bottom-color: var(--s-scene-line); }
.company-site .biz-hero .site-free-day { display: block; margin: 0 0 10px; font-size: 16px; color: var(--s-scene-ink); }
.company-site .biz-hero .site-free-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 8px; }
.company-site .biz-hero a.site-slot { min-width: 0; padding: 0; border-color: var(--s-scene-line); background: transparent; color: var(--s-scene-ink); font-size: 16px; }
.company-site .biz-hero a.site-slot:is(:hover, :focus-visible) { border-color: var(--s-scene-accent); background: color-mix(in srgb, var(--s-scene-ink) 10%, transparent); }
.company-site .biz-hero a.site-slot:focus-visible { outline: 3px solid var(--s-scene-accent); outline-offset: 2px; }
.company-site .biz-hero .site-times-more { margin: 8px 0 0; }
.company-site .control-main button.site-times-other:not(.btn):not(.logout):not(.delete-row) { min-height: 44px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--s-scene-accent); font: 600 15px/1.4 var(--sans); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.company-site .control-main button.site-times-other:not(.btn):not(.logout):not(.delete-row):hover { background: none; border: 0; color: var(--s-scene-ink); }

/* The bar and the menu right under it (business_page.top_bar, business_site.navigation): the name, the phone and «Мои
   записи» over the menu's one line, which stays at the screen's top as the page scrolls; a computer's menu holds the
   page's one button at its right end, there once the first screen's own has scrolled away. A car service's head stands
   on its navy scene and a club's on its black, the first screen going on in the same colour; a salon's and a clinic's on
   the page. */
.company-site .biz-bar { color: var(--s-ink); background-color: var(--s-head); border-image: linear-gradient(var(--s-head), var(--s-head)) fill 0 / 0 / 0 100vmax; }
.company-site:is(.site-auto, .site-sport) :is(.biz-bar, .site-nav) { --s-ink: var(--s-scene-ink); --s-muted: var(--s-scene-muted); --s-edge: var(--s-scene-line); --s-line: var(--s-head); }
.company-site .biz-brand { font: 700 16px/1.25 var(--sans); }
.company-site .biz-bar:has(+ .site-nav) { margin-bottom: 0; } /* «Условия покупки»' bar keeps its own margin */
.company-site .site-nav { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; gap: 0 24px; min-height: 56px; margin: 0 0 24px; padding: 0; color: var(--s-ink); background-color: var(--s-head);
  border-image: linear-gradient(0deg, var(--s-line) 1px, var(--s-head) 1px) fill 0 / 0 / 0 100vmax; }
.company-site:is(.site-auto, .site-sport) .site-nav { margin-bottom: 0; }
/* The bar and the menu reach past their foot by a pixel, under the next band of the same colour: at a fractional pixel
   ratio (a Windows screen scaled to 125–175 %) two edge-to-edge fills meeting on a fraction left a light seam of the
   page between them (the owner, 14.10.2026: «появилась полоса»). */
.company-site :is(.biz-bar, .site-nav) { border-image-outset: 0 100vmax 1px; }
.company-site .site-nav-links { display: flex; flex: 1 1 auto; min-width: 0; gap: 0 24px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.company-site .site-nav-links::-webkit-scrollbar { display: none; }
.company-site .site-nav-links a { display: inline-flex; flex: none; align-items: center; min-height: 44px; color: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; text-decoration: none; }
.company-site .site-nav-links a:hover { text-decoration: underline; text-underline-offset: 5px; }
.company-site .site-nav-links a.site-nav-my, .company-site .site-nav-book { display: none; }
@media (min-width: 700px) {
  /* A long menu scrolls sideways under its fading edge, never cutting a word at the button. */
  .company-site .site-nav-links { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); padding-right: 40px; }
}
@media (min-width: 1024px) {
  .company-site .biz-brand { font: 800 18px/1.2 var(--sans); }
  .company-site .biz-sticky { display: none; } /* no full-width band at the foot: the menu's own button */
  .company-site .site-nav-book { display: block; flex: none; transition: opacity .2s, visibility .2s; }
  .company-site .site-nav-book.away { visibility: hidden; opacity: 0; pointer-events: none; }
  .company-site .control-main .site-nav-book button.btn.primary { min-height: 46px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--s-accent); color: var(--s-accent-ink); font: 800 15px/1.2 var(--sans); cursor: pointer; }
  .company-site .control-main .site-nav-book button.btn.primary:hover { background: var(--s-accent-hover); }
}
@media (prefers-reduced-motion: reduce) { .company-site .site-nav-book { transition: none; } }

/* A phone: a bar of 48 px — the logo, or the name, and the phone's icon —, the menu one line of 44 px from edge to
   edge, its right edge fading over the links still to come, «Мои записи» its last link. */
@media (max-width: 699px) {
  .company-site .biz-bar { min-height: 48px; gap: 12px; }
  .company-site .biz-brand { display: inline-flex; flex: 1 1 auto; min-width: 0; min-height: 44px; font-size: 15px; }
  .company-site .biz-brand:not(.with-logo) { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 44px; }
  .company-site .biz-bar-links { flex: none; }
  .company-site .biz-bar-links > a:not(.biz-call) { display: none; }
  .company-site .biz-bar-links a.biz-call { justify-content: center; width: 44px; min-width: 44px; height: 44px; margin: 0; border: 1px solid var(--s-edge); border-radius: 12px; text-decoration: none; }
  .company-site .biz-call .icon { display: block; }
  .company-site .biz-call span { display: none; }
  .company-site .site-nav { min-height: 44px; margin: 0 -16px 16px; }
  .company-site:is(.site-auto, .site-sport) .site-nav { margin-bottom: 0; }
  .company-site .site-nav-links { gap: 0 20px; padding: 0 40px 0 16px; }
  .company-site .site-nav-links a.site-nav-my { display: inline-flex; }
  .company-site .site-nav::after { content: ""; position: absolute; top: 0; right: 0; bottom: 1px; width: 40px; background: linear-gradient(to right, transparent, var(--s-head) 85%); pointer-events: none; }
  /* The owner's photo first, 16:10, then the name and the one action. */
  .company-site .site-hero-media { order: -1; min-height: 0; aspect-ratio: 16 / 10; }
  /* «Свободное время» right under the one action; the quiet link and the line after it. */
  .company-site .biz-hero.site-hero-timed { display: flex; flex-direction: column; gap: 0; }
  .company-site .biz-hero.site-hero-timed > .biz-hero-text { display: contents; }
  .company-site .biz-hero.site-hero-timed > .site-hero-times { order: 1; align-self: stretch; margin: 16px 0 4px; }
  .company-site .biz-hero.site-hero-timed .site-hero-ask, .company-site .biz-hero.site-hero-timed .biz-move { order: 2; }
  .company-site .biz-hero .site-free > li { padding: 12px 0; }
}
/* A phone's bottom bar says what its button gives — a car service's nearest free time, a club's free trial — beside it. */
@media (max-width: 1023px) {
  .company-site .biz-sticky:has(.site-sticky-note) { display: flex; align-items: center; gap: 12px; }
  .company-site .biz .site-sticky-note { flex: 0 1 auto; min-width: 0; max-width: 45%; margin: 0; font-size: 13px; line-height: 1.3; color: var(--s-muted); }
  .company-site .site-sticky-note :is(span, b) { display: block; }
  .company-site .site-sticky-note b { font: 600 15px/1.3 var(--mono); font-variant-numeric: tabular-nums; color: var(--s-ink); }
  .company-site .control-main .biz-sticky:has(.site-sticky-note) button.btn.primary { flex: 1 0 auto; width: auto; margin: 0; padding: 0 16px; white-space: nowrap; }
  .company-site .control-main .biz-sticky button.btn.primary { border-radius: 999px; font-weight: 800; }
}
/* The narrowest phones: the button alone, the width of the screen — «Записаться на пробную» leaves no room beside it. */
@media (max-width: 359px) {
  .company-site .biz .biz-sticky .site-sticky-note { display: none; }
}

/* «Есть вопрос?» at the page's end: one field on white and «Спросить помощника», the page's lime; «Написать
   администратору» folded under it. */
.company-site .site-question label { display: block; margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--s-scene-ink); }
.company-site .site-question textarea { display: block; box-sizing: border-box; width: 100%; min-height: 104px; margin: 0 0 16px; padding: 14px; resize: vertical; border: 1px solid var(--s-edge); border-radius: 8px; background: var(--s-surface); color: var(--s-ink); font: 400 16px/1.5 var(--sans); }
.company-site .site-question textarea::placeholder { color: var(--s-muted); opacity: 1; }
.company-site .site-question textarea:focus-visible { outline: 3px solid var(--s-scene-accent); outline-offset: 2px; }
.company-site .control-main .site-question button.btn.primary.site-ask { min-height: 52px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--s-accent); color: var(--s-accent-ink); font: 800 16px/1.2 var(--sans); cursor: pointer; }
.company-site .control-main .site-question button.btn.primary.site-ask:hover { background: var(--s-accent-hover); }
@media (max-width: 699px) {
  .company-site .control-main .site-question button.btn.primary.site-ask { width: 100%; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .company-site .control-main .site-question button.site-ask { transition: transform .2s ease, box-shadow .2s ease; }
  .company-site .control-main .site-question button.site-ask:is(:hover, :focus-visible) { transform: translate(3px, -3px); box-shadow: -3px 3px 0 var(--s-pick-deep); }
}

/* «Контакты» on a computer: the map's place kept at 16:10 inside the card — a quiet drawn street and its pin until
   «Показать карту» (no request to Yandex before the tap: app/page_media.py MAP_SCRIPT), the map in that very place
   after —; under it «Маршрут» and «Показать карту»; then «Позвонить +7 900 000-12-34», a finger's height. */
@media (min-width: 700px) {
  .company-site #contacts .biz-map:has([data-map-toggle]:not([hidden])) .biz-map-frame[hidden] { display: block; }
  .company-site #contacts .biz-map-frame { position: relative; aspect-ratio: 16 / 10; margin: 0 0 16px; border: 1px solid var(--s-line);
    background: linear-gradient(90deg, transparent 0 44%, var(--s-surface) 44% 47%, transparent 47%),
                linear-gradient(0deg, transparent 0 58%, var(--s-surface) 58% 62%, transparent 62%),
                linear-gradient(152deg, transparent 0 66%, var(--s-surface) 66% 68%, transparent 68%), var(--s-sunken); }
  .company-site #contacts .biz-map-frame[hidden]::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -22px 0 0 -11px; border-radius: 50% 50% 50% 0; background: var(--s-pick); transform: rotate(-45deg); }
}
.company-site .biz .site-call { margin: 16px 0 0; }
.company-site .site-section-body > p a.site-call-button { font-family: var(--sans); }
.company-site .site-call-button { display: inline-block; max-width: 100%; box-sizing: border-box; min-height: 44px; padding: 9px 18px; line-height: 24px; border: 1.5px solid var(--s-ghost); border-radius: 999px; color: var(--s-ghost); font-size: 15px; font-weight: 600; text-decoration: none; }
.company-site .site-call-button:hover { background: var(--s-sunken); }
.company-site .site-section-body .site-call-number { font: 600 15px/24px var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* One person: a line in the team's place, their name leading to their own page. */
.company-site .site-team-one { margin: 0 0 48px; }
.company-site .biz .site-team-one p { margin: 0; font-size: 19px; line-height: 1.4; }
.company-site .site-team-one a { color: var(--s-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* ==== The catalogue as a shop's (app/site_catalog.py; the expert audit of 08.10.2026) ===========================
   A service is a product card: its photo, its name — a link to its page — and its price on one line (the price in
   mono at the right), «45 мин», its description (two lines on a computer, one on a phone), one outline button named
   by the time it books; the page's one lime stays the booking of the first screen. A category of four or fewer is a
   ruled price list: the name, how long, the price, the button in one row, the columns level through a subgrid. The
   cards' grid never leaves a hole in its last row: a card takes two columns by the count (3 columns: 5, 8 → the
   first; 7, 10 → the first and the last; 2 columns: an odd count → the first). A phone lays both out as one list:
   a 72 px picture at the left, the words beside it. The cards' parts stay level across a row through a subgrid
   (v0.112.1). */
.company-site .biz-services:is(.site-cards, .site-price-list) { border: 0; }
.company-site .biz-services:is(.site-cards, .site-price-list) > li { padding-right: 0; }
.company-site .biz-services:is(.site-cards, .site-price-list) > li::after { display: none; }
.company-site .biz-services:is(.site-cards, .site-price-list) > li:hover { background: none; box-shadow: none; }
.company-site .site-card-head { grid-area: head; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.company-site .site-card-head .site-card-price { margin-left: auto; }
.company-site .site-card-name { grid-area: name; flex: 1 1 0; font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--s-ink); }
.company-site a.site-card-name { padding: 11px 0; margin: -11px 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--s-edge); }
.company-site a.site-card-name:is(:hover, :focus-visible) { text-decoration-color: currentColor; }
.company-site .site-card-price { grid-area: price; justify-self: end; font: 500 16px/1.35 var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--s-ink); text-align: right; }
.company-site .site-card-price.words { font-family: var(--sans); font-size: 15px; }
.company-site .biz .site-card-meta { grid-area: meta; margin: 2px 0 0; font-size: 14px; line-height: 20px; color: var(--s-muted); white-space: nowrap; }
.company-site .site-card-photo { grid-area: photo; display: block; }
.company-site .service-photo { display: block; object-fit: cover; background: var(--s-sunken); }
.company-site .site-cards .service-photo { width: 100%; height: 150px; border-radius: 8px; }
.company-site .biz .site-cards .site-service-description,
.company-site .biz .site-price-list .site-service-description { grid-area: desc; margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--s-muted);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.company-site .biz .site-price-list .site-service-description { margin-top: 2px; }
.company-site .biz-services:is(.site-cards, .site-price-list) .site-book { grid-area: book; }
.company-site .site-cards .site-book { justify-self: start; align-self: end; margin-top: 16px; }
/* The card's one button and the times' «Выбрать другой день»: an ink outline, the time it books in its words. */
.company-site .control-main :is(a, button).site-book:not(.btn) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px; border: 1.5px solid var(--s-ghost); border-radius: 999px; background: transparent; color: var(--s-ghost); font: 600 15px/1.3 var(--sans); text-align: center; text-decoration: none; cursor: pointer; }
.company-site .control-main :is(a, button).site-book:not(.btn):is(:hover, :focus-visible) { background: var(--s-sunken); border-color: var(--s-ghost); }
@media (min-width: 700px) {
  .company-site .site-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .company-site .biz-services.site-cards > .site-card { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "photo" "head" "meta" "desc" "book"; align-content: start; padding: 20px; border: 1px solid var(--s-line); border-radius: var(--s-radius); background: var(--s-surface); }
  .company-site .site-cards > .site-card:last-child { border-bottom: 1px solid var(--s-line); }
  .company-site .site-cards > .site-card:hover { border-color: var(--s-pick); }
  .company-site .site-cards .site-card-photo { margin-bottom: 16px; }
  .company-site .site-cards > li:first-child:nth-last-child(2n+1) { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .company-site .site-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .company-site .site-cards > li:first-child:nth-last-child(2n+1) { grid-column: auto; }
  .company-site .site-cards > li:is(:first-child:nth-last-child(3n+2), :first-child:nth-last-child(3n+1), :last-child:nth-child(3n+1)) { grid-column: span 2; }
}
@supports (grid-template-rows: subgrid) {
  @media (min-width: 700px) {
    .company-site .site-cards { row-gap: 0; }
    .company-site .biz-services.site-cards > .site-card { grid-row: span 5; grid-template-rows: subgrid; margin-bottom: 16px; }
    .company-site .site-cards .site-book { align-self: stretch; }
  }
}
/* The price list (a category of four or fewer, a service page's «Ещё в разделе …»): ruled rows, the columns level. */
@media (min-width: 700px) {
  .company-site .biz-services.site-price-list { border-top: 1px solid var(--s-line); }
  .company-site .site-price-list > li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; grid-template-areas: "photo name meta price book" "photo desc meta price book"; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--s-line); }
  .company-site .site-price-list > li:last-child { border-bottom: 1px solid var(--s-line); }
  .company-site .site-price-list .site-card-head { display: contents; }
  /* A row's picture at 104 × 78 (4:3, the drawn scenes keep their charm), at the row's top; the row grows with it.
     A tap on it opens the service's page, as the name does (one link for a screen reader: the name). */
  .company-site .site-price-list .site-card-photo { align-self: start; margin-right: 20px; }
  .company-site .site-price-list .service-photo { width: 104px; height: 78px; border-radius: 8px; }
  .company-site .site-price-list .site-card-name { align-self: end; }
  .company-site .site-price-list > li:not(:has(.site-service-description)) .site-card-name { grid-row: 1 / span 2; align-self: center; }
  .company-site .biz .site-price-list .site-card-meta { margin: 0 0 0 24px; }
  .company-site .site-price-list .site-card-price { margin-left: 24px; }
  .company-site .site-price-list .site-book { margin-left: 24px; }
}
/* A browser without subgrid makes each row a grid of its own: from 1 024 px its columns keep a width enough for
   «2 ч 30 мин», «от 4 500 ₽» and «Записаться на завтра, 16:30», so the rows stand nearly level. */
@media (min-width: 1024px) {
  .company-site .site-price-list > li { grid-template-columns: auto minmax(0, 1fr) minmax(96px, auto) minmax(128px, auto) minmax(276px, auto); }
}
@supports (grid-template-columns: subgrid) {
  @media (min-width: 700px) {
    .company-site .site-price-list { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; }
    .company-site .site-price-list > li { grid-column: 1 / -1; grid-template-columns: subgrid; }
  }
  /* «Все услуги» from 1 024 px: every category's price list one grid — the catalogue's five columns (the photo, the
     name, how long, the price, the button), each category's group, its list and its rows subgrids of them —, so a
     column is as wide as its longest cell in any category: the prices and the buttons one line down the catalogue
     whatever time a button names («на завтра», «на понедельник», «на 17 октября»). A category's heading, a grid of
     its cards and the line under it span the five. */
  @media (min-width: 1024px) {
    .company-site #service-catalog { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; }
    .company-site #service-catalog > [data-service-group]:not([hidden]) { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; }
    .company-site #service-catalog > [data-service-group] > * { grid-column: 1 / -1; }
    .company-site #service-catalog > [data-service-group] > h3 { justify-self: start; }
    .company-site #service-catalog .site-price-list { grid-template-columns: subgrid; }
  }
}
/* A tablet keeps booking on its own row across the text columns. A long weekday must not widen the price column
   and squeeze the service name (the independent check of 08.10.2026, including «на понедельник, 10:00»). */
@media (min-width: 700px) and (max-width: 1023px) {
  .company-site .site-price-list > li { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "photo name meta price" "photo desc desc desc" "photo book book book"; }
  .company-site .site-price-list .site-book { justify-self: start; margin: 8px 0 0; } /* the buttons level with the names */
}
@supports (grid-template-columns: subgrid) {
  @media (min-width: 700px) and (max-width: 1023px) {
    .company-site .site-price-list { grid-template-columns: auto minmax(0, 1fr) auto auto; }
    .company-site .site-price-list > li { grid-template-columns: subgrid; } /* the rows' columns level again */
  }
}
@media (max-width: 699px) {
  .company-site .biz-services:is(.site-cards, .site-price-list) { border-top: 1px solid var(--s-line); }
  .company-site .biz-services:is(.site-cards, .site-price-list) > li { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "meta" "desc" "book"; column-gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--s-line); }
  .company-site .biz-services:is(.site-cards, .site-price-list) > li.has-photo { grid-template-columns: 72px minmax(0, 1fr); grid-template-areas: "photo head" "photo meta" "photo desc" "photo book"; }
  .company-site .biz-services:is(.site-cards, .site-price-list) .site-card-photo { align-self: start; margin-right: 4px; }
  .company-site .biz-services:is(.site-cards, .site-price-list) .service-photo { width: 72px; height: 54px; border-radius: 8px; }
  .company-site .biz .biz-services:is(.site-cards, .site-price-list) .site-service-description { margin-top: 4px; -webkit-line-clamp: 1; line-clamp: 1; }
  .company-site .biz-services:is(.site-cards, .site-price-list) .site-book { justify-self: start; margin-top: 12px; }
}
/* A narrow phone (under 390 px): the price on a line of its own under the name, at the right — the name keeps the
   row's width and reads in two lines at most («Замена тормозных колодок (ось)» stood in four beside «от 1 800 ₽» at
   320 px once «Все услуги» shows every service at once), every row alike. */
@media (max-width: 389px) {
  .company-site .biz-services:is(.site-cards, .site-price-list) .site-card-head .site-card-name { flex-basis: 100%; }
}

/* A service's page (app/site_catalog.py): under the heading the company and its street, the price in mono; then
   «Свободное время» — a day a row of its times —, the fact of every booking, «Ещё в разделе …». */
.company-site .biz .site-service-company { margin: -8px 0 16px; font-size: 16px; color: var(--s-scene-muted); }
.company-site .site-service-company a { color: var(--s-scene-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--s-scene-line); }
.company-site .biz .site-service-price { margin: 0 0 24px; font-size: 18px; color: var(--s-scene-muted); }
.company-site .site-service-price .site-card-price { font: 600 26px/1.2 var(--mono); color: var(--s-scene-ink); }
.company-site .site-service-price .site-card-price.words { font: 600 22px/1.2 var(--sans); }
.company-site .site-times { margin: 0 0 40px; }
.company-site .site-free { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--s-line); }
.company-site .site-free > li { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 8px 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--s-line); }
.company-site .site-free-day { font-size: 15px; font-weight: 600; color: var(--s-ink); }
.company-site .site-free-slots { display: flex; flex-wrap: wrap; gap: 8px; }
.company-site a.site-slot { display: inline-flex; align-items: center; justify-content: center; min-width: 76px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--s-edge); border-radius: 8px; background: var(--s-surface); color: var(--s-ink); font: 500 15px/1 var(--mono); font-variant-numeric: tabular-nums; text-decoration: none; }
.company-site a.site-slot:is(:hover, :focus-visible) { border-color: var(--s-pick); background: var(--s-sunken); }
.company-site .biz .site-times-more { margin: 16px 0 0; }
.company-site .biz .site-times-fact { margin: 12px 0 0; font-size: 15px; color: var(--s-muted); }
.company-site .site-related { margin: 0 0 48px; max-width: 960px; }
.company-site .site-related h2 { font-size: 30px; letter-spacing: -.8px; margin-bottom: 24px; }
@media (max-width: 699px) {
  .company-site .site-free > li { grid-template-columns: 1fr; }
  .company-site .site-service-price .site-card-price { font-size: 24px; }
  .company-site .site-related h2 { font-size: 26px; }
}

/* «Отзывы клиентов» (business_page.review_quotes): a ruled list at a reading width, not three identical cards. */
.company-site #reviews .site-section-body { display: block; max-width: 820px; }
.company-site #reviews .biz-reviews { border-top: 1px solid var(--s-line); }
.company-site #reviews .biz-review { padding: 20px 0; border-top: 0; border-bottom: 1px solid var(--s-line); }
.company-site #reviews .biz-review:first-child { padding-top: 20px; }

/* ==== The four first screens (app/site_looks.py; the approved mockups of 09.10.2026) =================================
   Shared: one line over the heading — the customers' mark, open now, the street —; the owner's heading with the
   company's name a quiet line over it, its marked word the sphere's accent (a medium italic at the salon and the clinic
   only, lora.source.md); the pictures cut to fill their boxes whatever their own proportions, the drawn covers' subject
   — right of centre, the left third calm — kept: a scene's picture leans right, a salon's and a clinic's frame is wide.
   A salon's and a clinic's first screen is light: the scene's tokens are the page's own there. */
.company-site .biz-hero:is(.site-hero-showcase, .site-hero-calm) {
  --s-scene: transparent; --s-scene-ink: var(--s-heading); --s-scene-muted: var(--s-muted); --s-scene-accent: var(--s-link);
  --s-scene-line: var(--s-edge); --s-scene-open: var(--s-open);
  padding: 0; border-radius: 0; background: none; overflow: visible;
}
.company-site .biz .site-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; margin: 0 0 12px; font-size: 15px; line-height: 1.4; color: var(--s-scene-muted); }
.company-site .biz .site-meta > p { margin: 0; font-size: 15px; line-height: 1.4; color: inherit; }
.company-site .biz-hero .site-meta .biz-kicker { margin: 0; color: inherit; }
.company-site .biz .site-meta .biz-proof .stars { margin-right: 4px; padding: 0; letter-spacing: 1px; }
.company-site .site-street a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.company-site .biz-hero .site-meta a { color: inherit; }
.company-site .site-street a:hover { text-decoration: underline; text-underline-offset: 4px; }
.company-site .biz .site-name { margin: 0 0 6px; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--s-scene-muted); }
.company-site .site-headline em { font-style: normal; color: var(--s-scene-accent); }
.company-site:is(.site-beauty, .site-health) .site-headline em { font-style: italic; font-weight: 500; color: var(--s-pick); }
/* The first screen's accent and outline buttons: pills. */
.company-site .control-main .biz-hero .biz-actions button.btn.primary { min-height: 54px; padding: 0 28px; border-radius: 999px; font: 800 16px/1.2 var(--sans); }
.company-site .biz-hero :is(a.site-ghost, a.site-call-ghost) { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 26px; border: 1.5px solid var(--s-ghost); border-radius: 999px; color: var(--s-ghost); font: 700 15px/1.2 var(--sans); text-decoration: none; white-space: nowrap; }
.company-site .biz-hero :is(a.site-ghost, a.site-call-ghost):hover { background: color-mix(in srgb, var(--s-ghost) 8%, transparent); }
/* The nearest times as chips: «Свободно», «сегодня 16:30», «17:00», «завтра 10:00» — outlined pills in mono — and a
   car service's «Всё время», the chat's list of each service with its nearest time. */
.company-site .biz .site-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 26px 0 0; font-size: 15px; color: var(--s-scene-muted); }
.company-site .site-chips-label { margin-right: 4px; }
.company-site .biz-hero a.site-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--s-scene-line); border-radius: 999px; color: var(--s-scene-ink); font: 600 15px/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; text-decoration: none; white-space: nowrap; }
.company-site .biz-hero a.site-chip:is(:hover, :focus-visible) { border-color: var(--s-scene-accent); }
.company-site .control-main button.site-chips-more:not(.btn):not(.logout):not(.delete-row) { min-height: 44px; padding: 0 2px; border: 0; border-radius: 0; background: none; color: var(--s-scene-accent); font: 700 15px/1.2 var(--sans); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.company-site .control-main button.site-chips-more:not(.btn):not(.logout):not(.delete-row):hover { background: none; color: var(--s-scene-ink); }

/* The car and club covers bleed up to 120px beyond the centred content. On wide screens they stay beside the
   heading instead of following the window's edge; the outer fade blends them back into the full-width scene. */
/* --- a car service, «Цветная сцена»: the navy scene from edge to edge, the cover on the right fading into it; the
   heading in Unbounded; its four services two by two on white, each with its price; the nearest times as chips. ---- */
.company-site .biz-hero.site-hero-scene { display: block; min-height: 0; margin: 0; padding: 56px 0 72px; border-radius: 0; background: var(--s-scene); overflow: visible;
  border-image: linear-gradient(var(--s-scene), var(--s-scene)) fill 0 / 0 / 0 100vmax; }
.company-site .site-hero-scene > .biz-hero-text { position: relative; z-index: 1; max-width: 700px; }
.company-site .site-hero-scene > .site-hero-media { position: absolute; top: 0; bottom: 0; right: max(calc(50% - 50vw), -120px); width: min(900px, 60vw); min-height: 0; margin: 0; border-radius: 0; }
.company-site .site-hero-scene > .site-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--s-scene) 0%, color-mix(in srgb, var(--s-scene) 0%, transparent) 42%), linear-gradient(270deg, var(--s-scene) 0%, color-mix(in srgb, var(--s-scene) 0%, transparent) 14%); }
.company-site .site-hero-scene > .site-hero-media img { object-position: 72% 50%; }
.company-site .biz-hero.site-hero-scene h1 { max-width: 13em; margin: 0 0 22px; font-size: clamp(30px, 3.9vw, 56px); line-height: 1.06; letter-spacing: -.02em; color: var(--s-scene-ink); overflow-wrap: normal; }
.company-site .site-hero-scene .biz-tagline { max-width: 600px; margin: 0; font-size: 19px; line-height: 1.5; color: var(--s-scene-muted); }
.company-site .site-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 600px; margin: 30px 0 0; }
.company-site .control-main button.svc.site-pick:not(.btn):not(.logout):not(.delete-row) { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; column-gap: 14px; min-width: 0; min-height: 76px; margin: 0; padding: 12px 34px 12px 14px; border: 0; border-radius: 18px; background: var(--s-surface); color: var(--s-ink); font: inherit; text-align: left; cursor: pointer; box-shadow: 0 1px 0 rgb(0 0 0 / .04); }
.company-site .control-main button.svc.site-pick:not(.btn):not(.logout):not(.delete-row):hover { background: var(--s-surface); box-shadow: 0 0 0 2px var(--s-accent); }
.company-site .control-main button.svc.site-pick:not(.btn):not(.logout):not(.delete-row):focus-visible { outline: 3px solid var(--s-accent); outline-offset: 2px; }
.company-site .site-pick::after { content: "›" / ""; position: absolute; top: 50%; right: 16px; transform: translateY(-50%); font: 600 22px/1 var(--sans); color: var(--s-muted); }
.company-site .site-pick-icon { grid-row: 1 / span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--s-hi); color: var(--s-pick); }
.company-site .site-pick-name { grid-column: 2; align-self: end; font-size: 16px; font-weight: 700; line-height: 1.3; }
.company-site .site-pick small { grid-column: 2; align-self: start; margin-top: 2px; font-size: 14px; line-height: 1.35; color: var(--s-muted); }
.company-site .site-hero-scene :is(.biz-also, .site-hero-ask, .biz-move) { max-width: 600px; }
.company-site .site-hero-scene .biz-also { margin: 16px 0 0; }

/* --- a salon, «Расписание на витрине»: the name and the words over a mosaic of three pictures; beside them, held on
   the screen, «Ближайшее свободное» — the service, who, the day, its times, «Записаться на 14:30», the screen's one
   accent. A barbershop without a photo of its own: the words and «Ближайшее свободное» alone. ----------------------- */
.company-site .biz-hero.site-hero-showcase { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 40px; align-items: start; margin: 0 0 56px; padding: 20px 0 0; }
.company-site .biz-hero.site-hero-showcase h1 { margin: 0 0 18px; font-size: clamp(34px, 4.7vw, 68px); line-height: 1.02; letter-spacing: -.01em; }
.company-site .site-hero-showcase .biz-tagline { max-width: 640px; margin: 0; font-size: 19px; line-height: 1.5; color: var(--s-muted); }
.company-site .site-mosaic { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 10px; height: 430px; margin: 30px 0 0; }
.company-site .site-mosaic img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; background: var(--s-sunken); }
.company-site .site-mosaic img:first-child { grid-row: 1 / span 2; border-radius: 26px 0 0 26px; object-position: 70% 50%; }
.company-site .site-mosaic img:nth-child(2) { border-radius: 0 26px 0 0; }
.company-site .site-mosaic img:nth-child(3) { border-radius: 0 0 26px 0; }
.company-site .site-mosaic img:nth-child(2):last-child { grid-row: 1 / span 2; border-radius: 0 26px 26px 0; }
.company-site .site-mosaic.site-mosaic-one { grid-template-columns: minmax(0, 1fr); }
.company-site .site-mosaic.site-mosaic-one img { border-radius: 26px; }
/* Nothing free in the days ahead: the words and «Записаться онлайн» alone, no empty side. */
.company-site .biz-hero.site-hero-showcase.site-hero-solo { grid-template-columns: minmax(0, 1fr); }
/* No picture of its own (a barbershop): the words stand level with «Ближайшее свободное». */
.company-site .biz-hero.site-hero-showcase:not(:has(.site-mosaic)) { align-items: center; }
.company-site .site-picker { position: sticky; top: 100px; min-width: 0; margin: 4px 0 0; padding: 24px 22px; border-radius: 28px; background: var(--s-surface); color: var(--s-ink); box-shadow: 0 24px 60px color-mix(in srgb, var(--s-pick) 12%, transparent); }
.company-site .biz .site-picker-title { margin: 0; font-size: 28px; line-height: 1.15; color: var(--s-heading); }
.company-site .control-main .site-picker-label { display: block; margin: 18px 0 6px; font-size: 13px; font-weight: 700; color: var(--s-muted); }
.company-site .site-picker select { display: block; width: 100%; min-height: 50px; padding: 0 14px; border: 1.5px solid var(--s-edge); border-radius: 14px; background: var(--s-surface); color: var(--s-ink); font: 700 15px/1.3 var(--sans); }
.company-site .site-picker-who { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.company-site .control-main .site-picker-who button:not(.btn):not(.logout):not(.delete-row) { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; margin: 0; padding: 0 12px 0 4px; border: 1.5px solid var(--s-edge); border-radius: 999px; background: var(--s-surface); color: var(--s-heading); font: 700 13px/1.2 var(--sans); white-space: nowrap; cursor: pointer; }
.company-site .control-main .site-picker-who button:not(:has(img)):not(.btn):not(.logout):not(.delete-row) { padding-left: 12px; }
.company-site .control-main .site-picker-who button[aria-pressed="true"]:not(.btn):not(.logout):not(.delete-row) { border-color: var(--s-pick); background: var(--s-sunken); }
.company-site .control-main .site-picker-who button:not(.btn):not(.logout):not(.delete-row):hover { border-color: var(--s-pick); background: var(--s-sunken); }
.company-site .site-picker-who img { flex: none; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.company-site .site-picker-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 16px 0 0; }
.company-site .control-main .site-picker-days button:not(.btn):not(.logout):not(.delete-row) { display: grid; place-content: center; gap: 2px; min-width: 0; min-height: 62px; margin: 0; padding: 4px 2px; border: 1.5px solid var(--s-edge); border-radius: 14px; background: var(--s-surface); color: var(--s-muted); font: 700 12px/1.2 var(--sans); text-align: center; cursor: pointer; }
.company-site .site-picker-days button b { font: 600 18px/1.2 var(--mono); color: var(--s-ink); }
.company-site .control-main .site-picker-days button[aria-pressed="true"]:not(.btn):not(.logout):not(.delete-row) { border-color: var(--s-pick); background: var(--s-pick); color: var(--s-pick-ink); }
.company-site .site-picker-days button[aria-pressed="true"] b { color: var(--s-pick-ink); }
.company-site .control-main .site-picker-days button:not(.btn):not(.logout):not(.delete-row):hover { border-color: var(--s-pick); }
.company-site .site-picker-times { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; }
.company-site .site-picker-times a.site-slot { min-width: 0; min-height: 46px; padding: 0; border: 1.5px solid var(--s-edge); border-radius: 12px; background: var(--s-surface); color: var(--s-ink); font: 600 15px/1 var(--mono); }
.company-site .site-picker-times a.site-slot[aria-current="true"] { border-color: var(--s-pick); background: var(--s-pick); color: var(--s-pick-ink); }
.company-site .biz .site-picker-none { margin: 14px 0 0; font-size: 15px; color: var(--s-muted); }
.company-site .site-picker .biz-actions { margin: 18px 0 0; }
.company-site .site-picker :is(a.site-picker-go, button.site-picker-go) { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; margin: 0; padding: 0 20px; border: 0; border-radius: 999px; background: var(--s-accent); color: var(--s-accent-ink); font: 800 17px/1.2 var(--sans); text-align: center; text-decoration: none; cursor: pointer; }
.company-site .site-picker :is(a.site-picker-go, button.site-picker-go):hover { background: var(--s-accent-hover); color: var(--s-accent-ink); }
.company-site .site-picker .biz-move { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--s-muted); }
.company-site .site-picker :is(.biz-also, .site-hero-ask) { margin: 6px 0 0; font-size: 14px; color: var(--s-muted); }
.company-site .site-picker :is(.biz-also, .site-hero-ask) a { color: var(--s-link); }

/* --- a clinic, «Спокойная клиника»: a calm heading in the middle, one booking beside «Позвонить», a wide cover, and
   under it what is true of this clinic, each line with its mint tick. ------------------------------------------------ */
.company-site .biz-hero.site-hero-calm { display: block; margin: 0 0 64px; padding: 56px 0 0; text-align: center; }
.company-site .site-hero-calm .site-meta { justify-content: center; }
.company-site .biz-hero.site-hero-calm h1 { max-width: 980px; margin: 0 auto 22px; font-size: clamp(36px, 5.3vw, 76px); line-height: 1.04; letter-spacing: -.01em; }
.company-site .site-hero-calm .biz-tagline { max-width: 680px; margin: 0 auto; font-size: 20px; line-height: 1.5; color: var(--s-muted); }
.company-site .site-hero-calm .biz-actions { justify-content: center; gap: 12px; margin: 30px 0 0; }
.company-site .site-hero-calm :is(.biz-next, .biz-also, .site-hero-ask, .biz-move) { margin-inline: auto; }
.company-site .site-hero-calm > .site-hero-media { height: 500px; min-height: 0; margin: 56px 0 0; border-radius: 32px; }
.company-site .site-hero-calm > .site-hero-media img { object-position: 60% 50%; }
.company-site .site-hero-calm > .site-hero-times { max-width: 720px; margin: 40px auto 0; text-align: left; }
.company-site .site-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px 40px; width: 100%; max-width: 980px; margin: 40px auto 0; padding: 0; list-style: none; text-align: left; }
.company-site .site-checks li { position: relative; min-height: 26px; padding: 1px 0 0 38px; font-size: 17px; line-height: 1.45; color: var(--s-heading); }
.company-site .site-checks li::before { content: ""; position: absolute; top: 0; left: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--s-tick); }
.company-site .site-checks li::after { content: ""; position: absolute; top: 6px; left: 10px; width: 5px; height: 10px; border: solid var(--s-heading); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.company-site .biz .site-checks-warning { max-width: 980px; margin: 24px auto 0; padding: 12px 16px; border: 1px solid var(--s-heading); border-radius: 12px; font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--s-heading); text-align: left; }

/* --- a club, «Ночной зал»: the black hall from edge to edge, the cover on the right, the heading in Oswald's
   capitals; «Записаться на пробную» beside an outlined «Расписание», the trial's next times as chips. -------------- */
.company-site .biz-hero.site-hero-night { --s-scene: var(--s-bg); display: block; min-height: 0; margin: 0; padding: 70px 0 90px; border-radius: 0; background: var(--s-scene); overflow: visible;
  border-image: linear-gradient(var(--s-scene), var(--s-scene)) fill 0 / 0 / 0 100vmax; }
.company-site .site-hero-night > .biz-hero-text { position: relative; z-index: 1; max-width: 640px; }
.company-site .site-hero-night > .site-hero-media { position: absolute; top: 0; bottom: 0; right: max(calc(50% - 50vw), -120px); width: min(1000px, 66vw); min-height: 0; margin: 0; border-radius: 0; }
.company-site .site-hero-night > .site-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--s-scene) 0%, var(--s-scene) 5%, color-mix(in srgb, var(--s-scene) 0%, transparent) 57%), linear-gradient(270deg, var(--s-scene) 0%, color-mix(in srgb, var(--s-scene) 0%, transparent) 14%); }
.company-site .site-hero-night > .site-hero-media img { object-position: 64% 50%; }
.company-site .biz-hero.site-hero-night h1 { margin: 0 0 26px; font-size: clamp(50px, 7.8vw, 112px); line-height: .92; color: var(--s-scene-ink); overflow-wrap: normal; }
.company-site .site-hero-night .biz-tagline { max-width: 540px; margin: 0; font-size: 20px; line-height: 1.5; color: var(--s-scene-muted); }
.company-site .site-hero-night .biz-actions { gap: 12px; margin: 34px 0 0; }
.company-site .control-main .site-hero-night .biz-actions button.btn.primary { min-height: 56px; padding: 0 30px; }
.company-site .site-hero-night :is(.biz-also, .site-hero-ask, .biz-move) { max-width: 540px; }

@media (max-width: 1023px) {
  .company-site .biz-hero.site-hero-showcase { grid-template-columns: minmax(0, 1fr); }
  .company-site .site-picker { position: static; }
  .company-site .site-hero-scene > .site-hero-media { width: 56vw; }
  .company-site .site-hero-scene > .biz-hero-text { max-width: 60%; }
  .company-site .site-picks { grid-template-columns: minmax(0, 1fr); } /* a tablet's column: one service a row, its name whole */
  .company-site .site-hero-night > .biz-hero-text { max-width: 62%; }
  /* the club's hall narrower, its athlete toward the right: clear of the words */
  .company-site .site-hero-night > .site-hero-media { width: 58vw; }
  .company-site .site-hero-night > .site-hero-media img { object-position: 72% 50%; }
}
@media (max-width: 699px) {
  /* The scenes on a phone: the picture first from edge to edge, fading into the scene, the words under it. */
  .company-site .biz-hero:is(.site-hero-scene, .site-hero-night) { display: flex; flex-direction: column; gap: 0; padding: 0 0 28px; }
  .company-site .biz-hero:is(.site-hero-scene, .site-hero-night) > .biz-hero-text { max-width: none; }
  .company-site .biz-hero:is(.site-hero-scene, .site-hero-night) > .site-hero-media { position: relative; inset: auto; order: -1; width: auto; height: 190px; aspect-ratio: auto; margin: 0 -16px 6px; }
  .company-site .site-hero-scene > .site-hero-media::after { background: linear-gradient(180deg, color-mix(in srgb, var(--s-scene) 0%, transparent) 55%, var(--s-scene) 100%); }
  .company-site .site-hero-scene > .site-hero-media img { object-position: 78% 40%; }
  .company-site .biz-hero.site-hero-scene h1 { margin: 6px 0 14px; font-size: clamp(26px, 7.4vw, 30px); line-height: 1.12; }
  .company-site .site-hero-scene .biz-tagline { font-size: 16px; }
  .company-site .site-picks { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 18px; }
  .company-site .control-main button.svc.site-pick:not(.btn):not(.logout):not(.delete-row) { grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; min-height: 58px; padding: 9px 32px 9px 10px; border-radius: 16px; }
  .company-site .site-pick-icon { width: 40px; height: 40px; }
  .company-site .site-pick-name { font-size: 15px; }
  .company-site .site-pick small { font-size: 13px; }
  .company-site .biz .site-chips { gap: 8px; margin-top: 14px; }
  .company-site .site-hero-night > .site-hero-media { height: 340px; }
  .company-site .site-hero-night > .site-hero-media::after { background: linear-gradient(180deg, color-mix(in srgb, var(--s-scene) 55%, transparent) 0%, color-mix(in srgb, var(--s-scene) 0%, transparent) 24%, color-mix(in srgb, var(--s-scene) 0%, transparent) 46%, var(--s-scene) 100%); }
  .company-site .site-hero-night > .site-hero-media img { object-position: 70% 50%; }
  .company-site .site-hero-night > .biz-hero-text { margin-top: -120px; }
  .company-site .biz-hero.site-hero-night h1 { margin: 6px 0 16px; font-size: clamp(42px, 12.8vw, 50px); line-height: .95; }
  .company-site .site-hero-night .biz-tagline { font-size: 15px; }
  .company-site .site-hero-night .biz-actions { margin-top: 22px; }
  .company-site .biz-hero :is(a.site-ghost, a.site-call-ghost) { flex: 1 1 auto; }
  /* The salon: the cover alone over the name, the picker under the words. */
  .company-site .biz-hero.site-hero-showcase, .company-site .biz-hero.site-hero-showcase:not(:has(.site-mosaic)) { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
  .company-site .biz-hero.site-hero-showcase h1 { font-size: clamp(30px, 8.6vw, 34px); line-height: 1.05; margin-bottom: 10px; }
  .company-site .site-hero-showcase .biz-tagline { font-size: 16px; }
  .company-site .site-mosaic { order: -1; position: relative; display: block; height: auto; aspect-ratio: 16 / 10; margin: -16px -16px 0; }
  .company-site .site-mosaic::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 24px; border-radius: 24px 24px 0 0; background: var(--s-bg); }
  .company-site .site-mosaic img:not(:first-child) { display: none; }
  .company-site .site-mosaic img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; object-position: 72% 40%; }
  .company-site .site-hero-showcase > .biz-hero-text { display: contents; }
  .company-site .site-picker { order: 2; align-self: stretch; margin: 18px 0 0; padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .company-site .biz .site-picker-title { font-size: 21px; }
  .company-site .site-picker-who, .company-site .site-picker-days { display: flex; flex-wrap: nowrap; overflow-x: auto; margin-right: -16px; padding-right: 16px; scrollbar-width: none; }
  .company-site .site-picker-days button { flex: none; width: 58px; }
  .company-site .site-picker-times { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  /* The clinic: the heading at the left, the cover the width of the screen's words, the ticks under it. */
  .company-site .biz-hero.site-hero-calm { padding-top: 14px; text-align: left; }
  .company-site .site-hero-calm .site-meta { justify-content: flex-start; }
  .company-site .biz-hero.site-hero-calm h1 { margin: 0 0 14px; font-size: clamp(32px, 10vw, 40px); line-height: 1.06; }
  .company-site .site-hero-calm .biz-tagline { margin: 0; font-size: 16px; }
  .company-site .site-hero-calm .biz-actions { justify-content: flex-start; margin-top: 20px; }
  .company-site .biz-hero.site-hero-calm { display: flex; flex-direction: column; gap: 0; }
  .company-site .site-hero-calm > .biz-hero-text { display: contents; }
  .company-site .site-hero-calm > .site-hero-media { order: 1; height: 200px; aspect-ratio: auto; margin: 20px 0 0; border-radius: 24px; }
  .company-site .site-hero-calm > :is(.site-checks, .site-checks-warning, .site-hero-times) { order: 2; }
  .company-site .site-hero-calm > .biz-hero-text > :is(.biz-actions, .biz-next, .biz-also, .site-hero-ask, .biz-move) { order: 3; }
  .company-site .site-checks { gap: 10px; margin-top: 18px; }
  .company-site .site-checks li { font-size: 15px; }
}

/* The platform's own mark on a dark page (a club's): the free start of a demo's foot in the brand's lime words — its
   highlighter under ink would leave the words' upper half on the black. */
.company-site.site-sport .biz-footer .biz-join { color: var(--lime); background: none; text-decoration-color: var(--lime); }
.company-site.site-sport .biz-footer .biz-join:hover { color: var(--hi); background: none; }
/* Illustrated service choices, real specialist starts and membership cards (09.10.2026). */
.company-site .biz-services.site-featured-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; border: 0; margin: 0; }
.company-site .biz-services.site-featured-cards > li { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 16px; border: 1px solid var(--s-line); border-radius: var(--s-radius); background: var(--s-surface); }
.company-site .biz-services.site-featured-cards > li::after { display: none; }
.company-site .biz-services.site-featured-cards > li:hover { background: var(--s-surface); box-shadow: none; }
.company-site .site-featured-cards .service-photo { width: 100%; height: 190px; border-radius: calc(var(--s-radius) / 2); }
.company-site .site-featured-cards .site-card-head { display: flex; flex-direction: column; align-items: start; gap: 8px; }
.company-site .site-featured-cards .site-card-head .site-card-price { margin: 0; font-size: 20px; }
.company-site .site-featured-cards .site-card-name { flex: none; font-size: 20px; }
.company-site .site-featured-cards .site-card-meta { margin: 0; }
.company-site .biz .site-featured-cards .site-service-description { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: var(--s-muted); }
.company-site .site-featured-cards .site-book { align-self: start; margin-top: auto; max-width: 100%; }
.company-site .biz .site-featured-note { margin: 20px 0 24px; font-size: 14px; color: var(--s-muted); }
.company-site #team .who-times { position: relative; z-index: 1; margin: 12px 0 0 -68px; padding-top: 12px; border-top: 1px solid var(--s-line); }
.company-site #team li:not(:has(.who-photo)) .who-times { margin-left: 0; }
.company-site #team .who-times p { margin: 0 0 8px; font-size: 13px; color: var(--s-muted); }
.company-site #team .who-times .site-free-slots { display: flex; flex-wrap: wrap; gap: 8px; }
.company-site .site-memberships { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; border: 0; }
.company-site .site-memberships li { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 24px; border: 1px solid var(--s-line); border-radius: var(--s-radius); background: var(--s-surface); }
.company-site .site-memberships h3 { font-size: 21px; line-height: 1.3; }
.company-site .site-memberships .site-mship-price { order: 1; align-self: start; font-size: 30px; }
.company-site .site-memberships .site-mship-what { order: 2; font-weight: 600; }
.company-site .site-memberships .site-mship-covers { order: 3; line-height: 1.5; }
.company-site .site-memberships .site-mship-visit { order: 4; max-width: none; margin: auto 0 0; padding-top: 12px; text-align: left; line-height: 1.5; }
.company-site .site-memberships .site-mship-go { order: 5; align-self: start; margin-top: 4px; padding: 10px 16px; border: 1.5px solid var(--s-ghost); border-radius: 999px; color: var(--s-ghost); }
@media (min-width: 1180px) {
  .company-site .site-memberships { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .company-site .site-memberships:has(> li:only-child) { max-width: 560px; }
}
@media (min-width: 700px) {
  .company-site .site-featured-cards:has(> li:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .company-site .site-memberships h3 { min-height: 2.6em; }
}
@media (max-width: 699px) {
  .company-site .biz-services.site-featured-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .company-site .site-featured-cards .service-photo { height: 160px; }
  .company-site .site-featured-cards .site-card-name { font-size: 19px; }
  .company-site .site-memberships { grid-template-columns: minmax(0, 1fr); }
  .company-site .site-memberships li { padding: 20px; }
}
/* A complete first screen for a company outside the four niche templates, including a page without photographs. */
.company-site .biz-hero.site-hero-studio { position: relative; padding: clamp(24px, 4vw, 56px); margin: 20px 0 0; border-radius: var(--s-radius); background: var(--s-scene); color: var(--s-scene-ink); gap: 32px; overflow: hidden; }
.company-site .site-hero-studio .biz-hero-text { position: relative; z-index: 1; min-width: 0; }
.company-site .site-hero-studio h1 { color: var(--s-scene-ink); font-size: clamp(34px, 4.7vw, 64px); line-height: 1.08; }
.company-site .site-hero-studio :is(.biz-tagline, .biz-move, .biz-move a, .site-meta a, .site-hero-ask a, .biz-alt, .biz-alt a, .biz-next) { color: var(--s-scene-muted); }
.company-site .site-hero-studio .site-hero-times { --s-scene-ink: var(--s-ink); --s-scene-muted: var(--s-muted); --s-scene-accent: var(--s-link); --s-scene-line: var(--s-line); padding: 24px; border-radius: calc(var(--s-radius) - 6px); background: var(--s-surface); color: var(--s-ink); box-shadow: 0 12px 36px rgb(0 0 0 / .08); }
.company-site .site-hero-studio .site-hero-times :is(p, a) { color: var(--s-ink); }
.company-site .site-hero-studio .site-hero-media { border-radius: calc(var(--s-radius) - 6px); overflow: hidden; }
.company-site .site-studio-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 16px 0 36px; padding: 0; list-style: none; gap: 16px; }
.company-site .site-studio-steps li { display: flex; gap: 12px; align-items: center; padding: 16px 0; color: var(--s-ink); font-size: 14px; border-bottom: 1px solid var(--s-line); }
.company-site .site-studio-steps b { font-family: var(--mono); color: var(--s-link); }
.company-site.site-other .biz-services.site-cards > .site-card { border-top: 4px solid var(--s-accent); }
.company-site.site-other .site-cards > .site-card:only-child { grid-column: 1 / -1; }
@media (max-width: 699px) {
  .company-site .biz-hero.site-hero-studio { margin-top: 12px; padding: 24px 20px; gap: 0; }
  .company-site .site-hero-studio .site-hero-times { padding: 20px 16px; }
  .company-site .site-studio-steps { grid-template-columns: 1fr; gap: 0; margin-bottom: 20px; }
}
@media (min-width: 700px) {
  .company-site .control-main .site-catalog-tabs button[data-service-tab]:not(.btn) {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}