/* Masthead (logo + studio name) */
  .masthead { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px 0 16px; gap: 10px; }
  .masthead__logo { width: 132px; height: 132px; object-fit: cover; border-radius: 50%; border: 3px solid var(--line); }
  .masthead__title { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
  .masthead__subtitle { font-size: var(--fs-sm); color: var(--muted-2); }

  /* Next-session announcement */
  .announce { background: linear-gradient(135deg, var(--brand-tint), var(--brand-tint-soft));
    border: 1px solid var(--brand-tint-strong); border-radius: var(--r-lg); padding: 18px; margin-top: 6px; }
  .announce__eyebrow { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .07em;
    font-weight: 700; color: var(--brand); margin-bottom: 6px; }
  .announce__title { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.01em; }
  .announce__meta { font-size: var(--fs-sm); color: var(--muted); margin: 5px 0 4px;
    font-variant-numeric: tabular-nums; }
  .announce__spots { font-size: var(--fs-sm); font-weight: 600; }
  .announce__spots.free { color: var(--ok); }
  .announce__spots.wait { color: var(--warn); }
  .announce__actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
  .announce__actions .btn { flex: 1; min-width: 140px; }

  /* Sections */
  .section { margin-top: 30px; }
  .section-body { font-size: var(--fs-base); color: var(--ink); line-height: 1.65; }

  /* Recent work — a strip of 3:4 frames closing the «О студии» block. A portrait
     poster fills its frame, any other shape is shown whole over a blurred copy
     of itself (spec 031), so the grid stays even and nothing is cut away. */
  .works-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 16px; }
  @media (min-width: 560px) { .works-grid { grid-template-columns: repeat(4, 1fr); } }
  .works-item { margin: 0; min-width: 0; }
  .works-link { display: block; border-radius: var(--r-card); overflow: hidden;
    background: var(--line); }
  .works-cap { margin-top: 6px; font-size: var(--fs-xs); color: var(--muted-2);
    text-align: center; overflow-wrap: anywhere; }

  /* Age groups — one row per group, three fields only. Anything longer belongs
     on /lessons/; this block exists to answer «есть ли группа для моего» before
     the visitor reaches the prices. */
  .agelist { list-style: none; display: flex; flex-direction: column; gap: 6px; }
  .agelist__row { display: grid; grid-template-columns: auto 1fr auto;
    align-items: baseline; column-gap: 10px; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--r-card); padding: 12px 14px; }
  .agelist__age { font-weight: 700; font-size: var(--fs-base); white-space: nowrap; }
  .agelist__tag { font-size: var(--fs-sm); color: var(--muted); min-width: 0; }
  .agelist__meta { font-size: var(--fs-sm); color: var(--muted-2);
    white-space: nowrap; font-variant-numeric: tabular-nums; }
  /* On phones the level label is what runs out of room first, so it drops to its
     own line and the age keeps the duration alongside it — same treatment the
     price tiles already get at this breakpoint. */
  @media (max-width: 559.98px) {
    .agelist__row { grid-template-columns: 1fr auto;
      grid-template-areas: "age meta" "tag tag"; row-gap: 2px; }
    .agelist__age { grid-area: age; }
    .agelist__meta { grid-area: meta; }
    .agelist__tag { grid-area: tag; }
  }
  .agelist__more { display: inline-block; margin-top: 10px; font-size: var(--fs-sm);
    font-weight: 600; color: var(--brand); text-decoration: none; }
  .agelist__more:hover { text-decoration: underline; }

  /* Trust block (US2) — portrait, short bio, two fixed facts, up to three
     testimonials. Renders only once the owner has filled in the admin
     (Edge Case «педагог ещё не предоставил данные» — no empty frame). */
  .trust { background: var(--paper); border-radius: var(--r-lg); padding: 20px; }
  .trust__card { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
  .trust__portrait { width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
    flex-shrink: 0; }
  .trust__body { flex: 1 1 220px; min-width: 0; }
  .trust__bio { font-size: var(--fs-base); color: var(--ink); line-height: 1.6;
    margin: 6px 0 10px; }
  .trust__facts { list-style: none; display: flex; flex-direction: column; gap: 4px;
    font-size: var(--fs-sm); color: var(--muted); }
  .trust__facts li { display: flex; gap: 8px; }
  .trust__facts li::before { content: "✦"; color: var(--brand); flex-shrink: 0; }
  .trust__reviews { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
  .trust__review { margin: 0; border-left: 3px solid var(--brand); padding-left: 14px; }
  .trust__review p { font-family: var(--font-ui); font-size: var(--fs-lg);
    color: var(--ink); line-height: 1.5; }
  .trust__review footer { margin-top: 6px; font-size: var(--fs-sm); color: var(--muted); }

  /* Pricing — one tile per plan. The per-lesson rate is the hero number so the
     plans compare across a single axis (500 → 425 → 400); the total and the
     struck baseline sit under it. No plan is highlighted — all tiles are equal. */
  .price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .pcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
    padding: 18px 12px; text-align: center; display: flex; flex-direction: column;
    justify-content: center; gap: 2px; min-height: 150px; }
  .pcard__name { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
  .pcard__rate { display: flex; flex-direction: column; align-items: center; margin-top: 6px; }
  .pcard__cost { display: flex; flex-direction: column; align-items: center; margin-top: 12px; }
  .pcard__per { font-size: var(--fs-xl); font-weight: 700; color: var(--ink);
    font-variant-numeric: tabular-nums; line-height: 1; }
  .pcard__unit { font-size: var(--fs-xs); color: var(--muted-2); margin-top: 2px; }
  .pcard__total { font-size: var(--fs-base); font-weight: 700; font-variant-numeric: tabular-nums; }
  /* On phones the 3-up tiles become tall boxes with empty centres — lay each plan
     out as a compact row: name + cost on the left, the per-lesson rate on the right. */
  @media (max-width: 559.98px) {
    .price-grid { grid-template-columns: 1fr; gap: 8px; }
    .pcard { display: grid; grid-template-columns: 1fr auto;
      grid-template-areas: "name rate" "cost rate";
      align-items: center; justify-items: start; column-gap: 12px; row-gap: 2px;
      text-align: left; min-height: 0; padding: 14px 28px 14px 16px; }
    .pcard__name { grid-area: name; font-size: var(--fs-base); }
    .pcard__cost { grid-area: cost; align-items: flex-start; margin-top: 0; }
    .pcard__rate { grid-area: rate; justify-self: end; align-items: flex-end;
      text-align: right; margin-top: 0; }
    .pcard__per { font-size: var(--fs-lg); }
  }
  /* Masterclass — a service, not a plan: paid in roubles, never with a lesson
     from a subscription. It says so by standing apart from the tiles, not by
     looking louder, so it wears the same frame they do; the date and the
     schedule link appear only while one is booked. */
  .mc-plate { display: grid; grid-template-columns: 1fr auto; align-items: center;
    column-gap: 16px; margin-top: 12px; padding: 16px; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--r-card); }
  .mc-plate__name { font-size: var(--fs-base); font-weight: 700; }
  .mc-plate__when { font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; }
  .mc-plate__note { font-size: var(--fs-xs); color: var(--muted-2); margin-top: 6px; }
  .mc-plate__aside { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
  .mc-plate__price { font-size: var(--fs-xl); font-weight: 700; color: var(--ink);
    font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; }
  .mc-plate__link { display: inline-block; margin-top: 4px; font-size: var(--fs-sm);
    font-weight: 600; color: var(--brand); text-decoration: none; white-space: nowrap; }
  .mc-plate__link:hover { text-decoration: underline; }
  /* On phones the price drops under the title instead of squeezing it. */
  @media (max-width: 559.98px) {
    .mc-plate { grid-template-columns: 1fr;
      grid-template-areas: "name" "price"; row-gap: 6px; }
    .mc-plate__body { grid-area: name; }
    .mc-plate__aside { grid-area: price; flex-direction: row; align-items: baseline;
      justify-content: space-between; gap: 10px; }
    .mc-plate__price { font-size: var(--fs-lg); }
    .mc-plate__link { margin-top: 0; }
  }
  .price-note { font-size: var(--fs-sm); color: var(--muted); margin-top: 10px; }
  .price-note.upcoming { color: var(--warn); background: var(--warn-bg);
    border-radius: var(--r-control); padding: 8px 12px; }

  /* Contact */
  .contact-list { display: flex; flex-direction: column; gap: 10px; }
  .contact-item { display: flex; align-items: center; gap: 12px; font-size: var(--fs-sm); }
  .contact-item a { color: var(--brand); text-decoration: none; font-weight: 600; }
  .contact-item a:hover { text-decoration: underline; }
  /* Official MAX icon in place of a generic emoji — a touch larger so the brand reads. */
  .contact-item .max-ic { width: 24px; height: 24px; display: block; flex-shrink: 0; }
  /* Phone / location as tidy mono SVGs in the brand blue, so the whole block reads as one set. */
  .contact-item .contact-ic { width: 24px; height: 24px; display: block; flex-shrink: 0; fill: var(--brand); }
  /* The Max QR only helps desktop→phone; on a phone you can't scan it with the
     same device, so it is dead weight there — show it from 560px up only. */
  .max-qr { width: 120px; height: 120px; border-radius: var(--r-control); border: 1px solid var(--line); }
  .contact-item--qr { display: none; }
  @media (min-width: 560px) { .contact-item--qr { display: flex; } }

  .divider { border: none; border-top: 1px solid var(--line); margin: 30px 0 0; }

/* The studio leads: mark, name and tagline on the centre axis, as on the current
   site; the offer follows directly as the second level, actions still in the fold. */
.client .home-welcome { display: flex; flex-direction: column; align-items: center;
  gap: 32px; padding: 24px 0 8px; text-align: center; }
.client .masthead { padding: 0; gap: 12px; }
.client .masthead__logo { width: var(--client-logo-size); height: var(--client-logo-size);
  object-fit: contain; }
/* Same size as every other page's h1 — the studio name is never the smaller heading. */
.client .masthead__title { font-size: var(--fs-client-title); line-height: 1.2; margin: 0; }
.client .masthead__tagline { font-size: var(--fs-base); line-height: 1.5;
  color: var(--client-gold); font-weight: 500; margin: 0; }
.client .home-intro { min-width: 0; max-width: 36rem; text-align: center; }
.client .home-intro p { font-size: var(--fs-base); color: var(--muted); line-height: 1.65; }
.client .home-intro .home-location { font-weight: 500; }
.client .home-pitch { font-family: var(--font-ui); font-size: var(--fs-xl);
  line-height: 1.3; font-weight: 700; letter-spacing: -.01em; margin-bottom: 4px;
  text-wrap: balance; }
.client .home-hero-actions { justify-content: center; margin: 24px 0 14px; }
.client .home-hero-actions .btn { flex: 0 1 auto; }
/* Signed in: the same centred identity, smaller, so the summary stays in the fold. */
.client .home-welcome--client { padding: 0 0 24px; }
.client .home-welcome--client .masthead__logo { width: var(--client-logo-signed-in-size);
  height: var(--client-logo-signed-in-size); }
/* The owner's own picture, in its own proportions (spec 031): the column's width
   at most, and never taller than most of the screen. */
.client .home-art { margin: 32px auto 0; max-width: 640px; }
.client .home-art img { display: block; width: auto; max-width: 100%; height: auto;
  max-height: 70vh; margin: 0 auto; }
.client .section-title { margin-bottom: 20px; }
.client .home-about { padding: 28px 32px; border-radius: var(--r-lg); background: var(--paper); }
.client .home-about .section-body { max-width: 72ch; line-height: 1.8; }
.client .home-about .works-grid { margin-top: 24px; }
.client .agelist { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 768px) and (max-width: 959.98px) {
  .client .agelist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.client .agelist__row { display: flex; align-items: flex-start; flex-direction: column; gap: 8px; }
.client .agelist__age { font-family: var(--font-ui); font-size: var(--fs-xl); color: var(--brand); }
.client .agelist__tag { font-size: var(--fs-base); color: var(--ink); }
.client .agelist__more { min-height: 44px; padding: 12px 0; text-underline-offset: 5px; }
/* Top-aligned, so plan names sit on one line whether or not a tile has a total. */
/* Buttons size to their label; a lone action stretched across the card read as a banner. */
.client .announce__actions .btn { flex: 0 1 auto; }
.client .hero + .announce__actions { justify-content: center; }
.client .pcard { gap: 6px; justify-content: flex-start; }
.client .pcard__per { line-height: 1.25; }
.client .pcard__cost { gap: 2px; }
.client .pcard__unit { font-size: var(--fs-sm); }
.client .home-contacts { padding: 32px; border-radius: var(--r-lg);
  background: var(--brand-tint-soft); border: 1px solid var(--brand-tint-strong); }
.client .home-contacts__intro { max-width: 60ch; color: var(--muted); line-height: 1.75;
  margin-bottom: 20px; }
.client .contact-list { gap: 12px; }
.client .contact-item { font-size: var(--fs-base); line-height: 1.75; }
.client .contact-item a { display: inline-block; padding: 8px 0; text-decoration: underline;
  text-underline-offset: 4px; }
.client .contact-item--qr { padding-left: 36px; }
/* From 560px the QR stands beside the list instead of breaking it in two. */
@media (min-width: 560px) {
  .client .contact-list { display: grid; grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 24px; align-items: center; }
  .client .contact-item { grid-column: 1; }
  .client .contact-item--qr { grid-column: 2; grid-row: 1 / span 3; padding-left: 0; }
}
@media (max-width: 767px) {
  .client .home-welcome { gap: 24px; padding: 0 0 28px; }
  .client .masthead { gap: 8px; }
  .client .masthead__logo { width: var(--client-logo-mobile-size); height: var(--client-logo-mobile-size); }
  .client .masthead__tagline { font-size: var(--fs-sm); }
  .client .home-about, .client .home-contacts { padding: 24px 20px; }
  .client .agelist { grid-template-columns: 1fr; }
  .client .agelist__row { display: grid; grid-template-columns: 1fr auto;
    grid-template-areas: "age meta" "tag tag"; gap: 4px 12px; padding: 18px 20px; }
  .client .agelist__age { grid-area: age; }
  .client .agelist__meta { grid-area: meta; align-self: center; }
  .client .agelist__tag { grid-area: tag; }
}
@media (max-width: 559.98px) {
  .client .home-hero-actions { flex-direction: column; gap: 10px; margin-top: 20px; }
  .client .announce__actions { flex-direction: column; }
  .client .announce__actions .btn { flex: 0 1 auto; }
  .client .announce { padding: 22px 20px; }
  .client .pcard { padding: 18px 20px; }
}