*{box-sizing:border-box;margin:0;padding:0}
  html,body{color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}
  /* Figma sets weight per-character (Gerbera-Medium runs inside otherwise-Regular
     text): «12,847», «4,9 из 5», «точную цену». 500 = Gerbera-Medium @font-face. */
  .fw-med{font-weight:500}
  body{display:flex;justify-content:center}

  /* Stage mirrors the 1440-wide Figma frame, but reflows below it.
     Figma frame «1 экран» 7816:21006 = 1440×817; header instance 1440 sits above it.
     Frame content x-origin 12115 inside a 11975-wide frame → side gutter 140. */
  .stage{width:100%;max-width:1440px;background:var(--white);overflow:clip}
  .frame{--gutter:140px;padding:0 var(--gutter) 110px;position:relative}

  /* ── site header (instance 1440 / menu_1) ─────────────────────────── */
  /* Figma: instance 1440 AND menu_1 each carry the SAME DROP_SHADOW
     (offset 0/2, blur 10, rgba(0,0,0,.08), spread 0). The divider bands are
     those shadows — a solid block's bottom edge casts the soft line:
       · menu_1 (white block: top-row + nav-main) → band between nav rows (y131)
       · instance 1440 (whole header)             → band under nav-sub  (y193)
     No separate line/stroke node exists in Figma; a shadow needs a block
     caster (a 1px line casts almost nothing), hence the full white .menu-card. */
  /* full-bleed like menu_1 so the bottom-edge shadow is a straight band to the
     frame edges (clipped by .stage overflow); inset content back via padding. */
  .site-header{margin:0 calc(-1*var(--gutter));padding:0 var(--gutter) 20px;
               box-shadow:0 2px 10px rgba(0,0,0,.08)}
  .menu-card{background:var(--white);margin:0 calc(-1*var(--gutter));
             padding:32px var(--gutter) 20px;box-shadow:0 2px 10px rgba(0,0,0,.08)}
  .header-top{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
              padding-bottom:24px}
  .logo{display:inline-flex;flex:none}
  .logo img{display:block;height:29px;width:auto}                 /* logo I…13539 198×29 */
  .header-right{display:flex;align-items:center;gap:36px}
  .geo{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-body-sm);
       line-height:1;color:var(--ink)}
  .geo img{width:12px;height:12px}                                /* city marker I…13558 */
  .phone{font-size:var(--fs-lead);line-height:1;color:var(--ink);text-decoration:none;white-space:nowrap}
  .login{background:var(--accent);color:var(--ink);border-radius:60px;padding:10px 26px;
         font-size:var(--fs-body-sm);line-height:1;text-decoration:none}
  .login:hover{filter:brightness(.96)}
  /* mobile-only header variants (stacked logo, cities geo, icon circle-buttons) —
     hidden on desktop; the desktop header (wide logo, «Москва», phone, login) is unchanged */
  .logo .logo-stack{display:none}
  .geo-mobile,.icon-btns{display:none}

  /* nav rows — Frame 1021 (itemSpacing 40) + Frame 1020 (itemSpacing 40) */
  .nav-main{display:flex;align-items:center;gap:40px;flex-wrap:wrap;margin-top:8px}
  .nav-main a{font-size:var(--fs-nav);line-height:var(--lh-nav);letter-spacing:var(--ls-nav);
              text-transform:uppercase;color:var(--placeholder);text-decoration:none}
  .nav-main a.active{color:var(--ink)}
  .nav-main a:hover{color:var(--ink)}
  .nav-sub{display:flex;align-items:center;gap:40px;flex-wrap:wrap;margin-top:20px}
  .nav-sub a{font-size:var(--fs-nav);line-height:var(--lh-nav);color:var(--placeholder);text-decoration:none}
  .nav-sub a:hover{color:var(--ink)}

  /* ── top meta row (rating leaf + done text · stars + score) ───────── */
  /* lives at the TOP of the left hero column so the calc card (right column)
     top-aligns with this rating row, per Figma (group y233 ≈ rating y234). */
  .topbar{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin:0 0 40px}
  .done{display:flex;align-items:center;gap:6px;font-size:var(--fs-lead);line-height:20px}
  .done img.leaf{width:16.5px;height:17.4px;flex:none}            /* path30 7816:20751 */
  .rating{display:flex;align-items:center;gap:2px}
  .rating img.stars-one{display:none;width:16px;height:16px;position:relative;top:-1.5px}  /* mobile single star; Figma lifts it ~1.5px above the digit centre (optical, not flex-centred) */
.rating img.stars{width:103px;height:19px}                      /* Frame 1132 7816:20753 */
  .rating b{font-size:var(--fs-lead);line-height:20px;font-weight:500}  /* Gerbera-Medium per Figma */

  /* ── two-column hero ──────────────────────────────────────────────── */
  /* gap = H1-frame right (639) → calc left, i.e. 55px. The old 71px was taken
     off the narrower lede (621) and squeezed the column 16px under Figma, so
     h1/desc/contact reflowed early. calc x is unchanged (639+55 = 623+71). */
  .hero{display:grid;grid-template-columns:minmax(0,1fr) 466px;gap:55px;align-items:start;margin-top:41px}

  h1{font-size:var(--fs-h1);line-height:var(--lh-h1);font-weight:400;max-width:639px;letter-spacing:normal}

  /* trust pills — Frame 4 (itemSpacing 16) → Frame 3/2/1, radius 12, pad 8/12 */
  .trust{display:flex;flex-wrap:wrap;gap:16px;margin:24px 0}
  /* flex:none — without it the pill (a flex item of .trust) lets its text box
     compute narrower than its max-width, tipping the text into a 3rd line; that
     earlier looked like "Chrome wraps wider than Figma" and got mis-fixed by
     inflating widths. Pinned to its width, the text fits 2 lines at Figma's own
     hug-widths and all three sit on one row at Figma's 16px gap (593+32 ≤ 639). */
  .pill{display:inline-flex;align-items:center;gap:6px;flex:none;background:var(--surface);
        border-radius:var(--r-card);padding:8px 12px;font-size:var(--fs-caption);
        line-height:var(--lh-caption);color:var(--ink)}
  .pill img{width:16px;height:16px;flex:none}
  /* Figma hug-widths; supply/contract +1px = Chrome's measured 2-line minimum. */
  .pill.cancel{max-width:180px}                 /* Frame 3 w=180 */
  .pill.supply{max-width:244px}                 /* Frame 2 w=243 +1 */
  .pill.contract{max-width:169px}               /* Frame 1 w=168 +1 */

  .lede{font-size:var(--fs-lead);line-height:var(--lh-lead);max-width:621px;margin-bottom:24px}

  /* CTA — Frame 1305 (itemSpacing 16); Button radius 40, pad 10/40 */
  .cta-row{display:flex;flex-wrap:nowrap;gap:16px;margin-bottom:32px}
  .btn{border:0;cursor:pointer;font-family:inherit;font-size:var(--fs-body-sm);line-height:21px;
       white-space:nowrap;border-radius:var(--r-pill);padding:14.5px 40px;text-align:center;
       transition:filter .15s,transform .05s}
  .btn:active{transform:translateY(1px)}
  .btn-dark{background:var(--ink);color:#fff}
  .btn-accent{background:var(--accent);color:var(--ink)}
  .btn:hover{filter:brightness(.94)}

  /* contact row — label 20/Medium + WhatsApp/Telegram chips (radius 12, pad 8/12).
     In Figma the row (≈660px) overflows the column into the gutter and stays on
     one line; nowrap + Figma's 12px itemSpacing reproduces that (wraps on mobile). */
  .contact-row{display:flex;align-items:center;flex-wrap:nowrap;gap:12px;margin-bottom:32px}
  /* keep label on one line; let the row overflow the column into the gutter
     like Figma (≈660px) instead of squeezing the label into a 2nd line. */
  .contact-row .label{font-size:var(--fs-lead);line-height:28px;letter-spacing:-.4px;
                      flex:none;white-space:nowrap}
  .chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface);
        border-radius:var(--r-card);padding:8px 12px;font-size:var(--fs-caption);line-height:var(--lh-caption);
        color:var(--ink);text-decoration:none}
  .chip img{width:16px;height:16px}
  .chip:hover{filter:brightness(.96)}

  .desc{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--muted);max-width:636px}

  /* ── ceo-form card (прод OrderForm.vue isCeoForm — вертикальный вид, как на мобилке) ──
     стиль-значения 1:1 из api/.../components/OrderForm.vue (классы .ceo-*) */
  .calc{background:#F5F0ED;border-radius:var(--r-card);padding:32px;align-self:start;
        display:flex;flex-direction:column}
  /* порядок полей = мобильный .ceo-form: Тип уборки → Количество комнат → Телефон */
  .ceo-field{margin-bottom:24px}
  .ceo-label{text-transform:uppercase;font-size:12px;letter-spacing:.5px;color:var(--placeholder);
             margin-bottom:8px}                                  /* .ceo-form .calculator-input-label */
  /* Тип уборки — пилюли с ?-бейджем (.ceo-types-grid / .ceo-type-btn @1024) */
  .ceo-types-grid{display:flex;flex-wrap:wrap;gap:8px}
  .ceo-type-btn{flex:0 0 auto;min-height:52px;padding:10px 20px;border:1px solid var(--border);
                border-radius:999px;background:var(--white);color:var(--ink);font-family:inherit;
                font-size:15px;line-height:140%;cursor:pointer;display:flex;align-items:center;
                justify-content:center;gap:6px}
  .ceo-type-btn:hover{border-color:var(--ink)}
  .ceo-type-btn--selected{background:var(--ink);color:var(--white);border-color:var(--ink)}
  .ceo-type-btn__hint{width:20px;height:20px;flex:0 0 20px;cursor:pointer}
  .ceo-type-btn--selected .ceo-type-btn__hint{filter:invert(1) brightness(2)}
  /* Количество комнат — круги 56px (.ceo-rooms-grid / .ceo-room-btn @1024) */
  .ceo-rooms-grid{display:flex;flex-wrap:wrap;gap:8px}
  .ceo-room-btn{width:56px;height:56px;flex:0 0 56px;border:1px solid var(--border);border-radius:50%;
                background:var(--white);color:var(--ink);font-family:inherit;font-size:17px;line-height:1;
                cursor:pointer;display:flex;align-items:center;justify-content:center}
  .ceo-room-btn:hover{border-color:var(--ink)}
  .ceo-room-btn--selected{background:var(--ink);color:var(--white);border-color:var(--ink)}
  /* Телефон — vuetify outlined rounded (h≈56, граница #D6D0CD) */
  .ceo-phone-input{height:56px;border:1px solid var(--border);border-radius:28px;background:var(--white);
                   display:flex;align-items:center;padding:0 24px;font-size:16px;color:var(--placeholder)}
  /* блок цены + кнопка + звонок (.form-actions) */
  .ceo-actions{display:flex;flex-direction:column}
  .ceo-price-row{display:flex;align-items:flex-start;flex-wrap:wrap;gap:12px}     /* .ceo-price-row */
  .ceo-total{font-size:38px;line-height:1.1;font-weight:500;color:var(--ink)}    /* .ceo-total @1024 */
  .ceo-discount-badge{background:#7BE19C;border-radius:999px;padding:7px 12px;font-size:13px;
                      line-height:140%;color:var(--ink);white-space:nowrap}      /* .ceo-discount-badge */
  .ceo-summary{font-size:13px;line-height:140%;color:var(--placeholder);margin:4px 0 12px}  /* .ceo-summary */
  /* .v-btn-main: bg #9BF0F5, h50, w100%, r40, font15 */
  .ceo-btn-main{height:50px;width:100%;background:var(--accent);color:var(--ink);border:0;cursor:pointer;
                font-family:inherit;font-size:15px;border-radius:40px;text-align:center}
  .ceo-btn-main:hover{filter:brightness(.94)}
  /* или позвоните нам — зелёный круг 44px + телефон города (.ceo-call-row) */
  .ceo-call-row{display:flex;align-items:center;gap:12px;margin-top:16px;text-decoration:none;color:inherit}
  .ceo-call-icon{flex:0 0 44px;width:44px;height:44px;border-radius:50%;background:#7BE19C;
                 display:flex;align-items:center;justify-content:center}
  .ceo-call-glyph{width:22px;height:22px}
  .ceo-call-text{display:flex;flex-direction:column;line-height:1.2}
  .ceo-call-label{font-size:14px;color:var(--placeholder)}
  .ceo-call-phone{font-size:16px;color:var(--ink);font-weight:500}

  /* десктоп: цена + «позвоните нам» центрированы по горизонтали относительно кнопки */
  @media (min-width:561px){
    .ceo-call-row{justify-content:center}
  }

  /* ── responsive reflow ────────────────────────────────────────────── */
  @media (max-width:1180px){
    .frame{--gutter:56px;padding:0 var(--gutter) 72px}
    .hero{grid-template-columns:1fr;gap:40px}
    .calc{max-width:560px}
    h1{font-size:clamp(34px,5.2vw,52px)}
    .nav-main,.nav-sub{gap:28px}
  }
  /* mobile — Figma frame «Главная СЕО / 375» (8068:5036) hero section.
     Same DOM as desktop 1440, reflowed to one column. Pragmatic reflow:
     desktop assets reused (logo shrinks, nav rows scroll) rather than the
     mobile-only icon-button header. Calc rises between the trust pills and
     the lede via display:contents + order (Figma: калькулятор 8083:33225 at
     y455, after Frame 4 y319, before the lede y948). Mobile type scale:
     H1 30/31.2 · lede 16/20.8 · rating/desc/nav 14 · gutter 28 (content 319). */
  @media (max-width:560px){
    .frame{--gutter:28px;padding:0 var(--gutter) 48px}

    /* header — Figma frame «menu logo geo» (8068:5074..): one row
       [stacked logo] · [cursor + cities geo] · [phone circle] [user circle].
       header-right dissolves (display:contents) so its mobile children sit as
       direct flex items of header-top alongside the logo; nav rows scroll. */
    .menu-card{padding:20px var(--gutter) 16px}
    .site-header{padding-bottom:16px}
    .header-top{flex-wrap:nowrap;gap:8px;align-items:center;padding-bottom:16px}
    .header-right{display:contents}
    .geo-wide,.phone,.login{display:none}
    .logo{flex:none}
    .logo .logo-wide{display:none}
    .logo .logo-stack{display:block;height:23px;width:auto}
    .geo-mobile{display:inline-flex;flex:1 1 auto;align-items:flex-start;gap:3px;
                font-size:12px;line-height:16.8px;color:var(--ink)}
    .geo-mobile img{width:9px;height:9px;margin-top:3px;flex:none}
    .icon-btns{display:flex;gap:8px;flex:none}
    .ibtn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
          border-radius:50%;flex:none;text-decoration:none}
    .ibtn-accent{background:var(--accent)}
    .ibtn-surface{background:var(--surface)}
    .ibtn img{display:block}
    .ibtn-accent img{width:19px;height:19px}
    .ibtn-surface img{width:21px;height:21px}
    .nav-main,.nav-sub{flex-wrap:nowrap;overflow-x:auto;gap:20px;margin-top:12px;
                       -ms-overflow-style:none;scrollbar-width:none}
    .nav-main::-webkit-scrollbar,.nav-sub::-webkit-scrollbar{display:none}
    .nav-main a,.nav-sub a{flex:none;white-space:nowrap;
                           font-size:var(--fs-caption);line-height:1.4}

    /* hero → one column; .left dissolves so its children + .calc share the
       flex flow and can be reordered (calc lifted to slot 4). */
    .hero{display:flex;flex-direction:column;gap:24px;margin-top:24px}
    .left{display:contents}
    /* Figma fits «…12,847   ★ 4,9» on one line at content-width 319; keep it on
       one row (default wrap dropped the rating to a 2nd line) */
    .topbar{order:1;margin:0;gap:12px;flex-wrap:nowrap;white-space:nowrap}
    h1{order:2;font-size:30px;line-height:31.2px;max-width:none}
    /* Figma mobile: pills stack full-width (w319), icon top-aligned so the
       2nd pill's 2nd line hangs under the text; vertical pad 4 → h28 single-line */
    .trust{order:3;margin:0;flex-direction:column;gap:6px}
    .trust .pill{max-width:none;width:100%;align-items:flex-start;padding:4px 12px}
    .calc{order:4;max-width:none;align-self:stretch;padding:24px}
    /* комнаты в одну строку — мобильные размеры из исходника (styles <600px: 44px, gap 6, font 15) */
    .ceo-rooms-grid{gap:6px}
    .ceo-room-btn{width:44px;height:44px;flex:0 0 44px;font-size:15px}
    .lede{order:5;font-size:16px;line-height:20.8px;max-width:none;margin:0}
    .cta-row{order:6;flex-wrap:wrap;gap:12px;margin:0}
    .contact-row{order:7;flex-wrap:wrap;align-items:stretch;gap:12px;margin:0}
    /* Figma mobile clamps desc with «…» (h60 / lh19.6); line budget = shared --mobile-text-lines */
    .desc{order:8;max-width:none;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--mobile-text-lines);overflow:hidden}

    /* rating row compact (fs14, matches mobile «Выполнено… : 12,847» 14/14) */
    /* Figma topbar text is fs14/lh14 (1.0). lh1.2 added 2.8px leading that, with
       Gerbera's asymmetric metrics, floated the glyphs above the icon centre →
       text read «too high». Match Figma exactly so flex-centre lines up. */
    .done{font-size:var(--fs-caption);line-height:14px}
    /* leaf is a fixed-px asset (16.5×17.4, sized for desktop's bigger lede). On
       mobile the text drops to fs14, so that same leaf reads ~1.5× the digit cap
       and its big body hangs below the baseline → looked «too low». Figma mobile
       sizes the leaf ≈ digit-cap (ink ratio ~1.05), so scale it ×0.72 to match. */
    .done img.leaf{width:11.85px;height:12.5px;position:relative;top:-1px}
    .rating b{font-size:var(--fs-caption);line-height:14px}
    /* mobile rating: one star + «4,9» (Figma drops the 5-star strip and « из 5»).
       gap 2px was tuned for the 5-star strip → bump to 6px so the star isn't glued
       to «4,9»; flex align-items:center (base) keeps it centred on the text. */
    .rating{gap:6px}
    .rating img.stars-wide{display:none}
    .rating img.stars-one{display:inline-block}
    .from5{display:none}

    /* CTA buttons stack full width (Figma Frame 1305 = two stacked buttons) */
    .cta-row .btn{flex:1 1 100%}

    /* contact: label on its own row, then WhatsApp/Telegram side by side
       (Figma: label y1209 above Frame 1 / Frame 1306 chips y1238, ~150 each). */
    .contact-row .label{flex:1 1 100%;white-space:normal}
    .contact-row .chip{flex:1 1 0;justify-content:center}

  }