/* DKA GROUP · лендинг · телефон «как у Apple» (27.10.2026, владелец: «всё крупно и впритык — экраны должны дышать»).
   ТОЛЬКО телефонная раскладка (html[data-layout=phone]); компьютер (desk-*) не затрагивается.
   Тексты, цвета, шрифты и логотип — прежние; меняются размеры, поля, ритм, сетка, размеры картинок.
   Шкала и замеры apple.com на 393 px — APPLE-SCALE.md. Подключается последним в <head> (index.html). */

/* ── 0. Токены шкалы: поле от края 24 (на 393), ритм разделов 80, поле карточки 24 ── */
html[data-layout=phone]{--m-gut:clamp(20px,6.15vw,28px);--m-sec:80px;--m-head:32px;--m-card:24px;--m-r:20px}

/* общие роли текста */
html[data-layout=phone] #app :is(.b-head,.up-head,.calc__head) h2,
html[data-layout=phone] #app :is(.l-partner__t,.l-cta) h2{font-size:28px;line-height:32px;letter-spacing:-.02em;font-weight:600}
html[data-layout=phone] #app :is(.b-head,.up-head,.calc__head)>p{font-size:16px;line-height:24px;max-width:34em}
html[data-layout=phone] #app :is(.b-head,.up-head,.calc__head){gap:8px}

/* ── 1. Шапка: края по полю страницы ── */
html[data-layout=phone] #app .site-head{padding-left:calc(var(--m-gut) - 4px)!important;padding-right:calc(var(--m-gut) - 4px)!important}
html[data-layout=phone] #app .site-head .s3-signin{font-size:13px!important;padding:0 12px!important}
html[data-layout=phone] .l-header__btns{gap:8px}

/* Меню: пункты 22/28 (было 20 + высота 56 впритык к краю), края по полю страницы */
html[data-layout=phone] .l-menu__top{padding-left:calc(var(--m-gut) - 4px);padding-right:calc(var(--m-gut) - 4px)}
html[data-layout=phone] .l-menu__lang{padding:24px var(--m-gut) 8px}
html[data-layout=phone] .l-menu__list{padding:16px 0 0}
html[data-layout=phone] .l-menu__list a{height:52px;padding:0 var(--m-gut);font-size:22px;line-height:28px;letter-spacing:-.01em}
html[data-layout=phone] .l-menu__foot{padding:16px var(--m-gut) calc(32px + env(safe-area-inset-bottom,0px))}
html[data-layout=phone] .l-menu__foot .dka-btn{height:48px!important;font-size:16px}

/* ── 2. Первый экран: поля по шкале, заголовок 30/34, цифры 28 с подписью 12 ── */
html[data-layout=phone] #app .hero__content{margin:104px var(--m-gut) 0;gap:28px}
html[data-layout=phone] #app .hero__h1{font-size:30px;line-height:34px;letter-spacing:-.025em}
html[data-layout=phone] #app .hero__cta{gap:14px}
html[data-layout=phone] #app .hero__cta .btnw{width:min(264px,100%)}
html[data-layout=phone] #app .hero__cta .dka-btn{height:48px!important}
html[data-layout=phone] #app .hero__sub{font-size:13px;line-height:18px}
html[data-layout=phone] #app .hero__stats{margin:auto var(--m-gut) 36px}
html[data-layout=phone] #app .hero__stats .l-stat{padding:0 4px}
html[data-layout=phone] #app .hero__stats .l-stat>.n{font-size:26px}
html[data-layout=phone] #app .hero__stats .l-stat>.lbl{font-size:12px;line-height:16px;margin-top:4px;max-width:88px;margin-inline:auto} /* все три подписи — в две строки, одинаково */
html[data-layout=phone] #app .s360 .hero__h1{font-size:28px;line-height:32px}
html[data-layout=phone] #app .s360 .hero__content{margin-top:92px}

/* ── 3. «Trusted by…»: больше воздуха, названия 15 вместо 16 жирным ── */
html[data-layout=phone] #app .strip--m .strip__in{padding:40px var(--m-gut);gap:20px}
html[data-layout=phone] #app .strip--m .strip__names{gap:14px 24px;font-size:15px;line-height:20px;max-width:320px}

/* ── 4. Калькулятор (на странице и в шторке) ── */
html[data-layout=phone] #app .mcalc{gap:24px;padding-top:var(--m-sec)!important;padding-bottom:40px!important}
/* калькулятор и «Upload» на одном фоне — общий промежуток 40 + 80, а не 80 + 80 */
html[data-layout=phone] #app .mcalc .calc__head h2{font-size:28px;line-height:32px}
html[data-layout=phone] #app .mcalc .calc__feats{gap:8px;margin-top:16px}
html[data-layout=phone] #app .mcalc .calc__feats .l-feat{padding:12px 6px;gap:6px;border-radius:14px;font-size:12px;line-height:16px}
html[data-layout=phone] #app .mcalc .calc__feats .il{width:20px;height:20px}
html[data-layout=phone] #app .mcalc .steps{gap:12px}
html[data-layout=phone] #app .mcalc .steps__cap{font-size:13px;line-height:18px}
/* карточка шага: поле 20, радиус 20, без тяжёлой тени */
html[data-layout=phone] #app .mcalc .mfield{padding:20px;border-radius:var(--m-r)}
html[data-layout=phone] #app .mcalc .l-step{min-height:0;gap:12px;margin-bottom:4px}
html[data-layout=phone] #app .mcalc .l-step .il,html[data-layout=phone] #app .mcalc .l-step .dka-tile,html[data-layout=phone] #app .mcalc .l-step img{width:36px!important;height:36px!important}
html[data-layout=phone] #app .mcalc .l-step h3{font-size:17px;line-height:22px;letter-spacing:-.01em}
/* районы — «пилюли» 44 с текстом 15 (было 56 и 16 жирным) */
html[data-layout=phone] #app .mcalc .g2.cas{gap:8px}
html[data-layout=phone] #app .mcalc .g2.cas .l-opt{min-height:44px;height:44px;padding:0 16px}
html[data-layout=phone] #app .mcalc .g2.cas .l-opt b{font-size:15px;line-height:20px;font-weight:500}
html[data-layout=phone] #app .mcalc .dka-field__label{margin-bottom:2px}
/* кнопка под шагом 1 — 48 (было 56); пояснение компактнее */
html[data-layout=phone] #app .m-calcgo{gap:12px}
html[data-layout=phone] #app .m-calcgo .dka-btn{height:48px!important}
html[data-layout=phone] #app .m-gonote{padding:12px 14px;font-size:13px;line-height:18px}

/* шторка: поле по шкале (20 — внутри шторки чуть плотнее страницы), карточки шагов легче */
html[data-layout=phone] .m-calcbody.is-sheet{padding-left:20px;padding-right:20px;gap:16px}
html[data-layout=phone] .m-calcbody.is-sheet .m-calctop{margin-left:-20px;margin-right:-20px}
/* в шторке три уровня вложенности (шторка → карточка → вариант) — поля 20 / 16 / 16, чтобы на 360 не было тесно */
html[data-layout=phone] #app .m-calcbody.is-sheet .mfield{padding:16px}
html[data-layout=phone] #app .m-calcbody.is-sheet .pay-opt{padding:16px}
/* шаг 2: поля-списки 48 (было 56), оборудование — строки 60 */
html[data-layout=phone] #app .m-units__field{height:48px;padding:0 14px 0 18px}
html[data-layout=phone] #app .m-units__v{font-size:16px;line-height:22px}
html[data-layout=phone] #app .mcalc .eq-zone{gap:8px}
html[data-layout=phone] #app .mcalc .l-eq{height:60px;padding:0 8px 0 14px;border-radius:14px}
html[data-layout=phone] #app .mcalc .l-eq .l-qty__btn{width:40px;height:40px}
html[data-layout=phone] #app .mcalc .l-eq :is(b,.l-eq__t,.l-eq__name){font-size:15px;line-height:20px}
/* шаг 3: тарифы — поле 16, цена 22, список 13 */
html[data-layout=phone] #app .mcalc .tar-grid,html[data-layout=phone] #app .mcalc .l-tars{gap:16px}
html[data-layout=phone] #app .mcalc .l-tar{padding:16px!important;border-radius:16px;column-gap:12px;row-gap:6px}
html[data-layout=phone] #app .mcalc .l-tar__head .dka-tile{width:36px!important;height:36px!important}
html[data-layout=phone] #app .mcalc .l-tar__name{font-size:17px;line-height:22px}
html[data-layout=phone] #app .mcalc .l-tar__price .dka-amt{font-size:22px!important;line-height:26px!important}
html[data-layout=phone] #app .mcalc .l-tar__list li{font-size:13px;line-height:18px;min-height:28px}
html[data-layout=phone] #app .mcalc .l-tar__btn .dka-btn{height:44px}
/* шаг 4: сроки — строки 64 */
html[data-layout=phone] #app .mcalc .g1{gap:8px}
html[data-layout=phone] #app .mcalc .g1 .l-opt{min-height:60px;border-radius:14px}
html[data-layout=phone] #app .mcalc .g1 .l-opt b{font-size:16px;line-height:22px}
/* шаг 5: варианты оплаты — поле 20, цена 26 */
html[data-layout=phone] #app .mcalc .pay-grid{gap:12px}
html[data-layout=phone] #app .mcalc .pay-opt{padding:20px;border-radius:16px;gap:6px}
html[data-layout=phone] #app .mcalc .pay-opt__h{font-size:17px;line-height:22px}
html[data-layout=phone] #app .mcalc .pay-opt__big{font-size:26px;line-height:30px}
html[data-layout=phone] #app .mcalc .pay-opt .dka-btn{height:48px}
/* форма заявки и поля в калькуляторе — 48 */
html[data-layout=phone] #app .mcalc .dka-field__box{height:48px}
html[data-layout=phone] #app .mcalc .dka-field textarea{min-height:96px}
html[data-layout=phone] #app .mcalc .dka-seg,html[data-layout=phone] #app .mcalc .l-seg{min-height:44px}
/* нижняя панель шторки: края по полю */
html[data-layout=phone] .l-bar{padding-left:12px;padding-right:20px}

/* ── 5. «Upload your project» ── */
html[data-layout=phone] #app .up-cols{gap:32px}
html[data-layout=phone] #app .up-head{gap:8px}
html[data-layout=phone] #app .up-left{gap:24px;align-items:stretch}
html[data-layout=phone] #app .up-left .chips{gap:6px}
/* иллюстрация сметы: 75 % ширины (было почти во весь экран 320 × 392) — масштаб без перерисовки */
html[data-layout=phone] #app .up-left .qp{align-self:center;zoom:.75;margin:8px 0}
/* три шага под иллюстрацией — список с номерами и волосяными линиями */
html[data-layout=phone] #app .up-steps{counter-reset:ups;display:flex;flex-direction:column;margin:0}
html[data-layout=phone] #app .up-steps>span{counter-increment:ups;display:flex;align-items:center;gap:12px;min-height:44px;font-size:14px;line-height:20px;border-top:1px solid var(--border-default,rgba(19,19,21,.1))}
html[data-layout=phone] #app .up-steps>span:last-child{border-bottom:1px solid var(--border-default,rgba(19,19,21,.1))}
html[data-layout=phone] #app .up-steps>span::before{content:counter(ups);flex:none;width:22px;height:22px;display:grid;place-items:center;border-radius:999px;background:var(--brand-100,#EEEAFE);color:var(--brand-600,#5b3fd6);font-size:12px;line-height:1;font-weight:600;font-variant-numeric:tabular-nums}
html[data-layout=phone] #app .up-card{padding:var(--m-card);gap:16px;border-radius:var(--m-r)}
html[data-layout=phone] #app .up-card .l-up{min-height:140px}
html[data-layout=phone] #app .up-fields{gap:14px}

/* ── 6. «Our Services» ── */
html[data-layout=phone] #app .svc-block{gap:var(--m-head)}
html[data-layout=phone] #app .svc-lead{gap:16px}
html[data-layout=phone] #app .l-lead{border-radius:var(--m-r)}
html[data-layout=phone] #app .l-lead__pic{height:148px}
html[data-layout=phone] #app .svc-lead .l-lead__body{padding:20px var(--m-card) var(--m-card)!important;gap:6px}
html[data-layout=phone] #app .l-lead__body h3{font-size:18px;line-height:24px;letter-spacing:-.01em}
html[data-layout=phone] #app .l-lead__m{margin-top:10px}
html[data-layout=phone] #app .l-lead__m b{font-size:24px;line-height:28px}
html[data-layout=phone] #app .svc-compact{margin-top:8px}
html[data-layout=phone] #app .svc-compact .l-cs{min-height:60px;padding:0;gap:14px}
html[data-layout=phone] #app .svc-compact .l-cs .il{width:32px;height:32px}
html[data-layout=phone] #app .svc-compact .l-cs h3{font-size:15px;line-height:20px;font-weight:500}
html[data-layout=phone] #app .svc-compact .l-cs__t{font-size:12px;line-height:16px}

/* ── 7. «Our Work»: заголовок по полю, карточки 84 % ширины, соседняя выглядывает ── */
html[data-layout=phone] #app #cases .b-head{padding-left:var(--m-gut);padding-right:var(--m-gut);margin-bottom:8px}
html[data-layout=phone] #app .cases__grid{padding-left:var(--m-gut);padding-right:var(--m-gut);scroll-padding-inline:var(--m-gut);gap:16px}
html[data-layout=phone] #app .cases__grid>.l-case{flex:0 0 84%;gap:8px}
html[data-layout=phone] #app .cases__grid .l-case__ph{border-radius:16px;overflow:hidden;margin-bottom:6px}
html[data-layout=phone] #app .cases__grid .l-case__cap{font-size:11px;line-height:16px}
html[data-layout=phone] #app .cases__grid .l-case h3{font-size:16px;line-height:22px}
html[data-layout=phone] #app .cases__grid .l-case p{font-size:14px;line-height:20px;-webkit-line-clamp:4;min-height:0}
html[data-layout=phone] #app .cases__dots{margin-top:24px}
/* просмотр работы: текст с полями по шкале */
html[data-layout=phone] .lb .lb__text{padding:24px var(--m-gut) calc(32px + var(--m-safe-b,0px))}
html[data-layout=phone] .lb .lb__text h3,html[data-layout=phone] .lb .lb__text h2{font-size:22px;line-height:28px;letter-spacing:-.015em}
html[data-layout=phone] .lb .lb__text p{font-size:15px;line-height:23px}

/* ── 8. «Partnership Opportunities» ── */
html[data-layout=phone] #app .l-partner{border-radius:var(--m-r)}
html[data-layout=phone] #app .l-pt__field{height:140px}
html[data-layout=phone] #app .l-partner__t{padding:28px var(--m-card) var(--m-card)!important;gap:12px}
html[data-layout=phone] #app .l-partner__t p{font-size:14px;line-height:20px}
html[data-layout=phone] #app .l-partner__t .dka-btn{margin-top:12px}

/* ── 9. «Ready to save on HVAC?» ── */
html[data-layout=phone] #app .cta-wrap{padding-top:16px!important;padding-bottom:var(--m-sec)!important}
html[data-layout=phone] #app .l-cta{padding:40px var(--m-card);gap:12px;border-radius:var(--m-r)}
html[data-layout=phone] #app .l-cta>p{font-size:15px;line-height:22px;max-width:30em}
html[data-layout=phone] #app .l-cta .l-ct__btn{margin-top:12px}
html[data-layout=phone] #app .l-cta__call.s3-wa-row{gap:12px;margin-top:8px}
html[data-layout=phone] #app .l-cta__call.s3-wa-row>span{font-size:13px;line-height:18px}

/* ── 10. Подвал ── */
html[data-layout=phone] #app #contacts{padding-top:64px!important;padding-bottom:calc(32px + env(safe-area-inset-bottom,0px))!important}
html[data-layout=phone] #app .l-foot__cols{gap:40px}
html[data-layout=phone] #app .l-foot__about{font-size:14px;line-height:20px;max-width:280px;margin-top:4px}
html[data-layout=phone] #app .l-foot__two .l-foot__col{gap:0}
html[data-layout=phone] #app .l-foot__col .dka-eyebrow{font-size:11px;line-height:16px;margin-bottom:8px}
/* ссылки: строка 36 (текст 20 + 8 сверху и снизу) — зона нажатия не перекрывает соседнюю */
html[data-layout=phone] #app .l-foot__col a:not(.l-foot__ct){display:flex;align-items:center;min-height:0;padding:8px 0;margin:0;font-size:14px;line-height:20px}
html[data-layout=phone] #app .l-foot__cols>.l-foot__col:last-child .dka-eyebrow{margin-bottom:4px}
html[data-layout=phone] #app .l-foot__col .l-foot__ct{min-height:40px}
html[data-layout=phone] #app .l-foot__bottom{margin-top:8px;padding-top:20px;font-size:12px;line-height:16px}

/* ── 11. Окна: «Become a partner» — поле по шкале, поля 48 ── */
html[data-layout=phone] .s3-pm__panel{padding:8px var(--m-gut) calc(28px + env(safe-area-inset-bottom,0px));gap:16px}
html[data-layout=phone] .s3-pm__h{font-size:22px;line-height:28px;margin-top:8px}
html[data-layout=phone] .s3-pm__lead{font-size:15px;line-height:22px}
html[data-layout=phone] .s3-pm .dka-field__box{height:48px}
html[data-layout=phone] .s3-pm .dka-btn{height:48px!important;margin-top:4px}
/* чек (шторка «Total») */
html[data-layout=phone] .l-sheet{padding-left:var(--m-gut)!important;padding-right:var(--m-gut)!important}