/* Мисс Клин · мир «Бельё с лавандой». Общие стили всех страниц. */
/* шрифты лежат на сайте (assets/fonts, лицензия OFL): Prata для заголовков, Golos Text переменный 400–700 для текста.
   Только кириллица, латиница и для Golos расширенная латиница со знаком рубля */
@font-face{ font-family:'Prata'; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/prata-cyrillic.woff2) format('woff2'); unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face{ font-family:'Prata'; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/prata-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Golos Text'; font-style:normal; font-weight:400 700; font-display:swap; src:url(../fonts/golos-text-cyrillic.woff2) format('woff2'); unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face{ font-family:'Golos Text'; font-style:normal; font-weight:400 700; font-display:swap; src:url(../fonts/golos-text-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Golos Text'; font-style:normal; font-weight:400 700; font-display:swap; src:url(../fonts/golos-text-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root{
  --sheet:#FAF9FC; --sheet-2:#F2F0F6; --cotton:#FFFFFF; --mint:#F0F6F4; --leaf:#5E8A86;
  --shade:rgba(84,64,112,.13); --shade-2:rgba(84,64,112,.07);
  --sage:#B4CCCC; --sage-ink:#4D676D;
  --ribbon:#A278B4; --ribbon-d:#7F5794; --ribbon-l:#CDB0DB; --ribbon-ink:#5E3D73;
  --ink:#2A2430; --ink-2:#564D5F; --ink-3:#6B6274;
  --display:'Prata', Georgia, serif; --text:'Golos Text', system-ui, sans-serif;
  --pad:clamp(20px, 3.4vw, 56px);
  --twine:repeating-linear-gradient(112deg, #CDAD80 0 2.4px, #B69369 2.4px 3.6px, #DCC39D 3.6px 5px); /* джутовая верёвка для прищепок */
  --weave:
    repeating-linear-gradient(0deg, rgba(90,70,120,.018) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(90,70,120,.014) 0 1px, transparent 1px 3px);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:96px; -webkit-text-size-adjust:100%; scrollbar-color:var(--ribbon) var(--sheet-2); }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{ margin:0; color:var(--ink); font:400 16.5px/1.6 var(--text); background:var(--sheet); background-image:var(--weave); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
::selection{ background:var(--ribbon-l); color:var(--ribbon-ink); }
:focus-visible{ outline:2px solid var(--ribbon-d); outline-offset:3px; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-underline-offset:.22em; text-decoration-thickness:1px; }
a[href^="tel:"]{ white-space:nowrap; }
button{ font:inherit; color:inherit; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.ico{ width:22px; height:22px; flex:none; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.care{ width:30px; height:30px; flex:none; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linejoin:round; stroke-linecap:round; }
h1, h2, h3, .sum, .big-phone, .sum-total strong, .step b, .done b, .tape-nums, .bx em, .band-price, .extras b, .price-row b{ font-variant-numeric:lining-nums tabular-nums; }
.wrap{ width:min(1328px, 100%); margin:0 auto; }

/* складки */
.crease-v{ position:absolute; top:0; bottom:0; width:40px; margin-left:-20px; pointer-events:none; z-index:3;
  background:linear-gradient(90deg, transparent, rgba(84,64,112,.06) 26%, rgba(84,64,112,.18) 48%, rgba(255,255,255,.95) 51%, rgba(255,255,255,.25) 62%, transparent 82%); }
.crease-v.valley{ background:linear-gradient(90deg, transparent, rgba(180,204,204,.18) 28%, rgba(150,180,180,.55) 47%, #fff 51%, rgba(180,204,204,.35) 58%, transparent 80%); }
.crease-h{ height:22px; margin:0; border:0; pointer-events:none;
  background:linear-gradient(180deg, transparent, var(--shade-2) 40%, var(--shade) 49%, rgba(255,255,255,.95) 53%, transparent 75%); }
.crease-h.valley{ background:linear-gradient(180deg, transparent, rgba(180,204,204,.35) 44%, var(--sage) 50%, rgba(255,255,255,.9) 54%, transparent 72%); }

/* ---------- шапка ---------- */
.hdr{ position:sticky; top:0; z-index:40; background:rgba(248,247,251,.94); background-image:var(--weave); backdrop-filter:saturate(1.2) blur(6px); -webkit-backdrop-filter:saturate(1.2) blur(6px); }
.hdr::after{ content:""; position:absolute; left:0; right:0; bottom:-11px; height:22px; pointer-events:none;
  background:linear-gradient(180deg, transparent, var(--shade-2) 40%, var(--shade) 49%, rgba(255,255,255,.9) 53%, transparent 75%); }
.hdr-in{ display:flex; align-items:center; gap:28px; height:80px; padding:0 var(--pad); }
.logo{ flex:none; } /* логотип никогда не сжимается по ширине, иначе буквы искажаются */
.logo img{ height:40px; width:auto; max-width:none; }
.nav{ display:flex; gap:26px; margin-left:auto; }
.nav a{ position:relative; text-decoration:none; font-weight:500; font-size:15px; color:var(--ink-2); padding:6px 0; transition:color .2s; white-space:nowrap; }
.nav a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--ribbon); transform:scaleX(0); transform-origin:left; transition:transform .3s cubic-bezier(.16,1,.3,1); }
.nav a:hover, .nav a[aria-current="page"]{ color:var(--ribbon-ink); }
.nav a:hover::after, .nav a[aria-current="page"]::after{ transform:none; }
.hdr-phone{ text-decoration:none; font-weight:600; font-size:15.5px; white-space:nowrap; }
.hdr-max{ display:grid; place-items:center; width:38px; height:38px; margin-left:-18px; border-radius:12px; flex:none; transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s; }
.hdr-max:hover{ transform:translateY(-1px); box-shadow:0 8px 16px -10px rgba(64,83,242,.8); }
.max-logo{ width:30px; height:30px; flex:none; border-radius:8px; }
/* ВКонтакте в шапке сразу за MAX: та же плитка, своя тень цвета VK */
.hdr-vk{ margin-left:-20px; }
.hdr-vk:hover{ box-shadow:0 8px 16px -10px rgba(0,119,255,.75); }
.hdr-vk .vk-logo{ width:30px; height:30px; }
.socials .max-logo, .btn .max-logo{ width:20px; height:20px; border-radius:6px; }
.vk-logo{ width:20px; height:20px; flex:none; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 22px; border:0; cursor:pointer; text-decoration:none;
  font:600 15px/1 var(--text); color:#fff; border-radius:999px; background:linear-gradient(180deg, #8A62A0, #77508D);
  box-shadow:0 10px 22px -14px rgba(94,61,115,.9); transition:filter .2s, transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s; }
.btn:hover{ filter:brightness(1.08); }
.btn:active{ transform:translateY(1px); }
.btn .ico{ width:18px; height:18px; }
.btn.ghost{ color:var(--ribbon-ink); background:#fff; box-shadow:inset 0 0 0 1.5px #DDD3E6; }
.btn.ghost:hover{ filter:none; box-shadow:inset 0 0 0 1.5px var(--ribbon); }
.menu-btn, .phone-btn{ display:none; }

/* ---------- первый экран: лист в три панели ---------- */
.hero{ position:relative; display:grid; grid-template-columns:34% 34% 32%; min-height:min(calc(100svh - 80px), 900px); }
.panel{ position:relative; min-width:0; }
.p1{ background-image:var(--weave), linear-gradient(90deg, #FFFFFF 0%, #F9F8FB 60%, #EEEBF3 100%); }
.p2{ overflow:hidden; transform-origin:left center; }
.p3{ background-image:var(--weave), linear-gradient(90deg, #E9EFEE 0%, #F4F6F7 34%, #FFFFFF 100%); transform-origin:left center; }
.p1-in{ height:100%; display:flex; flex-direction:column; justify-content:center; padding:48px clamp(24px, 3vw, 52px) 56px var(--pad); }
h1{ margin:0; font:400 clamp(40px, 3.95vw, 64px)/1.04 var(--display); letter-spacing:-.02em; color:var(--ink); }
h1 span{ display:block; }
h1 .ln2{ color:var(--ribbon-d); }
.hero h1{ font-size:clamp(36px, 3.3vw, 56px); line-height:1.06; }
.tagline{ margin:20px 0 0; font:400 clamp(19px, 1.55vw, 24px)/1.3 var(--display); color:var(--ink); max-width:26ch; text-wrap:balance; }
.lead{ margin:24px 0 0; max-width:46ch; font-size:clamp(15.5px, 1.1vw, 17px); line-height:1.6; color:var(--ink-2); text-wrap:pretty; }
.p2 picture{ display:block; width:100%; height:100%; }
.p2 img{ width:100%; height:100%; object-fit:cover; object-position:80% 28%; }
.p2::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg, rgba(84,64,112,.12), rgba(84,64,112,0) 14%, rgba(84,64,112,0) 86%, rgba(84,64,112,.1)); }

/* лента и бирка */
.ribbon{ position:absolute; z-index:4; left:50%; top:-80px; width:22px; margin-left:-11px; height:150px;
  background:
    linear-gradient(90deg, rgba(60,30,80,.16) 0 1px, transparent 1px calc(100% - 1px), rgba(60,30,80,.16) calc(100% - 1px)),
    linear-gradient(168deg, transparent 0 46%, rgba(255,255,255,.42) 52%, transparent 58%),
    var(--ribbon);
  clip-path:polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 11px), 0 100%);
  filter:drop-shadow(1px 2px 2px rgba(60,30,80,.25)); }
.p3-in{ --tagtop:30px; --notch-l:#EEF2F2; --notch-r:#FBFBFC; position:relative; height:100%; display:flex; justify-content:center; padding:var(--tagtop) clamp(14px, 2vw, 40px) 40px; }
.grommet{ position:absolute; z-index:5; left:50%; top:16px; width:30px; height:12px; margin-left:-15px; border-radius:6px; background:transparent; box-shadow:inset 0 0 0 1.5px #CFC4DA, inset 0 2px 3px rgba(60,30,80,.18); }
.grommet.slot{ top:calc(var(--tagtop) + 16px); z-index:6; }
.pull{ display:none; }
.tag-wrap{ position:relative; width:100%; max-width:460px; filter:drop-shadow(0 28px 36px rgba(60,35,85,.13)) drop-shadow(0 2px 4px rgba(60,35,85,.08)); align-self:flex-start; }
.tag{ position:relative; background:var(--cotton); background-image:var(--weave), linear-gradient(180deg, #fff, #FBFAFD); border-radius:44px 44px 28px 28px; padding:46px 28px 20px; }
.tag-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px; }
.tag-head h2{ margin:0; font:400 28px/1.15 var(--display); letter-spacing:-.015em; }
.tag-no{ font-size:12.5px; color:var(--ink-3); font-variant-numeric:lining-nums tabular-nums; white-space:nowrap; }
.line{ display:grid; grid-template-columns:1fr; gap:6px; align-items:start; padding:8px 0; border-top:1px solid #EFEAF3; }
.line[hidden]{ display:none; }
.lbl{ font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--sage-ink); }
.line fieldset{ border:0; margin:0; padding:0; min-width:0; }
.boxes{ display:flex; flex-wrap:wrap; gap:6px 16px; }
.boxes.col{ flex-direction:column; gap:6px; }
.bx{ position:relative; display:flex; align-items:center; gap:9px; cursor:pointer; font-size:14.5px; font-weight:500; line-height:1.25; }
.bx input{ position:absolute; opacity:0; width:1px; height:1px; }
.bx i{ width:18px; height:18px; flex:none; border:1.5px solid #9B8DA8; border-radius:6px; background:#fff; position:relative; transition:border-color .2s, background-color .2s, box-shadow .24s cubic-bezier(.16,1,.3,1); }
.bx i::after{ content:""; position:absolute; inset:2.5px; background:var(--ribbon-d); clip-path:polygon(14% 52%, 38% 76%, 88% 18%, 100% 30%, 38% 100%, 0 64%); opacity:0; transform:scale(.4); transition:transform .22s cubic-bezier(.16,1,.3,1), opacity .14s; }
.bx input:checked + i{ border-color:var(--ribbon-d); background:#F7F0FA; }
.bx input:checked + i::after{ opacity:1; transform:none; }
/* точка радио: кольцо тени внутри рамки, поэтому всегда строго по центру при любом масштабе экрана */
.bx input[type=radio] + i{ border-radius:50%; box-shadow:inset 0 0 0 9px #fff; }
.bx input[type=radio] + i::after{ content:none; }
.bx input[type=radio]:checked + i{ background:var(--ribbon-d); box-shadow:inset 0 0 0 3.5px #F7F0FA; }
.bx input:focus-visible + i{ outline:2px solid var(--ribbon-d); outline-offset:2px; }
.bx em{ font-style:normal; font-weight:400; color:var(--ink-3); margin-left:auto; padding-left:8px; white-space:nowrap; font-size:13.5px; }
.boxes.col .bx{ width:100%; }
.boxes.col .bx .dots{ flex:1; min-width:12px; height:1px; margin-top:6px; background:repeating-linear-gradient(90deg, #CFC6D9 0 2px, transparent 2px 5px); }
.boxes.col .bx em{ margin-left:0; padding-left:0; }
.bx input:checked ~ em{ color:var(--ribbon-ink); font-weight:600; }

/* мерная лента площади */
.tape-lbl{ display:flex; justify-content:space-between; align-items:baseline; }
.tape-val{ display:inline-flex; align-items:baseline; gap:4px; text-transform:none; letter-spacing:0; }
.area-num{ width:3.6ch; padding:0 0 2px; border:0; border-bottom:1.5px dashed var(--ribbon-l); background:transparent; font:400 26px/1 var(--display); color:var(--ink); text-align:right; -moz-appearance:textfield; appearance:textfield; border-radius:0; font-variant-numeric:lining-nums; }
.area-num::-webkit-outer-spin-button, .area-num::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.area-num:hover{ border-bottom-color:var(--ribbon); }
.area-num:focus{ outline:none; border-bottom:1.5px solid var(--ribbon-d); }
.tape-val span{ font-size:13px; font-weight:500; color:var(--ink-3); }
.tape{ position:relative; height:40px; }
.tape-scale{ position:absolute; left:0; right:0; top:8px; height:26px; background:#F6EEFA; box-shadow:inset 0 0 0 1px #E8DBF0; border-radius:999px; overflow:hidden; }
.tape-scale::before{ content:""; position:absolute; inset:0 0 auto 0; height:9px; background:repeating-linear-gradient(90deg, var(--ribbon) 0 1px, transparent 1px calc(100% / 48)); opacity:.65; }
.tape-scale::after{ content:""; position:absolute; inset:0 0 auto 0; height:15px; background:repeating-linear-gradient(90deg, var(--ribbon-d) 0 1.5px, transparent 1.5px calc(100% / 24)); }
.tape-fill{ position:absolute; left:0; top:8px; height:26px; width:var(--fill, 20%); border-radius:999px 0 0 999px; background:linear-gradient(180deg, rgba(162,120,180,.18), rgba(162,120,180,.32)); pointer-events:none; }
.tape input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; }
.tape-thumb{ position:absolute; top:2px; left:var(--fill, 20%); width:3px; height:38px; margin-left:-1.5px; background:var(--ribbon-ink); pointer-events:none; }
.tape-thumb::before{ content:""; position:absolute; top:-5px; left:-6px; width:15px; height:9px; background:var(--ribbon-ink); clip-path:polygon(0 0, 100% 0, 50% 100%); }
.tape input:focus-visible ~ .tape-thumb{ box-shadow:0 0 0 3px var(--ribbon-l); }
.tape-nums{ display:flex; justify-content:space-between; font-size:11.5px; color:var(--ink-3); margin-top:2px; }

.stp{ display:flex; align-items:center; gap:10px; font-size:14.5px; font-weight:500; }
.stp .nm{ flex:1; min-width:0; }
.stp .nm em{ font-style:normal; font-weight:400; color:var(--ink-3); font-size:13.5px; margin-left:4px; white-space:nowrap; }
.stp button{ width:30px; height:30px; display:grid; place-items:center; border:1.5px solid #DDD3E6; border-radius:50%; background:#fff; cursor:pointer; transition:border-color .2s, background .2s; flex:none; }
.stp button:hover{ border-color:var(--ribbon); background:#FAF6FC; }
.stp button:disabled{ opacity:.35; cursor:default; }
.stp button .ico{ width:14px; height:14px; stroke-width:2.2; }
.stp output{ width:22px; text-align:center; font-weight:600; font-variant-numeric:lining-nums tabular-nums; }
.steppers{ display:grid; gap:4px; }

/* шаги: вкладки, страницы одной высоты, переход вперёд и назад */
.tabs{ position:relative; display:flex; gap:2px; padding:3px; margin:0 -6px 4px; border-radius:999px; background:#F6EEFA; box-shadow:inset 0 0 0 1px #E8DBF0; }
.tab{ position:relative; flex:1 1 auto; min-width:0; height:32px; padding:0 8px; border:0; border-radius:999px; background:none; cursor:pointer; font:600 12.5px/1 var(--text); color:var(--ink-2); white-space:nowrap; transition:background .2s, color .2s, box-shadow .25s; }
.tab:hover{ color:var(--ribbon-ink); }
.tab-ind{ position:absolute; z-index:0; top:3px; bottom:3px; left:0; width:var(--w, 0); border-radius:999px; background:#fff; box-shadow:0 1px 2px rgba(60,35,85,.12), 0 6px 12px -8px rgba(60,35,85,.4); transform:translateX(var(--x, 0)); opacity:0; pointer-events:none; transition:transform .42s cubic-bezier(.16,1,.3,1), width .42s cubic-bezier(.16,1,.3,1); }
.tabs.ind .tab-ind{ opacity:1; }
.tab{ z-index:1; }
.tabs.ind .tab[aria-selected="true"]{ background:none; box-shadow:none; }
.tab[aria-selected="true"]{ background:#fff; color:var(--ribbon-ink); box-shadow:0 1px 2px rgba(60,35,85,.12), 0 6px 12px -8px rgba(60,35,85,.4); }
.tab:focus-visible{ outline-offset:1px; }
.tab .mark{ position:absolute; left:50%; bottom:3px; width:5px; height:5px; margin-left:-2.5px; border-radius:50%; background:var(--ribbon-d); }
.tab .mark[hidden]{ display:none; }
@media (prefers-reduced-motion:no-preference){
  .tab .mark:not([hidden]){ animation:mark-in .35s cubic-bezier(.16,1,.3,1); }
  .stp output.bump{ animation:bump .3s cubic-bezier(.16,1,.3,1); }
  .stp output.bump.down{ animation-name:bump-down; }
}
@keyframes mark-in{ from{ transform:scale(0); } }
@keyframes bump{ from{ opacity:.25; transform:translateY(-6px); } }
@keyframes bump-down{ from{ opacity:.25; transform:translateY(6px); } }
.pages{ display:grid; }
.page{ grid-area:1 / 1; min-width:0; visibility:hidden; opacity:0; transition:opacity .16s ease, visibility 0s linear .16s; }
.page.on{ visibility:visible; opacity:1; transition:none; }
.page > .line:first-child{ border-top:0; }
.pg-h{ margin:10px 0 8px; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--sage-ink); }
.hint{ margin:8px 0 0; font-size:13px; line-height:1.45; color:var(--ink-3); }
.hint + .boxes{ margin-top:10px; }
.page .steppers + .steppers{ margin-top:8px; }
.page .boxes + .steppers{ margin-top:10px; }
.kinds.off .bx{ opacity:.45; }
.bx.minor{ margin:10px 0 2px; font-size:13.5px; color:var(--ink-2); }
.pg-nav{ display:flex; align-items:center; gap:8px; min-height:52px; padding:4px 0; }
.pg-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; border:0; border-radius:999px; cursor:pointer; font:600 14.5px/1.2 var(--text); color:var(--ribbon-ink); white-space:nowrap; transition:background-color .2s, box-shadow .2s, transform .2s; }
.pg-btn[hidden]{ display:none; }
.pg-btn:active{ transform:translateY(1px); }
.pg-btn .ico{ width:17px; height:17px; transition:transform .3s cubic-bezier(.16,1,.3,1); }
/* «Назад» маленькая круглая, «Далее» широкая сиреневая: следующий шаг заметен, но слабее кнопки заявки */
.pg-btn.prev{ flex:none; width:44px; padding:0; background:#fff; box-shadow:inset 0 0 0 1.5px #DDD3E6; }
.pg-btn.prev .ico{ transform:scaleX(-1); }
.pg-btn.prev:hover{ box-shadow:inset 0 0 0 1.5px var(--ribbon); }
.pg-btn.next{ flex:1; min-width:0; padding:0 18px; background:#F0E4F6; box-shadow:inset 0 0 0 1.5px #E2D0EC; }
.pg-btn.next:hover{ background:#EADAF2; box-shadow:inset 0 0 0 1.5px var(--ribbon); }
.pg-btn.next:hover .ico{ transform:translateX(3px); }
.pg-btn.next.nudge .ico{ animation:nudge 1s cubic-bezier(.16,1,.3,1) 2; }
@keyframes nudge{ 30%{ transform:translateX(6px); } 60%{ transform:none; } }
.extra-note{ margin:6px 0 0; font-size:13px; line-height:1.45; color:var(--ink-2); }
.extra-note[hidden]{ display:none; }

/* купон под линией отрыва: скидка на первый заказ и кнопка заявки */
.coupon{ position:relative; margin:22px -28px -20px; padding:26px 28px 16px; border-radius:0 0 28px 28px; background:linear-gradient(180deg, #FAF5FC, #F4EBF8); }
.coupon .tear{ position:absolute; left:0; right:0; top:-11px; margin:0; }
.coupon-h{ position:absolute; z-index:1; left:50%; top:0; transform:translate(-50%, -52%); display:flex; align-items:center; gap:8px; margin:0; padding:0 12px; white-space:nowrap;
  font:400 19px/1.2 var(--display); color:var(--ribbon-ink); background:linear-gradient(180deg, #FCFBFD 50%, #FAF5FC 50%); }
.coupon-h .care{ width:21px; height:21px; color:var(--ribbon-d); }
.note-box{ margin:6px 0 4px; padding:14px 16px; border-radius:16px; background:var(--mint); color:#36504F; font-size:14px; line-height:1.5; }

.tear{ position:relative; height:22px; margin:10px -28px 10px; background:repeating-linear-gradient(90deg, #CFC4DA 0 6px, transparent 6px 11px) center/100% 1px no-repeat; }
.tear::before, .tear::after{ content:""; position:absolute; top:50%; width:22px; height:22px; margin-top:-11px; border-radius:50%; background:var(--notch-l, #F6F7F8); }
.tear::before{ left:-11px; } .tear::after{ right:-11px; background:var(--notch-r, #F6F7F8); }
.total{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; padding-top:10px; border-top:1px solid #EFEAF3; flex-wrap:wrap; }
.total small{ display:block; font-size:12.5px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--sage-ink); margin-bottom:4px; }
.sum{ font:400 clamp(32px, 2.7vw, 40px)/1 var(--display); letter-spacing:-.02em; white-space:nowrap; }
/* скидка по акции: цена без скидки зачёркнута в строке «Итого»; строка есть всегда, поэтому бирка не растёт */
.sum-was{ margin-left:8px; font-size:14px; line-height:1; font-weight:500; letter-spacing:0; text-transform:none; color:var(--ink-3); white-space:nowrap;
  text-decoration-thickness:1.5px; text-decoration-color:var(--ribbon-d); font-variant-numeric:lining-nums tabular-nums; }
.sum-was[hidden]{ display:none; }
.first-pill{ display:inline-flex; align-items:center; gap:6px; min-height:30px; max-width:100%; padding:4px 12px; border-radius:999px; background:var(--mint); color:#36504F; font-size:12.5px; font-weight:600; line-height:1.35; text-wrap:balance; }
/* акция выключена или закончилась: плашка, купон и фраза в ответе прячутся (display у плашки перебил бы hidden) */
[data-promo][hidden]{ display:none !important; }
.first-pill .care{ width:16px; height:16px; color:var(--leaf); }
.tag .btn{ width:100%; min-height:52px; font-size:16px; }
.fine{ margin:8px 0 0; font-size:12.5px; color:var(--ink-3); text-align:center; line-height:1.45; }

/* появление первого экрана: .motion ставит скрипт в <head> (видимая вкладка без reduced motion),
   .loaded он же добавляет, когда шрифты и фото готовы. До этого первый экран ждёт в начальном кадре анимации,
   поэтому подмена шрифтов и подстройка высоты бирки проходят незаметно. Текст не до нуля прозрачный: так он считается показанным */
.motion:not(.loaded) .p1-in > *{ opacity:.001; transform:translateY(14px); }
.motion:not(.loaded) .p2 img, .motion:not(.loaded) .p3 .tag-wrap{ opacity:0; }
.motion:not(.loaded) .p3 .ribbon{ clip-path:inset(0 0 100% 0); }
.motion.loaded .p2 img{ animation:settle 1.8s cubic-bezier(.16,1,.3,1) both; }
.motion.loaded .p3 .ribbon{ animation:drop .9s cubic-bezier(.16,1,.3,1) .2s both; }
.motion.loaded .p3 .tag-wrap{ transform-origin:50% 0; animation:hang 1.1s cubic-bezier(.16,1,.3,1) .45s both; }
.motion.loaded .p1-in > *{ animation:rise .9s cubic-bezier(.16,1,.3,1) both; }
.motion.loaded .p1-in > *:nth-child(2){ animation-delay:.1s; } .motion.loaded .p1-in > *:nth-child(3){ animation-delay:.2s; }
@media (prefers-reduced-motion:no-preference){
  .pages.moving .page.on{ animation:pg-in .5s cubic-bezier(.16,1,.3,1); }
}
@keyframes settle{ from{ opacity:0; transform:scale(1.04); } }
@keyframes hang{ from{ opacity:0; transform:translateY(-20px) rotate(-1.4deg); } }
@keyframes pg-in{ from{ opacity:0; transform:translateX(calc(var(--dir, 1) * 18px)); } }
@keyframes drop{ from{ clip-path:inset(0 0 100% 0); } to{ clip-path:polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 11px), 0 100%); } }
@keyframes rise{ from{ opacity:.001; transform:translateY(14px); } }

@keyframes lift{ from{ opacity:0; transform:translateY(18px); } }
@keyframes draw{ from{ stroke-dashoffset:120; } to{ stroke-dashoffset:0; } }
@keyframes stitch{ from{ clip-path:inset(0 100% 0 0 round 22px); } to{ clip-path:inset(0 0 0 0 round 22px); } }
@keyframes stack-in{ from{ opacity:0; transform:translateY(-24px) scaleY(.97); } }
@keyframes beat{ 0%, 100%{ transform:none; } 22%{ transform:scale(1.12); } 42%{ transform:scale(.97); } 62%{ transform:scale(1.04); } }
@keyframes leader{ from{ transform:scaleX(0); } }

/* плашки поднимаются по очереди, значки ухода прорисовываются линией */
.motion .plaques:not(.in) .plaque{ opacity:0; }
.motion .plaques.in .plaque{ animation:lift .8s cubic-bezier(.16,1,.3,1) both; }
.motion .plaques.in .plaque:nth-child(2){ animation-delay:.09s; } .motion .plaques.in .plaque:nth-child(3){ animation-delay:.18s; }
.motion .plaques.in .ring .care{ stroke-dasharray:120; animation:draw 1.2s ease-out .3s both; }
/* услуги ложатся стопкой, как сложенное бельё */
.stack .band{ transform-origin:50% 0; }
.motion .stack:not(.in) .band{ opacity:0; }
.motion .stack.in .band{ animation:stack-in .7s cubic-bezier(.16,1,.3,1) both; }
.motion .stack.in .band:nth-child(2){ animation-delay:.07s; } .motion .stack.in .band:nth-child(3){ animation-delay:.14s; }
.motion .stack.in .band:nth-child(4){ animation-delay:.21s; } .motion .stack.in .band:nth-child(5){ animation-delay:.28s; } .motion .stack.in .band:nth-child(6){ animation-delay:.35s; }
/* этикетка доп. услуг: строчка прошивается слева направо */
.motion .label:not(.in)::before{ clip-path:inset(0 100% 0 0 round 22px); }
.motion .label.in::before{ animation:stitch 1.2s cubic-bezier(.16,1,.3,1) .1s both; }
.motion .label:not(.in) > *{ opacity:0; }
.motion .label.in > *{ animation:lift .7s cubic-bezier(.16,1,.3,1) .25s both; }
/* этапы: верёвка плавно натягивается, прищепки садятся по очереди вдоль неё, бирки мягко опускаются, раз качнутся и замрут.
   Каждая бирка отмечается сама, когда попала в экран (.step.in, site.js), --d задаёт очерёдность; верёвка и прищепка с биркой не двигаются,
   наклон бирок на десктопе остаётся на .step */
.cord{ transform-origin:0 50%; }
.motion .steps-sec:not(.in) .cord{ transform:scaleX(0); }
.motion .steps-sec.in .cord{ animation:rope-in 1.2s cubic-bezier(.65,0,.35,1) both; }
.step{ --d:calc(var(--n) * .15s); }
.motion .steps-sec .step:not(.in) .step-tag, .motion .steps-sec .step:not(.in) .pin{ opacity:0; }
.motion .steps-sec .step.in .pin{ animation:pin-soft .5s cubic-bezier(.33,1,.68,1) calc(var(--d) + .4s) both; }
.motion .steps-sec .step.in .step-tag{ animation:tag-soft 1.4s calc(var(--d) + .52s) both; }
/* после появления бирка «отпускается» (.settled, site.js), чтобы при наведении могла качнуться */
.motion .steps-sec .step.settled .step-tag{ animation:none; }
/* отзывы: карточки поднимаются по очереди, сердце бьётся один раз */
.motion .rev-track:not(.in) > *{ opacity:0; }
.motion .rev-track.in > *{ animation:lift .8s cubic-bezier(.16,1,.3,1) both; }
.motion .rev-track.in > :nth-child(2){ animation-delay:.08s; } .motion .rev-track.in > :nth-child(3){ animation-delay:.16s; } .motion .rev-track.in > :nth-child(n+4){ animation-delay:.24s; }
.motion .rev-track.in .ring{ animation:beat 1.1s ease .45s both; }
.motion .faq:not(.in) .qa{ opacity:0; }
.motion .faq.in .qa{ animation:lift .7s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(var(--n, 0) * 45ms); }
/* бирки форм повисают на ленте, карточки поднимаются */
.motion .form-tag:not(.in), .motion .c-tag:not(.in){ opacity:0; }
.motion .form-tag.in, .motion .c-tag.in{ transform-origin:50% 0; animation:hang 1.1s cubic-bezier(.16,1,.3,1) both; }
.motion .c-card:not(.in), .motion .requisites:not(.in), .motion .disclaimer:not(.in), .motion .price-card:not(.in){ opacity:0; }
.motion .c-card.in, .motion .requisites.in, .motion .disclaimer.in, .motion .price-card.in{ animation:lift .8s cubic-bezier(.16,1,.3,1) both; }
/* прайс: пунктир строк печатается, как в квитанции */
.motion .price-card.in .price-row .dots{ transform-origin:0 50%; animation:leader .7s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(.2s + var(--i, 0) * 45ms); }

/* переходы между страницами: шапка остаётся на месте, содержимое мягко сменяется */
@view-transition{ navigation:auto; }
.hdr{ view-transition-name:hdr; }
::view-transition-old(root){ animation:vt-out .2s ease both; }
::view-transition-new(root){ animation:vt-in .45s cubic-bezier(.16,1,.3,1) both; }
@keyframes vt-out{ to{ opacity:0; } }
@keyframes vt-in{ from{ opacity:0; transform:translateY(12px); } }
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){ animation:none !important; }
  .tab-ind, .bx i, .bx i::after{ transition:none; }
}

/* ---------- плашки под первым экраном ---------- */
.plaques{ padding:clamp(28px, 4vw, 56px) var(--pad) 0; }
.plaques ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(14px, 2vw, 24px); }
.plaque{ display:flex; gap:18px; align-items:flex-start; padding:26px 26px 24px; border-radius:26px; background:#fff; box-shadow:0 1px 2px rgba(60,35,85,.05), 0 18px 32px -28px rgba(60,35,85,.45); }
.plaque .ring{ width:52px; height:52px; flex:none; display:grid; place-items:center; border-radius:50%; background:var(--mint); color:var(--leaf); }
.plaque b{ display:block; font:400 22px/1.2 var(--display); margin-bottom:6px; }
.plaque p{ margin:0; font-size:15px; color:var(--ink-2); line-height:1.5; }

/* ---------- секции ---------- */
.sec{ padding:clamp(72px, 9vw, 136px) var(--pad); }
.sec-grid{ display:grid; grid-template-columns:minmax(260px, 4fr) 8fr; gap:clamp(28px, 4vw, 72px); align-items:start; }
.sec-side{ position:sticky; top:120px; }
h2.h{ margin:0; font:400 clamp(34px, 3.6vw, 58px)/1.06 var(--display); letter-spacing:-.015em; }
.sec-side p{ margin:18px 0 0; color:var(--ink-2); max-width:34ch; text-wrap:pretty; }
.sec-side .btn{ margin-top:24px; }

/* стопка сложенного белья */
.stack{ list-style:none; margin:0; padding:0; }
.band{ position:relative; border-radius:24px; background-image:var(--weave), linear-gradient(180deg, #FFFFFF, #FAF9FC 70%, #F4F2F8); box-shadow:0 1px 2px rgba(60,35,85,.05), 0 18px 32px -28px rgba(60,35,85,.45); margin-bottom:12px; }
.band:nth-child(even){ background-image:var(--weave), linear-gradient(180deg, #FCFDFD, #F5F8F7 70%, #EEF4F2); }
.band::before{ content:""; position:absolute; left:0; right:0; top:0; height:7px; border-radius:24px 24px 0 0; background:linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,0)); pointer-events:none; }
.band-head{ display:grid; grid-template-columns:44px 1fr auto 28px; align-items:center; gap:18px; width:100%; padding:24px 28px; border:0; background:none; cursor:pointer; text-align:left; }
.band-head .care{ color:var(--ribbon-d); width:34px; height:34px; }
.band-head h3{ margin:0; font:400 clamp(22px, 2vw, 29px)/1.15 var(--display); letter-spacing:-.015em; }
.band-head p{ margin:3px 0 0; font-size:14.5px; color:var(--ink-3); }
.band-price{ font-weight:600; font-size:16px; color:var(--ribbon-ink); white-space:nowrap; }
.band-head .chev{ width:22px; height:22px; color:var(--ink-3); transition:transform .45s cubic-bezier(.16,1,.3,1); }
.band.open .chev{ transform:rotate(180deg); }
.band-head:hover h3{ color:var(--ribbon-ink); }
.band-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s cubic-bezier(.16,1,.3,1); }
.band.open .band-body{ grid-template-rows:1fr; }
.band-body > div{ overflow:hidden; }
.band-inner{ display:grid; grid-template-columns:5fr 6fr; gap:28px; padding:6px 26px 28px 88px; opacity:0; transition:opacity .2s ease; }
.band.open .band-inner{ opacity:1; transition:opacity .5s ease .12s; }
.band-inner img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; align-self:start; border-radius:18px; }
.band-inner h4{ margin:0 0 10px; font-size:12.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--sage-ink); }
.ticks{ list-style:none; margin:0 0 20px; padding:0; display:grid; gap:8px; }
.ticks li{ position:relative; padding-left:26px; font-size:15.5px; line-height:1.45; }
.ticks li::before{ content:""; position:absolute; left:0; top:4px; width:16px; height:16px; border:1.5px solid var(--ribbon); border-radius:5px; }
.ticks li::after{ content:""; position:absolute; left:4px; top:8px; width:8px; height:8px; background:var(--ribbon-d); clip-path:polygon(14% 52%, 38% 76%, 88% 18%, 100% 30%, 38% 100%, 0 64%); }
.band-actions{ display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; }
.link{ border:0; background:none; padding:6px 0; cursor:pointer; font-weight:600; font-size:15px; color:var(--ribbon-ink); text-decoration:underline; text-decoration-color:var(--ribbon-l); text-decoration-thickness:2px; text-underline-offset:.3em; }
.link:hover{ text-decoration-color:var(--ribbon); }

/* этикетка доп. услуг */
.label{ position:relative; margin-top:clamp(48px, 6vw, 88px); padding:34px 44px 32px; border-radius:30px; background:var(--mint); }
.label::before{ content:""; position:absolute; inset:10px; border:1px dashed #B9D2CE; border-radius:22px; pointer-events:none; }
.label-h{ display:flex; align-items:center; gap:14px; margin:0 0 16px; font:400 26px/1.2 var(--display); color:#2F4846; }
.label-h .care{ color:var(--leaf); }
.extras{ list-style:none; margin:0; padding:0; columns:2; column-gap:44px; }
.extras li{ display:flex; align-items:baseline; gap:10px; padding:8px 0; break-inside:avoid; font-size:15.5px; }
.extras li .dots{ flex:1; height:1px; background:repeating-linear-gradient(90deg, #B9D2CE 0 2px, transparent 2px 5px); }
.extras li b{ font-weight:600; color:var(--ribbon-ink); white-space:nowrap; }
.label-note{ position:relative; margin:16px 0 0; font-size:13.5px; color:#3F5A58; }

/* шаги на бельевой верёвке */
.steps-sec{ margin:0 clamp(8px, 1.4vw, 20px); border-radius:clamp(30px, 4vw, 56px); background-image:var(--weave), linear-gradient(180deg, #F3F8F7, #ECF4F1); }
.line-wrap{ position:relative; }
.line-wrap h2{ margin:0 0 48px; }
/* верёвка целиком видна над бирками, бирки висят под ней с зазором: высота заголовка (1.06 от его размера) + отступ 48px + 10px */
.cord{ position:absolute; left:calc(var(--pad) * -1); right:calc(var(--pad) * -1); top:calc(clamp(34px, 3.6vw, 58px) * 1.06 + 58px); height:3px; border-radius:2px; background:var(--twine); box-shadow:0 1px 1.5px rgba(110,80,40,.2); }
.steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(14px, 2vw, 28px); counter-reset:s; }
.step{ --tilt:0deg; --n:0; position:relative; padding-top:20px; transform:rotate(var(--tilt)); transform-origin:50% 0; }
.step:nth-child(2){ --tilt:1.2deg; --n:1; } .step:nth-child(3){ --tilt:-.8deg; --n:2; } .step:nth-child(4){ --tilt:.9deg; --n:3; }
/* прищепка бренда: деревянная, с белым сердечком (рисунок в assets/img/pin-heart.svg); губки держат верёвку и верхний край бирки,
   которая висит в 7px под верёвкой: верёвка видна целиком, без полоски по краю бирки */
.pin{ position:absolute; z-index:2; left:50%; top:-35px; width:42px; height:67px; margin-left:-21px; background:url(../img/pin-heart.svg) center / contain no-repeat; filter:drop-shadow(0 2px 1.5px rgba(60,35,85,.16)); }
.step-tag{ position:relative; background:#fff; padding:32px 24px 24px; border-radius:22px; box-shadow:0 14px 26px -20px rgba(60,35,85,.35); transform-origin:50% -9px; }
@media (hover:hover) and (prefers-reduced-motion:no-preference){ .step:hover .step-tag, .motion .steps-sec .step.settled:hover .step-tag{ animation:sway 1.3s cubic-bezier(.16,1,.3,1); } }
@keyframes sway{ 18%{ transform:rotate(2.6deg); } 42%{ transform:rotate(-1.7deg); } 66%{ transform:rotate(.8deg); } 84%{ transform:rotate(-.3deg); } }
.step b{ display:flex; align-items:baseline; gap:10px; font:400 23px/1.15 var(--display); margin-bottom:8px; }
.step b::before{ counter-increment:s; content:counter(s); font:600 13px/1 var(--text); color:var(--ribbon-d); }
.step p{ margin:0; font-size:15px; color:var(--ink-2); line-height:1.5; }

/* отзывы: лента карточек, листается по одной */
.rev-head{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; margin-bottom:28px; }
.rev-head h2{ margin:0 auto 0 0; }
.rev-ctrl{ display:flex; align-items:center; gap:8px; }
.rev-ctrl[hidden]{ display:none; }
.rev-head .btn[hidden]{ display:none; }
.rev-count{ margin-right:8px; font-size:14px; color:var(--ink-3); font-variant-numeric:lining-nums tabular-nums; white-space:nowrap; }
.rev-count b{ font-weight:600; color:var(--ink); }
.rev-btn{ width:44px; height:44px; display:grid; place-items:center; border:0; border-radius:50%; background:#fff; color:var(--ribbon-ink); cursor:pointer; box-shadow:inset 0 0 0 1.5px #DDD3E6; transition:box-shadow .2s, opacity .2s, transform .2s; }
.rev-btn:hover:not(:disabled){ box-shadow:inset 0 0 0 1.5px var(--ribbon); }
.rev-btn:active:not(:disabled){ transform:translateY(1px); }
.rev-btn:disabled{ opacity:.35; cursor:default; }
.rev-btn .ico{ width:18px; height:18px; }
.rev-btn.prev .ico{ transform:scaleX(-1); }
.rev-track{ position:relative; display:grid; grid-auto-flow:column; grid-auto-columns:min(420px, 84%); gap:18px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-inline:var(--pad); margin:0 calc(var(--pad) * -1); padding:6px var(--pad) 28px; scrollbar-width:none; }
.rev-track::-webkit-scrollbar{ display:none; }
.rev-track:focus-visible{ outline-offset:-4px; }
.rev-track.single{ display:block; overflow:visible; margin:0; padding:0; }
.rev-card{ position:relative; scroll-snap-align:start; display:flex; flex-direction:column; gap:14px; min-height:270px; padding:32px 30px 28px; border-radius:30px; background:#fff; box-shadow:0 1px 2px rgba(60,35,85,.05), 0 24px 40px -32px rgba(60,35,85,.45); }
.rev-card::before{ content:""; position:absolute; inset:10px; border:1px dashed #E3D8EA; border-radius:22px; pointer-events:none; }
.rev-stars{ display:flex; gap:3px; color:var(--ribbon); }
.rev-stars svg{ width:19px; height:19px; fill:currentColor; }
.rev-stars .off{ display:contents; color:#D9CDE2; }
.rev-text{ margin:0; flex:1; font-size:16px; line-height:1.6; color:var(--ink-2); }
.rev-meta b{ display:block; font:400 21px/1.2 var(--display); color:var(--ink); }
.rev-meta span{ display:block; margin-top:3px; font-size:13.5px; color:var(--ink-3); }
.rev-invite{ align-items:flex-start; justify-content:center; background:#F6EEFA; box-shadow:none; }
.rev-invite .ring{ width:56px; height:56px; display:grid; place-items:center; border-radius:50%; background:#fff; color:var(--ribbon-d); }
.rev-invite .ring .care{ width:28px; height:28px; }
.rev-invite b{ display:block; font:400 23px/1.2 var(--display); margin-bottom:6px; }
.rev-invite p{ margin:0; color:var(--ink-2); }

/* отзывы */
.reviews-empty{ position:relative; display:grid; grid-template-columns:auto 1fr auto; gap:24px; align-items:center; padding:32px 36px; border-radius:30px; background:#fff; box-shadow:0 1px 2px rgba(60,35,85,.05), 0 24px 40px -32px rgba(60,35,85,.45); }
.reviews-empty::before{ content:""; position:absolute; inset:10px; border:1px dashed #E3D8EA; border-radius:22px; pointer-events:none; }
.reviews-empty .ring{ width:64px; height:64px; display:grid; place-items:center; border-radius:50%; background:#F6EEFA; color:var(--ribbon-d); }
.reviews-empty .ring .care{ width:32px; height:32px; }
.reviews-empty b{ display:block; font:400 24px/1.2 var(--display); margin-bottom:6px; }
.reviews-empty p{ margin:0; color:var(--ink-2); max-width:56ch; }

/* частые вопросы: одна простыня, вопросы разделены мягкими складками */
.faq-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.sec-side .faq-actions .btn{ margin:0; }
.faq{ position:relative; padding:6px 0; border-radius:30px; background-image:var(--weave), linear-gradient(180deg, #FFFFFF, #FBFAFD 70%, #F7F5FA); box-shadow:0 1px 2px rgba(60,35,85,.05), 0 24px 40px -32px rgba(60,35,85,.45); }
.qa{ position:relative; }
.qa + .qa::before{ content:""; position:absolute; left:28px; right:28px; top:-11px; height:22px; pointer-events:none;
  background:linear-gradient(180deg, transparent, var(--shade-2) 40%, var(--shade) 49%, rgba(255,255,255,.95) 53%, transparent 75%); }
.qa:nth-child(odd) + .qa::before{ background:linear-gradient(180deg, transparent, rgba(180,204,204,.3) 44%, var(--sage) 50%, rgba(255,255,255,.9) 54%, transparent 72%); }
.qa summary{ display:grid; grid-template-columns:1fr 40px; align-items:center; gap:20px; padding:22px 28px; list-style:none; cursor:pointer; border-radius:24px; }
.qa summary::-webkit-details-marker{ display:none; }
.qa summary:focus-visible{ outline-offset:-6px; }
.qa h3{ margin:0; font:400 clamp(19px, 1.55vw, 23px)/1.3 var(--display); letter-spacing:-.01em; text-wrap:balance; transition:color .2s; }
.qa summary:hover h3{ color:var(--ribbon-ink); }
.qa-ico{ width:40px; height:40px; display:grid; place-items:center; border-radius:50%; color:var(--ribbon-ink); box-shadow:inset 0 0 0 1.5px #DDD3E6; transition:transform .45s cubic-bezier(.16,1,.3,1), background-color .2s, box-shadow .2s; }
.qa-ico .ico{ width:18px; height:18px; }
.qa summary:hover .qa-ico{ box-shadow:inset 0 0 0 1.5px var(--ribbon); }
.qa[open] .qa-ico{ transform:rotate(45deg); background:#F6EEFA; box-shadow:none; }
.qa-a{ padding:0 88px 24px 28px; }
.qa-a p{ margin:0; max-width:64ch; color:var(--ink-2); text-wrap:pretty; }
.qa-a p + p{ margin-top:10px; }
.qa-a a{ color:var(--ribbon-ink); }
@media (prefers-reduced-motion:no-preference){ .qa[open] .qa-a{ animation:qa-open .45s cubic-bezier(.16,1,.3,1); } }
@keyframes qa-open{ from{ opacity:0; transform:translateY(-6px); } }

/* подвал и форма */
.foot{ position:relative; background-image:var(--weave), linear-gradient(180deg, #F6F3F9, #EFEBF4); padding:clamp(56px, 7vw, 104px) var(--pad) 28px; }
.foot-grid{ display:grid; grid-template-columns:7fr 5fr; gap:clamp(28px, 5vw, 88px); align-items:start; }
.form-tag{ position:relative; background:#fff; padding:56px clamp(22px, 3vw, 48px) 40px; border-radius:44px 44px 30px 30px; box-shadow:0 30px 50px -36px rgba(60,35,85,.45); }
.form-tag h2{ margin:0 0 10px; font:400 clamp(30px, 3vw, 46px)/1.08 var(--display); letter-spacing:-.01em; }
.form-tag > p{ margin:0 0 26px; color:var(--ink-2); max-width:46ch; }
.form-tag .first-pill{ margin:-10px 0 22px; }
.inline-form{ display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:12.5px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--sage-ink); }
.field input, .field textarea{ width:100%; min-height:50px; padding:12px 2px 10px; border:0; border-bottom:1.5px solid #BDB1C9; background:transparent; font:500 17px/1.3 var(--text); color:var(--ink); border-radius:0; transition:border-color .2s; }
.field textarea{ resize:vertical; min-height:60px; }
.field input::placeholder, .field textarea::placeholder{ color:#71687A; font-weight:400; }
.field input:focus, .field textarea:focus{ outline:none; border-bottom-color:var(--ribbon-d); box-shadow:0 1.5px 0 var(--ribbon-d); }
.field [aria-invalid="true"]{ border-bottom-color:#B2385F; }
.err{ margin:0; font-size:13px; font-weight:500; color:#A62E55; }
.consent{ display:flex; gap:10px; align-items:flex-start; font-size:13.5px; line-height:1.45; color:var(--ink-2); cursor:pointer; }
.consent input{ width:18px; height:18px; margin:1px 0 0; accent-color:var(--ribbon-d); flex:none; }
.consent a{ color:var(--ribbon-ink); }
.inline-form .full{ grid-column:1 / -1; }
.done{ padding:22px 0 0; }
.done b{ display:block; font:400 26px/1.2 var(--display); margin-bottom:6px; }
.done p{ margin:0; color:var(--ink-2); }
/* сбой отправки: над кнопкой, форма с введёнными данными остаётся */
.send-err{ margin:0; padding:12px 16px; border-radius:16px; background:#FBEEF3; color:#A62E55; font-size:14px; line-height:1.5; }
.send-err[hidden]{ display:none; }
.send-err a{ color:inherit; font-weight:600; }
.inline-form .send-err{ grid-column:1 / -1; }
/* ловушка для спам-ботов: поле вне экрана, людям не видно */
.hp{ position:absolute !important; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }
.contacts{ padding-top:12px; display:flex; flex-direction:column; gap:22px; }
.contacts .mark{ width:150px; height:auto; mix-blend-mode:multiply; margin-bottom:2px; }
.big-phone{ font:400 clamp(28px, 2.6vw, 40px)/1.1 var(--display); letter-spacing:-.02em; text-decoration:none; white-space:nowrap; }
.contacts dl, .kv{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:10px 18px; font-size:15.5px; }
.contacts dt, .kv dt{ font-size:12.5px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--sage-ink); padding-top:2px; }
.contacts dd, .kv dd{ margin:0; }
.socials{ display:flex; flex-wrap:wrap; gap:8px; }
.socials a{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 18px; border-radius:999px; text-decoration:none; font-weight:500; font-size:14.5px; background:#fff; box-shadow:inset 0 0 0 1px #DDD3E6; transition:box-shadow .2s, color .2s; }
.socials a:hover{ box-shadow:inset 0 0 0 1.5px var(--ribbon); color:var(--ribbon-ink); }
.socials .ico{ width:18px; height:18px; }
.legal{ display:grid; grid-template-columns:1fr auto; gap:10px 32px; margin-top:56px; padding-top:20px; font-size:13px; color:var(--ink-3); border-top:1px dashed #CFC4DA; }
.legal p{ margin:0; }
.legal .req{ line-height:1.55; }
/* пометка клиентки про оферту (ст. 437 ГК РФ): на всю ширину под реквизитами */
.legal .offer{ grid-column:1 / -1; max-width:110ch; font-size:12.5px; line-height:1.55; color:var(--ink-3); text-wrap:pretty; }
.legal nav{ display:flex; flex-direction:column; gap:6px; align-items:flex-end; }
/* подпись разработчика (согласована с клиенткой): последней строкой, так же скромно, как реквизиты */
.legal .dev{ grid-column:1 / -1; font-size:12.5px; color:var(--ink-3); }

/* окна */
dialog{ border:0; padding:0; width:min(540px, calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow:visible; background:transparent; color:var(--ink); }
dialog::backdrop{ background:rgba(42,30,52,.5); backdrop-filter:blur(3px); }
@media (prefers-reduced-motion:no-preference){ dialog[open]{ animation:pop .5s cubic-bezier(.16,1,.3,1); } }
@keyframes pop{ from{ opacity:0; transform:translateY(-24px) rotate(-1.5deg); } }
.dlg{ position:relative; max-height:calc(100dvh - 24px); overflow:auto; background:#fff; padding:56px 30px 30px; border-radius:40px 40px 30px 30px; box-shadow:0 40px 80px -30px rgba(40,20,60,.5); }
.dlg .grommet{ top:14px; }
.dlg-head{ display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:14px; }
.dlg-head h2{ margin:0; font:400 29px/1.12 var(--display); letter-spacing:-.015em; }
.x{ width:42px; height:42px; display:grid; place-items:center; border:0; border-radius:50%; background:var(--sheet-2); cursor:pointer; flex:none; }
.x:hover{ background:#EADCF2; }
.summary{ padding:12px 0; margin-bottom:16px; border-top:1px dashed #DCD5E4; border-bottom:1px dashed #DCD5E4; font-size:14px; }
.summary[hidden]{ display:none; }
.sum-row{ display:flex; justify-content:space-between; gap:12px; padding:3px 0; color:var(--ink-2); }
.sum-row span:last-child{ white-space:nowrap; }
.sum-total{ display:flex; justify-content:space-between; align-items:baseline; margin-top:6px; }
.sum-total strong{ font:400 27px/1 var(--display); }
.dlg-form{ display:grid; gap:16px; }
.chips{ border:0; margin:0; padding:0; }
.chips legend{ padding:0; margin-bottom:8px; font-size:12.5px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--sage-ink); }
.dlg .btn{ width:100%; min-height:54px; font-size:16px; }
.spin{ width:16px; height:16px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; animation:sp .8s linear infinite; }
@keyframes sp{ to{ transform:rotate(360deg); } }
.dlg-done h2{ margin:0 0 10px; font:400 29px/1.15 var(--display); letter-spacing:-.015em; }
.dlg-done p{ margin:0 0 22px; color:var(--ink-2); }
.dlg-done .care{ color:var(--ribbon-d); width:40px; height:40px; margin-bottom:12px; }
.rate{ display:flex; gap:4px; border:0; padding:0; margin:0; }
.rate legend{ padding:0; margin-bottom:8px; font-size:12.5px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--sage-ink); width:100%; }
.rate label{ cursor:pointer; color:#D9CDE2; transition:color .15s; }
.rate input{ position:absolute; opacity:0; width:1px; height:1px; }
.rate svg{ width:32px; height:32px; fill:currentColor; }
.rate label.lit{ color:var(--ribbon); }
.rate input:focus-visible + svg{ outline:2px solid var(--ribbon-d); outline-offset:2px; border-radius:6px; }

/* ---------- внутренние страницы ---------- */
.page-hero{ position:relative; padding:clamp(48px, 6vw, 96px) var(--pad) clamp(36px, 4vw, 56px); background-image:var(--weave), linear-gradient(180deg, #FFFFFF, #F7F5FA); }
.page-hero .wrap{ display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:24px 48px; align-items:end; }
.page-hero h1{ font-size:clamp(40px, 4.6vw, 72px); line-height:1.12; }
.page-hero p{ margin:16px 0 0; max-width:56ch; color:var(--ink-2); font-size:17px; }
.page-hero .actions{ display:flex; flex-wrap:wrap; gap:12px; }
.price-layout{ display:grid; grid-template-columns:240px minmax(0, 1fr); gap:clamp(28px, 4vw, 64px); align-items:start; }
.toc{ position:sticky; top:112px; display:flex; flex-direction:column; gap:2px; padding:0; margin:0; list-style:none; }
.toc a{ display:block; padding:9px 14px; border-radius:12px; text-decoration:none; font-weight:500; font-size:15px; color:var(--ink-2); transition:background .2s, color .2s; }
.toc a:hover{ background:#fff; color:var(--ribbon-ink); }
.price-cards{ display:grid; gap:22px; }
.price-card{ position:relative; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.25fr); gap:28px; padding:30px 32px; border-radius:30px; background:#fff; box-shadow:0 1px 2px rgba(60,35,85,.05), 0 24px 40px -34px rgba(60,35,85,.45); scroll-margin-top:110px; }
.price-card.mint{ background:var(--mint); }
.price-card h2{ display:flex; align-items:center; gap:12px; margin:0 0 10px; font:400 clamp(26px, 2.4vw, 34px)/1.12 var(--display); letter-spacing:-.015em; }
.price-card h2 .care{ color:var(--ribbon-d); }
.price-card .desc{ margin:0; color:var(--ink-2); font-size:15.5px; }
.price-card img{ margin-top:18px; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:18px; }
.price-list{ list-style:none; margin:0; padding:0; align-self:start; }
.price-row{ display:flex; align-items:baseline; gap:10px; padding:9px 0; border-bottom:1px solid #F0EBF4; font-size:15.5px; }
.price-row:last-child{ border-bottom:0; }
.price-row .dots{ flex:1; min-width:16px; height:1px; background:repeating-linear-gradient(90deg, #D5CCDE 0 2px, transparent 2px 5px); }
.price-row b{ font-weight:600; color:var(--ribbon-ink); white-space:nowrap; }
.price-row.sub{ color:var(--ink-2); font-size:14.5px; }
.price-foot{ margin:14px 0 0; font-size:13.5px; color:var(--ink-3); }
.disclaimer{ margin:clamp(28px, 3vw, 40px) 0 0; padding:22px 26px; border-radius:22px; background:#F6EEFA; color:var(--ribbon-ink); font-size:15.5px; }
.contact-layout{ display:grid; grid-template-columns:5fr 7fr; gap:clamp(22px, 3vw, 40px); align-items:start; }
.side-stack{ display:grid; gap:22px; }
.c-tag{ position:relative; padding:56px 30px 28px; border-radius:44px 44px 30px 30px; background:#fff; box-shadow:0 30px 50px -36px rgba(60,35,85,.45); }
.c-tag .price-row{ font-size:16px; }
.c-tag .price-row b{ font-size:17px; }
.c-tag .price-row a{ text-decoration:none; }
.c-tag .price-row a:hover{ text-decoration:underline; }
.c-h{ margin:0 0 14px; font:400 clamp(26px, 2.2vw, 32px)/1.15 var(--display); letter-spacing:-.01em; }
.c-card{ padding:28px 28px 26px; border-radius:28px; background:#fff; box-shadow:0 1px 2px rgba(60,35,85,.05), 0 24px 40px -34px rgba(60,35,85,.45); }
.c-card p{ margin:10px 0 0; color:var(--ink-2); font-size:15px; }
.requisites{ margin-top:22px; padding:28px 30px; border-radius:28px; background:var(--mint); }
.requisites h2{ margin:0 0 14px; font:400 26px/1.2 var(--display); color:#2F4846; }
.doc{ max-width:760px; }
.doc h2{ margin:36px 0 10px; font:400 26px/1.2 var(--display); }
.doc p, .doc li{ color:var(--ink-2); font-size:16px; }
.doc .muted{ font-size:14px; color:var(--ink-3); }

/* страницы услуг: первый экран с фото, «что входит» и прайс рядом, другие услуги */
.svc-hero{ position:relative; padding:clamp(24px, 3vw, 40px) var(--pad) clamp(40px, 5vw, 72px); background-image:var(--weave), linear-gradient(180deg, #FFFFFF, #F7F5FA); }
.svc-hero-in{ display:grid; grid-template-columns:minmax(0, 1.08fr) minmax(0, 1fr); gap:clamp(28px, 4.5vw, 80px); align-items:center; }
.crumbs{ display:flex; flex-wrap:wrap; margin-bottom:clamp(22px, 3vw, 40px); font-size:13.5px; color:var(--ink-3); }
.crumbs a{ color:var(--ink-2); text-decoration:none; }
.crumbs a:hover{ color:var(--ribbon-ink); text-decoration:underline; }
.crumbs > :not(:first-child)::before{ content:"/"; margin:0 10px; color:#C9BFD3; }
.svc-hero h1{ font-size:clamp(38px, 4vw, 64px); line-height:1.12; }
.svc-lead{ margin:20px 0 0; max-width:54ch; color:var(--ink-2); font-size:17px; text-wrap:pretty; }
.svc-lead a{ color:var(--ribbon-ink); }
.svc-price{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; margin:28px 0 0; }
.svc-price-l{ width:100%; font-size:12.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--sage-ink); }
.svc-price b{ font:400 clamp(34px, 3vw, 44px)/1.05 var(--display); color:var(--ribbon-ink); font-variant-numeric:lining-nums tabular-nums; }
.svc-price-n{ font-size:15px; color:var(--ink-3); }
.svc-hero .actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
/* страница 404: бирка «404» на джутовой верёвке с фирменной прищепкой, как в «Как проходит заказ»;
   бирка висит в 7px под верёвкой (верёвка на 10px ниже верха .step, бирка начинается после его отступа 20px) */
.nf-line{ position:relative; padding:40px 0 12px; }
.nf-line::before{ content:""; position:absolute; left:0; right:0; top:50px; height:3px; border-radius:2px; background:var(--twine); box-shadow:0 1px 1.5px rgba(110,80,40,.2); }
.nf-step{ --tilt:-2deg; width:min(300px, 100%); margin:0 auto; }
.nf-step .step-tag{ padding:40px 28px 30px; text-align:center; }
.nf-step b{ justify-content:center; margin-bottom:10px; font-size:clamp(64px, 7vw, 96px); line-height:1; color:var(--ribbon-ink); font-variant-numeric:lining-nums tabular-nums; }
.nf-step b::before{ content:none; }
.svc-hero .first-pill{ margin-top:18px; }
.svc-photo{ margin:0; }
.svc-photo img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:30px; box-shadow:0 30px 50px -36px rgba(60,35,85,.55); }
.svc-main{ padding-top:clamp(40px, 5vw, 72px); }
.svc-cols{ display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; }
.svc-card{ padding:30px 32px; border-radius:30px; background:#fff; box-shadow:0 1px 2px rgba(60,35,85,.05), 0 24px 40px -34px rgba(60,35,85,.45); scroll-margin-top:110px; }
.svc-card h2{ display:flex; align-items:center; gap:12px; margin:0 0 18px; font:400 clamp(24px, 2.1vw, 30px)/1.15 var(--display); letter-spacing:-.015em; text-wrap:balance; }
.svc-card h2 .care{ color:var(--ribbon-d); }
.svc-card .ticks{ margin:0; }
.svc-side{ position:sticky; top:110px; }
.svc-side .disclaimer{ margin-top:22px; }
.svc-card .band-actions{ margin-top:20px; }
.svc-note{ margin:22px 0 0; padding:16px 18px; border-radius:18px; background:var(--mint); color:#3F5A58; font-size:15px; }
.svc-note a{ color:#2F4846; font-weight:600; }
.svc-sub{ margin:22px 0 4px; font-size:12.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--sage-ink); }
.svc-text{ margin:0; color:var(--ink-2); }
.svc-more-sec{ padding-top:clamp(24px, 3vw, 48px); }
.svc-more{ list-style:none; margin:32px 0 0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; }
.svc-more li{ display:flex; }
.svc-more .svc-link{ flex:1; }
.svc-link{ display:grid; grid-template-columns:34px 1fr 22px; align-items:center; gap:14px; padding:20px 22px; border-radius:24px; background:#fff; text-decoration:none; box-shadow:0 1px 2px rgba(60,35,85,.05), 0 18px 32px -28px rgba(60,35,85,.45); transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s; }
.svc-link .care{ color:var(--ribbon-d); }
.svc-link b{ display:block; font:400 21px/1.2 var(--display); font-variant-numeric:normal; }
.svc-link small{ display:block; margin-top:3px; font-size:14.5px; font-weight:600; color:var(--ribbon-ink); }
.svc-link .ico{ color:var(--ink-3); transition:transform .25s cubic-bezier(.16,1,.3,1), color .2s; }
.svc-link:hover{ transform:translateY(-2px); box-shadow:0 1px 2px rgba(60,35,85,.05), 0 22px 34px -26px rgba(60,35,85,.5); }
.svc-link:hover b{ color:var(--ribbon-ink); }
.svc-link:hover .ico{ transform:translateX(3px); color:var(--ribbon-ink); }
.svc-more-foot{ margin:22px 0 0; }
.motion .svc-card:not(.in), .motion .svc-more:not(.in) li{ opacity:0; }
.motion .svc-card.in{ animation:lift .8s cubic-bezier(.16,1,.3,1) both; }
.motion .svc-card.in + .svc-card.in{ animation-delay:.08s; }
.motion .svc-more.in li{ animation:lift .7s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(var(--n, 0) * 50ms); }

@media (min-width:861px) and (max-height:820px){
  .p3-in{ --tagtop:22px; }
  .tag{ padding-top:42px; }
  .tag-head h2{ font-size:25px; }
  .line{ padding:6px 0; }
  .boxes.col{ gap:4px; }
  .tape-nums{ display:none; }
  .steppers{ gap:2px; }
  .pg-nav{ min-height:42px; }
  .coupon{ padding-top:24px; }
}
@media (pointer:coarse){
  .boxes.col{ gap:2px; }
  .boxes.col .bx{ min-height:26px; }
  .stp button{ width:34px; height:34px; }
}

/* ---------- адаптив ---------- */
@media (max-width:1180px){
  .svc-more{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .nav{ gap:18px; }
  .nav a.opt{ display:none; }
  .p1-in{ padding-top:40px; padding-bottom:32px; }
  .lead{ max-width:62ch; }
  .crease-v.c1{ display:none; }
  .band-inner{ padding-left:26px; }
  .price-layout{ grid-template-columns:1fr; }
  .toc{ position:static; flex-direction:row; flex-wrap:wrap; gap:6px; }
  .toc a{ background:#fff; }
}
/* планшет в ландшафте и узкий ноутбук: текст и фото слева, бирка справа во всю высоту листа,
   поэтому итог и «Оформить заявку» видны на первом экране */
@media (min-width:861px) and (max-width:1180px){
  .hero{ grid-template-columns:minmax(0, 1fr) minmax(0, 470px); grid-template-rows:auto 1fr; }
  .p1{ grid-column:1; grid-row:1; }
  .p2{ grid-column:1; grid-row:2; min-height:300px; }
  .p2 picture{ position:absolute; inset:0; } /* фото заполняет место под текстом и не задаёт высоту листа */
  .p2 img{ object-position:50% 20%; } /* здесь кадр по плечи (hero-owner-m.webp): область под текстом широкая и низкая */
  .p3{ grid-column:2; grid-row:1 / span 2; }
  .crease-v.c2{ left:calc(100% - 470px) !important; }
}
/* планшет в ландшафте (861–1080px): разделы уходят в меню, как на телефоне, иначе шапка не помещается */
@media (min-width:861px) and (max-width:1080px){
  .nav{ display:none; }
  .menu-btn{ display:grid; place-items:center; width:44px; height:44px; border:0; background:none; cursor:pointer; color:var(--ribbon-ink); }
  .phone-btn{ margin-left:auto; }
  .nav.open{ display:flex; position:absolute; top:80px; left:0; right:0; flex-direction:column; gap:0; padding:8px 0 14px; background:var(--sheet); background-image:var(--weave); box-shadow:0 20px 30px -20px rgba(60,35,85,.4); }
  .nav.open a, .nav.open a.opt{ display:block; padding:14px var(--pad); font-size:17px; }
  .nav.open a::after{ display:none; }
}
/* планшеты: заголовок секции над содержимым, пояснение и кнопки в одну строку под ним */
@media (min-width:700px) and (max-width:1180px){
  .sec-grid{ grid-template-columns:1fr; gap:34px; }
  .sec-side{ position:static; display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:end; column-gap:40px; }
  .sec-side .h{ grid-column:1 / -1; }
  .sec-side p{ max-width:58ch; }
  .sec-side .btn, .sec-side .faq-actions{ margin-top:18px; }
}
/* шапка до 1365px: «Как работаем» уходит из шапки (раздел есть на главной), меню плотнее */
@media (max-width:1365px){
  .nav a.opt{ display:none; }
  .nav{ gap:20px; }
}
@media (max-width:1180px){
  /* номер прячется в иконку, MAX и ВКонтакте стоят рядом с ней */
  .hdr-phone{ display:none; }
  .phone-btn{ display:grid; place-items:center; width:44px; height:44px; order:1; color:var(--ribbon-ink); text-decoration:none; }
  .hdr-max{ order:2; }
  .hdr .btn{ order:3; }
  .menu-btn{ order:4; }
}
@media (max-width:860px){
  .hdr-in{ height:68px; gap:14px; }
  .logo img{ height:34px; }
  .nav, .hdr-phone, .hdr .btn{ display:none; }
  .phone-btn, .menu-btn{ display:grid; place-items:center; width:44px; height:44px; border:0; background:none; cursor:pointer; color:var(--ribbon-ink); text-decoration:none; }
  .hdr-max{ margin-left:auto; width:44px; height:44px; }
  .phone-btn{ order:3; }
  .hdr-max .max-logo{ width:28px; height:28px; }
  .hdr-vk{ margin-left:-14px; }
  .hdr-vk .vk-logo{ width:28px; height:28px; }
  .nav.open{ display:flex; position:absolute; top:68px; left:0; right:0; flex-direction:column; gap:0; padding:8px 0 14px; background:var(--sheet); background-image:var(--weave); box-shadow:0 20px 30px -20px rgba(60,35,85,.4); }
  .nav.open a{ padding:14px var(--pad); font-size:17px; display:block; }
  .nav.open a::after{ display:none; }
  html{ scroll-padding-top:76px; }
  /* телефон: заголовок, подзаголовок, лицо владелицы, бирка поверх нижней части фото, потом текст */
  .hero{ grid-template-columns:1fr; }
  .p1, .p1-in{ display:contents; }
  .hero h1{ order:1; padding:22px var(--pad) 0; font-size:clamp(34px, 9.6vw, 46px); }
  .hero .tagline{ order:2; margin:0; padding:8px var(--pad) 18px; max-width:none; font-size:19px; }
  .p2{ order:3; height:330px; min-height:0; margin:0 12px; border-radius:30px; }
  .p2::after{ display:none; }
  .p2 img{ object-position:50% 40%; }
  .p3{ order:4; z-index:5; margin-top:-130px; background:none; }
  .hero .lead{ order:5; margin:0; padding:6px var(--pad) 26px; max-width:none; }
  /* ручка: прорезь бирки, за которую её тянут вверх */
  .grommet.slot{ display:none; }
  .pull{ display:grid; place-items:center; position:absolute; z-index:7; left:50%; top:0; width:150px; height:46px; margin-left:-75px; border:0; padding:0; background:none; cursor:pointer; }
  .pull-bar{ width:40px; height:12px; border-radius:6px; box-shadow:inset 0 0 0 1.5px #CFC4DA, inset 0 2px 3px rgba(60,30,80,.18); transition:box-shadow .2s, width .25s cubic-bezier(.16,1,.3,1); }
  .pull:active .pull-bar, .tag-wrap.peek .pull-bar{ width:48px; box-shadow:inset 0 0 0 1.5px var(--ribbon), inset 0 2px 3px rgba(60,30,80,.18); }
  /* на телефоне бирка ниже, чтобы целиком помещалась в экран, когда её развернули */
  .tag{ padding:40px 18px 16px; }
  .tag-head{ margin-bottom:8px; }
  .tag-head h2{ font-size:25px; }
  .line{ padding:6px 0; }
  .tape-nums{ display:none; }
  .pg-nav{ min-height:48px; padding:2px 0; }
  .sum{ font-size:36px; }
  .coupon{ margin:20px -18px -16px; padding:24px 18px 14px; }
  .fine{ font-size:12px; }
  .crease-v{ display:none; }
  .p3-in{ --tagtop:26px; --notch-l:var(--sheet); --notch-r:var(--sheet); padding:var(--tagtop) 12px 18px; }
  .tag-wrap{ filter:drop-shadow(0 -4px 14px rgba(60,35,85,.12)) drop-shadow(0 28px 36px rgba(60,35,85,.13)) drop-shadow(0 2px 4px rgba(60,35,85,.08)); }

  .tabs{ margin-left:-4px; margin-right:-4px; }
  /* на телефоне лента не тянется через лицо на фото: остаётся только прорезь бирки */
  .ribbon{ display:none; }
  .plaques ul{ grid-template-columns:1fr; }
  .sec-grid, .foot-grid{ grid-template-columns:1fr; }
  .sec-side{ position:static; }
  .band-head{ grid-template-columns:34px 1fr 24px; gap:12px; padding:18px 16px; }
  .band-head .care{ width:30px; height:30px; }
  .band-price{ grid-column:2; grid-row:2; font-size:15px; }
  .band-head .chev{ grid-column:3; grid-row:1 / span 2; }
  .band-inner{ grid-template-columns:1fr; padding:0 16px 22px; }
  .label{ padding:24px 22px; }
  .extras{ columns:1; }
  .steps{ grid-template-columns:1fr 1fr; row-gap:52px; }
  .cord{ display:none; }
  .step{ --tilt:0deg !important; }
  .reviews-empty{ grid-template-columns:1fr; padding:28px 24px; }
  .qa summary{ grid-template-columns:1fr 36px; gap:14px; padding:18px 18px; }
  .qa-ico{ width:36px; height:36px; }
  .qa-a{ padding:0 18px 20px; }
  .qa + .qa::before{ left:16px; right:16px; }
  .inline-form{ grid-template-columns:1fr; }
  .legal{ grid-template-columns:1fr; }
  .legal nav{ align-items:flex-start; }
  .page-hero .wrap{ grid-template-columns:1fr; }
  .price-card{ grid-template-columns:1fr; padding:24px 22px; }
  .contact-layout{ grid-template-columns:1fr; }
  .svc-hero-in, .svc-cols{ grid-template-columns:1fr; }
  .svc-side{ position:static; }
  .svc-more{ grid-template-columns:1fr; }
  .svc-card{ padding:24px 22px; }
  .svc-photo img{ border-radius:24px; }
}
/* телефон и планшет в портрете: длинной верёвки нет, у каждой бирки свой отрезок до края полосы
   (в две колонки отрезки сходятся посередине промежутка); качается только бирка, верёвка и прищепка на месте */
@media (max-width:860px){
  .steps{ --col-gap:clamp(14px, 2vw, 28px); column-gap:var(--col-gap); }
  .step::before{ content:""; position:absolute; z-index:-1; top:10px; height:3px; left:calc(var(--pad) * -1); right:calc(var(--col-gap) / -2); border-radius:2px; background:var(--twine); box-shadow:0 1px 1.5px rgba(110,80,40,.2); transform-origin:0 50%; }
  .step:nth-child(even)::before{ left:calc(var(--col-gap) / -2); right:calc(var(--pad) * -1); }
  /* бирки появляются по одной, по мере прокрутки (в две колонки пара со сдвигом 0.12 с), у каждой свой отрезок верёвки */
  .step{ --d:0s; }
  .step:nth-child(even){ --d:.12s; }
  .motion .steps-sec .step:not(.in)::before{ transform:scaleX(0); }
  .motion .steps-sec .step.in::before{ animation:rope-in 1s cubic-bezier(.65,0,.35,1) var(--d) both; }
}
@keyframes rope-in{ from{ transform:scaleX(0); } }
@keyframes pin-soft{ from{ opacity:0; transform:translateY(-8px); } }
@keyframes tag-soft{
  0%{ opacity:0; transform:translateY(-10px) rotate(-1.6deg); animation-timing-function:cubic-bezier(.33,1,.68,1); }
  45%{ opacity:1; transform:translateY(0) rotate(.9deg); animation-timing-function:cubic-bezier(.37,0,.63,1); }
  75%{ transform:rotate(-.35deg); animation-timing-function:cubic-bezier(.37,0,.63,1); }
  100%{ transform:none; }
}
@media (max-width:480px){
  .step::before, .step:nth-child(even)::before{ left:calc(var(--pad) * -1); right:calc(var(--pad) * -1); }
  .step:nth-child(even){ --d:0s; } /* в одну колонку бирки появляются по одной, сдвиг для пары не нужен */
}
/* телефон: бирка-калькулятор выезжает снизу, как шторка, поверх нижнего края фото */
@media (max-width:699px){
  .motion.loaded .p3 .tag-wrap{ animation:tag-up 1s cubic-bezier(.16,1,.3,1) .3s both; }
}
@keyframes tag-up{ from{ opacity:0; transform:translateY(90px); } }
/* планшет в портрете: заголовок во всю ширину, слева фото владелицы с лавандой и абзац,
   справа бирка целиком на первом экране, без ручки; остальные блоки снова в две колонки */
@media (min-width:700px) and (max-width:860px){
  .hdr .btn{ display:inline-flex; order:4; min-height:44px; padding:0 18px; }
  .menu-btn{ order:5; }
  .hero{ grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); grid-template-rows:auto auto auto 1fr; column-gap:18px; min-height:0; padding:0 var(--pad); align-items:start; }
  .hero h1{ grid-column:1 / -1; grid-row:1; padding:30px 0 0; font-size:clamp(42px, 6vw, 50px); }
  .hero .tagline{ grid-column:1 / -1; grid-row:2; padding:10px 0 26px; font-size:21px; }
  .p2{ grid-column:1; grid-row:3; height:auto; aspect-ratio:4 / 5; margin:0; }
  .p2 img{ object-position:44% 30%; }
  .p3{ grid-column:2; grid-row:3 / span 2; margin-top:0; }
  .p3-in{ --tagtop:0px; padding:0 0 26px; }
  .hero .lead{ grid-column:1; grid-row:4; padding:22px 0 26px; font-size:15px; }
  .grommet.slot{ display:block; }
  .pull{ display:none; }
  .tag-wrap{ filter:drop-shadow(0 28px 36px rgba(60,35,85,.13)) drop-shadow(0 2px 4px rgba(60,35,85,.08)); }

  .plaques ul{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .plaque{ flex-direction:column; gap:14px; padding:22px 20px 20px; }
  .band-head{ grid-template-columns:44px 1fr auto 28px; gap:16px; padding:22px 24px; }
  .band-head .care{ width:34px; height:34px; }
  .band-price{ grid-column:auto; grid-row:auto; font-size:16px; }
  .band-head .chev{ grid-column:auto; grid-row:auto; }
  .band-inner{ grid-template-columns:5fr 6fr; padding:4px 24px 26px; }
  .label{ padding:30px 32px 28px; }
  .extras{ columns:2; column-gap:32px; }
  .reviews-empty{ grid-template-columns:auto 1fr auto; padding:30px 32px; }
  .inline-form{ grid-template-columns:1fr 1fr; }
  .legal{ grid-template-columns:1fr auto; }
  .legal nav{ align-items:flex-end; }
  .price-card{ grid-template-columns:minmax(0, 1fr) minmax(0, 1.25fr); padding:26px; }
  .svc-hero-in{ grid-template-columns:minmax(0, 1.25fr) minmax(0, .75fr); gap:28px; align-items:start; }
  .svc-photo img{ aspect-ratio:1; }
  .svc-more{ grid-template-columns:1fr 1fr; }
}
@media (max-width:480px){
  .price-row b{ white-space:normal; text-align:right; max-width:55%; }
  .c-tag .price-row b{ white-space:nowrap; max-width:none; }
  .steps{ grid-template-columns:1fr; }
  .dlg{ padding:52px 18px 22px; }
}
/* шапка телефона: логотип и четыре кнопки по 44px (MAX, ВКонтакте, звонок, меню) вплотную; на самых узких экранах логотип меньше, но без искажения */
@media (max-width:480px){
  .hdr-in{ gap:0; }
  .hdr-vk{ margin-left:0; }
}
@media (max-width:374px){ .logo img{ height:30px; } }
@media (max-width:340px){ .logo img{ height:28px; } .hdr-max, .phone-btn, .menu-btn{ width:38px; } }