/* Landing layer: only what the landing adds to the shared public system in site.css.

   The page is composed from the layout library, one family per section:
     HEADER-08  nav, phone, language toggle
     HERO-15    one photo, title and action in page-colour cut-outs
     GALLERY-10 the week as a swipeable row with a wave of heights
     SERVICES-10 комплекс и цена, rows with fixed column starts
     STEPS-04   vertical stepper beside a photo, the step swaps the frame
     FAQ-09     always-open blocks with side labels (server-rendered SEO block)
     FOOTER-03  dark contact card, phone is the largest type on the page
     FOOTER-04  18 districts as inline wrapping links

   Contract pins live here on purpose — `tests/test_landing_contract.py` and
   `tests/test_seo_contract.py` read this file, so the header staying visible, the mobile action
   stack, the WhatsApp word mark and the SEO block styles must not move to another sheet.

   The landing loads site.css + landing.css and NOT the cabinet sheet app.css, so the login
   dialog — the only door to an order — is styled here.

   Numbers carry their reason on the line above them. Do not add a value without a reason. */

/* ---------- palette and scale, scoped to the landing ---------- */
/* the public site keeps one green ground; the landing carries the warmer grey of the redesign and
   the same brand green, so every token site.css reads is re-pointed here, not edited there */
.landing-app{
 --canvas:#E9EAE5;
 --surface:#FFFFFF;
 --ink:#1D1D1B;            /* 15.6:1 on canvas */
 --muted:#585D56;          /* 6.6:1 on canvas — secondary text stays body-legible */
 --line:#CDD1C8;
 --line-strong:#B4BAB0;
 --accent:#267A40;         /* brand green; white on it 5.3:1 */
 --accent-ink:#1F6634;     /* same hue one rung darker: 6.9:1 on canvas */
 --accent-soft:#E3EDE2;
 --dark:#1D1D1B;
 --on-dark:#F3F3EF;
 --on-dark-muted:#B7BBB2;
 --dark-accent:#9FD3AE;
 /* ratio 1.30, six steps: 14 18 23 30 44 64 */
 --t1:17px; --t2:20px; --t3:23px; --t4:30px; --t5:44px; --t6:64px;
 --display:clamp(44px,6vw,64px);
 /* ratio 1.4: 6 10 16 24 36 56 80 112 */
 --s1:6px; --s2:10px; --s3:16px; --s4:24px; --s5:36px; --s6:56px; --s7:80px; --s8:112px;
 --r:4px; --r-s:2px;
 --col:1240px;
 --gut:clamp(16px,4vw,40px);
 --header-h:72px;
 background:var(--canvas);color:var(--ink);
 font-size:var(--t1);line-height:1.6;
}
.landing-app h1{font-size:var(--display);line-height:.98;letter-spacing:-.03em}
.landing-app h2{font-size:clamp(30px,3.6vw,44px);line-height:1.1}
.landing-app .small{font-size:14px;color:var(--muted)}

/* ---------- HEADER-08: one row, phone in mono, two-state language toggle ---------- */
/* the header stays visible while the landing scrolls; the shared .site-header supplies the rest */
.landing-header{position:sticky;top:0;z-index:50;min-height:0;background:rgba(233,234,229,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.landing-header .site-header__in{min-height:var(--header-h);gap:var(--s4)}
.landing-header .brand{flex:none;gap:10px}
.landing-header .brand img{width:28px;height:28px;flex:none}
.landing-header .brand span{font-size:14px;white-space:nowrap;letter-spacing:-.01em}
.landing-header .site-nav{gap:var(--s4);flex-wrap:nowrap}
.landing-header .site-nav__links{gap:var(--s4)}
.landing-header .site-nav__links a{font-size:14px;border-bottom-width:0}
.landing-header .site-nav__actions{gap:var(--s3);flex-wrap:nowrap}
/* the phone is a figure, so it is set in the mono face and never wraps */
.landing-header .site-nav__phone{font:500 13px/1 var(--ff-mono);letter-spacing:-.01em}
.landing-header .btn--ghost{min-height:40px;padding:0 var(--s4);font-size:14px}

/* ---------- HERO-15 ---------- */
/* one large card, 93% of the column, 2.4:1 on desktop; the title and the actions sit in blocks of
   the page colour that bite into the photo, so no type lies on the dish itself */
.landing-hero{display:block;min-height:0;padding:var(--s3) 0 0}
.hero-card{position:relative;aspect-ratio:2.4/1;border-radius:var(--r);overflow:hidden;background:var(--surface)}
.hero-card__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.hero-card__tab{position:absolute;top:0;left:0;max-width:min(34rem,54%);padding:var(--s4) var(--s5) var(--s4) 0;background:var(--canvas);border-bottom-right-radius:var(--r)}
.hero-card__kicker{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.hero-card__tab h1{margin-top:var(--s1);max-width:12ch;text-wrap:balance}
.hero-card__meta{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);margin-top:var(--s3);font-size:13px;letter-spacing:.02em;color:var(--ink)}
.hero-card__meta>span+span{color:var(--muted)}
.hero-card__notch{position:absolute;right:0;bottom:0;display:flex;justify-content:flex-end;padding:var(--s4) 0 0 var(--s4);background:var(--canvas);border-top-left-radius:var(--r)}
.landing-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.landing-actions .btn{min-height:52px;max-width:100%}
.btn--outline{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 var(--s5);border:1px solid var(--ink);border-radius:var(--r);background:var(--canvas);color:var(--ink);font:600 15px/1.2 var(--ff-text);text-decoration:none;cursor:pointer}
.btn--outline:hover{background:var(--ink);color:var(--on-dark)}

/* one action pair on one 52 px baseline: the WhatsApp door is the only filled green on the page,
   the employee door is an outline button. The official word mark keeps #075e54 on a light ground
   (6.5:1) and turns white on the filled green (5.3:1). */
.whatsapp-word{color:#075e54;font-weight:700}
.whatsapp-cta{display:inline-flex;align-items:center;gap:10px;padding:0 var(--s4);border:1px solid var(--accent);border-radius:var(--r);background:var(--accent);color:#fff;font:600 15px/1.2 var(--ff-text);text-decoration:none}
.whatsapp-cta:hover{background:#1F6535;border-color:#1F6535;color:#fff}
.whatsapp-cta .whatsapp-word{color:#fff}
.whatsapp-cta .glyph--wa{width:22px;height:22px;flex:none}

/* ---------- TRUST: three facts on one line, no logos ---------- */
/* the strip answers the three questions a manager asks before the week — how much, when, how we
   pay — in the mono face so figures and dashes keep one rhythm; the caption stays quiet below and
   the strip turns into a short column on a phone instead of a squeezed single row */
.trust{padding:0}
.trust__in{display:block;padding-top:var(--s4);padding-bottom:var(--s4);border-bottom:1px solid var(--line)}
/* three fixed column starts, the same grid logic as the price rows, so the strip reads as a table
   of terms instead of three sentences huddled on the left */
.trust__facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px var(--s5);margin:0;padding:0;list-style:none}
.trust__facts li{font-size:13px;color:var(--ink);letter-spacing:.01em;line-height:1.4}
.trust__caption{margin:var(--s2) 0 0;font-size:12px;line-height:1.5;color:var(--muted)}
.trust + .gallery{padding-top:var(--s6)}
@media(max-width:900px){
 .trust__facts{grid-template-columns:1fr;gap:6px}
}

/* ---------- GALLERY-10 ---------- */
/* headline split across the width, then five portrait frames whose heights rise and fall; the row
   scrolls sideways under the thumb or the arrows and never pins the page */
.gallery{padding-top:var(--s7)}
.gallery__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:var(--s3) var(--s6);align-items:end;padding-top:var(--s4);border-top:1px solid var(--ink)}
.gallery__lead{color:var(--muted);font-size:15px;max-width:46ch}
.gallery__row{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(170px,17.5vw,216px);gap:var(--s3);align-items:start;padding:var(--s5) 0 var(--s3);overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none}
.gallery__row::-webkit-scrollbar{display:none}
/* every card is one 4:5 frame, so the row reads as a filmstrip instead of a ragged pile: the
   photo crops with object-fit, and the caption below is just the weekday — there are no dish
   names in the data for these frames and inventing them would be a lie */
.week-card{display:grid;grid-template-rows:auto auto;gap:var(--s2);margin:0;scroll-snap-align:start}
.week-card a{display:block;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:var(--surface)}
.week-card img{display:block;width:100%;height:100%;object-fit:cover}
.week-card figcaption{display:flex;align-items:baseline;gap:8px;font-size:13px;color:var(--muted)}
.week-card figcaption .fig{font-size:13px;color:var(--ink)}
.gallery__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;padding-top:var(--s3);border-top:1px solid var(--line)}
.gallery__controls{display:flex;align-items:center;gap:var(--s2)}
.gallery__controls button{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line-strong);border-radius:var(--r);background:transparent;color:var(--ink);font:400 16px/1 var(--ff-text);cursor:pointer;transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease)}
.gallery__controls button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.gallery__controls button:hover{border-color:var(--ink);background:var(--ink);color:var(--on-dark)}
.gallery__controls button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gallery__counter{font-size:13px;color:var(--muted);letter-spacing:.06em}
.gallery__link{font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:2px}
.gallery__link:hover{color:var(--accent-ink);border-color:var(--accent-ink)}

/* ---------- SERVICES-10 ---------- */
/* title on the left, price card on the right, then full-width outlined rows whose price and note
   columns start at the same two lines on every row, like a table */
.price{padding-top:var(--s7)}
.price__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,320px);gap:var(--s5) var(--s7);align-items:start;padding-top:var(--s4);border-top:1px solid var(--ink)}
.price h2 span{display:block}
.price__card{display:grid;gap:2px;padding:var(--s4);border:1px solid var(--ink);border-radius:var(--r);background:var(--surface)}
.price__label{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.price__value{font-size:clamp(26px,2.6vw,34px);line-height:1.1;letter-spacing:-.02em}
.price__note{font-size:13px;color:var(--muted)}
/* the fixed price is the offer; the full-lunch line shows the top of the range without a second
   card, so the reader sees 18 and 24 in one block */
.price__total{display:block;margin-top:var(--s2);padding-top:var(--s2);border-top:1px solid var(--line);font-size:13px;color:var(--ink);letter-spacing:.01em}
.price__rows{margin:var(--s6) 0 0;border-top:1px solid var(--line)}
.price__row{display:grid;grid-template-columns:minmax(0,1fr) 11rem minmax(0,26%);gap:var(--s3) var(--s5);align-items:baseline;padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.price__row dt{font-size:clamp(20px,2.1vw,26px);font-weight:600;letter-spacing:-.02em}
.price__row dd{margin:0;font-size:15px;color:var(--muted);line-height:1.5}
.price__row dd.fig{color:var(--ink);font-size:14px;letter-spacing:.02em}
.price__foot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s5) var(--s6);align-items:center;padding-top:var(--s5)}
.price__extras{color:var(--muted);font-size:15px;max-width:40ch}
.price__veg{display:grid;grid-template-columns:120px minmax(0,1fr);gap:var(--s4);align-items:center;margin:0}
.price__veg img{width:120px;height:120px;object-fit:cover;border-radius:var(--r)}
.price__veg figcaption{font-size:14px;color:var(--muted);line-height:1.5}

/* ---------- STEPS-04 ---------- */
/* headline left, a fact card right, then a vertical stepper beside one landscape frame; every step
   shows its one-line body at once — nothing is folded away — and choosing a step only moves the
   frame and the left marker */
.how{padding-top:var(--s7)}
.how__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s5) var(--s6);align-items:start;padding-top:var(--s4);border-top:1px solid var(--ink)}
.how__lead{margin-top:var(--s3);color:var(--muted);font-size:15px;max-width:42ch}
.how__fact{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--s3);align-items:center;margin:0;padding-left:var(--s3);border-left:2px solid var(--accent)}
.how__fact img{width:96px;height:96px;object-fit:cover;border-radius:var(--r)}
.how__fact-title{font-weight:600;font-size:14px}
.how__fact-line{font-size:14px;color:var(--muted);margin-top:2px}
.how__fact-by{font-size:12px;color:var(--muted);margin-top:4px}
.how__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s6);align-items:start;margin-top:var(--s6)}
.how__steps{position:relative;border-top:1px solid var(--ink)}
.how__steps li{border-bottom:1px solid var(--line);padding-left:var(--s4)}
.how__steps li::before{content:'';position:absolute;left:0;top:0;bottom:0;width:0}
.how__steps button{display:flex;align-items:baseline;gap:var(--s3);width:100%;padding:var(--s3) 0 2px;border:0;background:none;color:var(--ink);font:600 17px/1.3 var(--ff-text);text-align:left;cursor:pointer}
.how__steps button:hover{color:var(--accent-ink)}
.how__num{font-size:13px;color:var(--muted);font-weight:500;letter-spacing:.04em}
/* the body of every step is visible: a reader who never clicks still gets all four lines */
.how__steps li>p{display:block;padding:4px 0 var(--s3) calc(var(--s3) + 22px);color:var(--muted);font-size:15px;line-height:1.45;max-width:46ch}
.how__steps li.is-current{box-shadow:inset 2px 0 0 var(--accent)}
.how__steps li.is-current button{color:var(--ink)}
.how__steps li.is-current .how__num{color:var(--accent-ink)}
.how__photo{margin:0}
.how__photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r)}
.how__photo figcaption{margin-top:var(--s2);font-size:13px;color:var(--muted)}

/* ---------- FAQ-09: the server-rendered SEO block ---------- */
/* no accordion: the heading and the lead hold the left column, and every question stays open on
   the right as a row of question / answer pairs with fixed side columns */
.landing-seo{padding:var(--s7) 0 0}
.landing-seo .seo-inner{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr);gap:var(--s5) var(--s7);align-items:start}
.landing-seo h2{font-size:clamp(28px,3vw,40px);max-width:18ch}
.landing-seo .seo-inner>div p{margin-top:var(--s3);color:var(--muted);font-size:15px;line-height:1.6;max-width:40ch}
.landing-seo h3{margin-top:var(--s5);font-family:var(--ff-text);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.landing-seo .seo-faq{margin:0;border-top:1px solid var(--ink)}
.landing-seo .seo-faq>div{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:var(--s2) var(--s5);padding:var(--s4) 0;border-bottom:1px solid var(--line);align-items:baseline}
.landing-seo .seo-faq dt{font-size:15px;font-weight:600;color:var(--ink);line-height:1.45}
.landing-seo .seo-faq dd{margin:0;color:var(--muted);font-size:15px;line-height:1.6;max-width:54ch}

/* ---------- FOOTER-04: districts as one inline run of text ---------- */
.landing-districts{padding-top:var(--s6);margin-top:var(--s7);border-top:1px solid var(--line)}
.landing-districts .districts{display:block;padding:0;border:0}
.landing-districts .districts h2{display:block;width:auto;margin:0 0 var(--s2);font-size:12px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;font-weight:600}
.landing-districts .districts ul{display:block;line-height:1.9}
.landing-districts .districts li{display:inline}
.landing-districts .districts a{display:inline;padding:0;border:0;border-bottom:1px solid var(--line-strong);border-radius:0;font-size:14px;color:var(--ink)}
.landing-districts .districts a:hover{border-bottom-color:var(--accent-ink);color:var(--accent-ink)}
.landing-districts .districts li+li::before{content:'·';margin:0 8px;color:var(--line-strong)}

/* ---------- FOOTER-03 ---------- */
/* the footer is a contact section: the phone is the largest type on the page and the three
   channels are full-width bars instead of icons */
.landing-footer{margin-top:var(--s6);padding:var(--s7) 0 var(--s5);border-top:1px solid var(--ink)}
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s6) var(--s7);align-items:start}
.contact h2{font-size:clamp(30px,3.4vw,44px);max-width:15ch}
.contact__text{margin-top:var(--s3);color:var(--muted);font-size:15px;max-width:34ch}
.contact__brand{display:flex;align-items:center;gap:10px;margin-top:var(--s6);font-size:14px;font-weight:600}
.contact__brand img{width:28px;height:28px;flex:none}
.contact__top{display:inline-block;margin-top:var(--s3);font-size:13px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink)}
.contact__top:hover{color:var(--accent-ink);border-color:var(--accent-ink)}
.contact__card{padding:var(--s5);border-radius:var(--r);background:var(--dark);color:var(--on-dark)}
.contact__label{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-muted);font-weight:600}
.contact__phone{display:block;margin-top:var(--s2);font-size:clamp(30px,4.4vw,52px);line-height:1.1;letter-spacing:-.02em;color:var(--on-dark);text-decoration:none;white-space:nowrap}
.contact__phone:hover{color:var(--dark-accent)}
.contact__bars{display:grid;gap:8px;margin-top:var(--s5)}
.channel-bar{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);padding:13px var(--s4);border-radius:var(--r);background:var(--on-dark);color:var(--ink);font-size:15px;text-decoration:none}
.channel-bar>span:first-child{font-weight:600;flex:none}
.channel-bar>span:last-child{font-size:13px;color:var(--muted);text-align:right}
.channel-bar:hover{background:#E4E5DE}
.channel-bar--wa{background:var(--accent);color:#fff}
.channel-bar--wa>span:last-child{color:#EAF3EA}
.channel-bar--wa:hover{background:#1F6535}
.legal{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2) var(--s5);margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.legal a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line-strong)}
.legal a:hover{color:var(--ink);border-color:var(--ink)}

/* ---------- the login dialog ---------- */
/* a modal, not a page: it must fit the smallest phone (390x640) and scroll its own body when it
   does not, with the close control pinned inside the padding instead of running to the corner */
.login-dialog{width:min(480px,calc(100% - 24px));max-height:calc(100dvh - 24px);padding:var(--s5) var(--s5) var(--s4);border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);box-shadow:0 30px 80px rgb(29 29 27/.26);overflow:auto;overscroll-behavior:contain}
.login-dialog::backdrop{background:rgb(29 29 27/.58);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.login-dialog>p:last-child{margin-bottom:0}
.login-close{position:absolute;top:12px;right:12px;width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink);font:400 22px/1 var(--ff-text);cursor:pointer}
.login-close:hover{border-color:var(--line-strong);background:var(--accent-soft)}
.login-dialog-brand{display:flex;align-items:center;gap:10px;margin-bottom:var(--s4);font-size:13px;font-weight:600;letter-spacing:-.01em}
.login-dialog-brand img{width:30px;height:30px;flex:none}
.login-dialog h2{font-family:var(--ff-display);font-weight:400;font-size:var(--t4);line-height:1.1;letter-spacing:-.02em;max-width:12ch}
:lang(ka) .login-dialog h2{font-family:'Noto Serif Georgian',Georgia,serif;font-weight:600;letter-spacing:0}
.login-dialog-intro{margin-top:var(--s2);color:var(--muted);font-size:14px;line-height:1.5;max-width:38ch}

/* the Google door is the filled action; the mark sits in its own white 38 px tile so the four
   brand colours read at full strength, and the icon has a fixed 20 px box — without it the shared
   `img,svg{max-width:100%}` stretched it across the whole button */
.google-login{display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:12px;min-height:56px;margin-top:var(--s5);padding:9px 14px;border:1px solid var(--accent);border-radius:var(--r);background:var(--accent);color:#fff;text-decoration:none;transition:background .18s var(--ease),border-color .18s var(--ease)}
.google-login:hover{background:#1F6535;border-color:#1F6535;color:#fff}
.google-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:var(--r-s);background:#fff}
.google-icon svg{width:20px;height:20px;flex:none}
.google-login strong{display:block;font-size:14px;font-weight:600;line-height:1.25}

.domain-note{display:flex;align-items:flex-start;gap:7px;margin-top:var(--s3);color:var(--muted);font-size:12px;line-height:1.45}
.domain-note .icon{width:15px;height:15px;flex:none;margin-top:2px;color:var(--accent)}
.login-status{margin-top:var(--s2);color:var(--muted);font-size:12px;line-height:1.45}
.login-status:empty{display:none}
.login-status.error{color:#A33131}
.login-divider{display:flex;align-items:center;gap:10px;margin:var(--s4) 0;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.login-divider:before,.login-divider:after{content:'';height:1px;flex:1;background:var(--line)}

.geodrive-head strong{display:block;font-size:14px;font-weight:600}
.geodrive-head small{display:block;margin-top:2px;color:var(--muted);font-size:12px;line-height:1.45}
.geodrive-login form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end;margin-top:var(--s3)}
.geodrive-login label span{display:block;margin-bottom:6px;font-size:12px;font-weight:600}
.geodrive-login input{width:100%;height:48px;padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);color:var(--ink);font:400 14px/1 var(--ff-text)}
.geodrive-login input::placeholder{color:var(--muted);font-size:14px}
.geodrive-login button{height:48px;padding:0 16px;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--accent);border-radius:var(--r);background:var(--surface);color:var(--accent-ink);font:600 14px/1 var(--ff-text);cursor:pointer}
.geodrive-login button:hover:not(:disabled){background:var(--accent-soft)}
.otp-help{margin-top:8px;color:var(--muted);font-size:12px;line-height:1.45}
.registration-note{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line);color:var(--muted);font-size:12px;line-height:1.5}
.registration-note a{color:var(--accent-ink);font-weight:600}

@media(max-width:1080px){
 .hero-card{aspect-ratio:1.7/1}
 .hero-card__tab{max-width:min(30rem,64%)}
 .gallery__row{grid-auto-columns:clamp(160px,24vw,206px)}
 .landing-seo .seo-inner{grid-template-columns:1fr;gap:var(--s5)}
 .how__body{gap:var(--s5)}
}

@media(max-width:800px){
 /* the phone header: logo, language toggle and the door — 26 + 8 + word mark, 92 switcher, 64
    door — fit a 360 px row without wrapping or clipping */
 .landing-app{--header-h:60px}
 .landing-header .site-header__in{min-height:var(--header-h);gap:var(--s2)}
 .landing-header .brand img{width:26px;height:26px}
 .landing-header .brand span{font-size:13px}
 .landing-header .site-nav{gap:var(--s2)}
 .landing-header .site-nav__actions{gap:var(--s2)}
 .landing-header .language-switcher{padding:2px}
 .landing-header .language-switcher button{min-width:28px;min-height:30px;padding:0 4px;font-size:10px}
 .landing-header .btn--ghost{min-height:38px;padding:0 12px;font-size:13px}
 .landing-hero{padding-top:var(--s2)}
 /* the card turns portrait; the tab and the notch become full-width bands of the page colour,
    so the title and the actions never sit on the dish */
 .hero-card{aspect-ratio:4/5}
 .hero-card__tab{position:absolute;top:0;left:0;right:0;max-width:none;width:auto;padding:var(--s3) 0;border-radius:0}
 .hero-card__tab h1{max-width:14ch}
 .hero-card__notch{left:0;right:0;width:auto;padding:var(--s3) 0 0;border-radius:0}
 .landing-actions{align-items:stretch;flex-direction:column;gap:var(--s2)}
 .landing-actions .btn,.landing-actions .whatsapp-cta{width:100%;justify-content:center}
 .gallery{padding-top:var(--s6)}
 .gallery__head{grid-template-columns:1fr;gap:var(--s2)}
 .gallery__row{grid-auto-columns:min(64vw,260px);padding-top:var(--s4)}
 .price__head{grid-template-columns:1fr}
 .price__row{grid-template-columns:minmax(0,1fr) auto;gap:4px var(--s3)}
 .price__row dt{grid-column:1;font-size:20px}
 .price__row dd.fig{grid-column:2;grid-row:1;text-align:right}
 .price__row dd:last-child{grid-column:1/-1;margin-top:4px}
 .price__foot{grid-template-columns:1fr;gap:var(--s4)}
 .how__head{grid-template-columns:1fr;gap:var(--s4)}
 .how__body{grid-template-columns:1fr;gap:var(--s4)}
 .how__photo{order:-1}
 /* one line per step on a phone too: the indent under the number pushed the short body to a second
    line at 390px */
 .how__steps li>p{padding-left:0}
 .landing-seo .seo-faq>div{grid-template-columns:1fr;gap:4px}
 .landing-seo .seo-faq dd{max-width:none}
 .landing-districts .districts a{font-size:13px}
 .contact{grid-template-columns:1fr;gap:var(--s5)}
 .contact__card{padding:var(--s4)}
 .contact__phone{font-size:clamp(26px,7.4vw,36px);white-space:normal;overflow-wrap:anywhere}
 .channel-bar{flex-direction:column;align-items:flex-start;gap:2px}
 .channel-bar>span:last-child{text-align:left}
 .login-dialog{width:calc(100% - 20px);max-height:calc(100dvh - 20px);padding:var(--s4)}
 .login-dialog h2{font-size:var(--t3)}
 .geodrive-login form{grid-template-columns:1fr}
 .geodrive-login button{width:100%;justify-content:center}
}

@media(max-width:390px){
 .landing-app{--display:38px}
 .hero-card{aspect-ratio:5/6}
 .gallery__row{grid-auto-columns:min(70vw,280px)}
 .gallery__controls button{width:40px;height:40px}
}

/* ==== Hero v2: снимок во весь экран, заголовок поверх кадра ==== */
.landing-hero{padding:0}
.landing-hero .wrap{max-width:none;margin:0;padding:0}
.hero-card{aspect-ratio:auto;min-height:calc(100svh - 68px);border-radius:0;background:#1D1D1B;isolation:isolate}
.hero-card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
 background:linear-gradient(180deg,rgba(18,20,17,.62) 0%,rgba(18,20,17,.10) 30%,rgba(18,20,17,0) 52%,rgba(18,20,17,.55) 100%)}
.hero-card__photo{object-position:50% 52%}
.hero-card__tab{position:absolute;z-index:2;left:clamp(20px,5vw,72px);right:auto;top:auto;bottom:clamp(104px,14vh,168px);
 max-width:min(62rem,88%);padding:0;background:none;border-radius:0}
.hero-card__kicker{display:flex;align-items:center;gap:.75rem;color:rgba(255,255,255,.82);font-family:var(--mono,monospace);
 font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:500}
.hero-card__kicker::before{content:"";width:2.5rem;height:1px;background:currentColor;opacity:.6}
.hero-card__tab h1{color:#fff;font-size:clamp(52px,8.4vw,124px);line-height:.94;letter-spacing:-.02em;max-width:11ch;
 text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.28)}
.hero-card__meta{margin-top:clamp(14px,2vw,26px);color:rgba(255,255,255,.9);font-size:13px;letter-spacing:.06em}
.hero-card__meta>span+span{color:rgba(255,255,255,.62)}
.hero-card__notch{position:absolute;z-index:2;left:clamp(20px,5vw,72px);right:clamp(20px,5vw,72px);bottom:clamp(24px,4vh,48px);
 top:auto;display:flex;justify-content:flex-start;padding:0;background:none;border-radius:0}
.landing-actions{display:flex;flex-wrap:wrap;gap:12px}
.hero-card__notch .btn--outline{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.6);color:#fff}
.hero-card__notch .btn--outline:hover{background:rgba(255,255,255,.14)}

@media (max-width:900px){
 .hero-card{min-height:calc(88svh - 60px)}
 .hero-card__tab{left:20px;right:20px;bottom:auto;top:auto;max-width:none;padding:0;inset-block:auto;
  position:absolute;bottom:clamp(96px,16vh,150px)}
 .hero-card__tab h1{font-size:clamp(38px,11.5vw,62px);max-width:9ch}
 .hero-card__notch{left:20px;right:20px;bottom:22px}
 .landing-actions{width:100%;flex-direction:column}
 .landing-actions .btn{width:100%;justify-content:center}
}

/* hero во весь экран: убираем ромб-обрезку и поля контейнера */
.landing-hero .wrap{max-width:none!important;width:100%!important;padding:0!important;margin:0!important}
.hero-card{border-radius:0!important}
.hero-card__photo{clip-path:none!important;-webkit-clip-path:none!important}


/* ==== Hero v3: сплит — текст на канве, фото в натуральном масштабе (без апскейла) ==== */
@media (min-width:901px){
 .landing-hero{padding:0}
 .landing-hero .wrap{max-width:none!important;width:100%!important;padding:0!important;margin:0!important}
 .hero-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);grid-template-rows:1fr auto;
  min-height:calc(100svh - 68px);border-radius:0!important;background:var(--canvas);isolation:auto}
 .hero-card::after{display:none!important}
 .hero-card__photo{position:relative!important;inset:auto!important;grid-column:2;grid-row:1/3;width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;clip-path:none!important;z-index:1}
 .hero-card__tab{position:static!important;grid-column:1;grid-row:1;align-self:end;
  padding:clamp(28px,5vw,72px) clamp(24px,4vw,64px) 0;max-width:none;background:none;border-radius:0;z-index:2}
 .hero-card__kicker{color:var(--muted)}
 .hero-card__tab h1{color:var(--ink);font-size:clamp(46px,5.4vw,88px);line-height:.96;max-width:13ch;text-shadow:none}
 .hero-card__meta{color:var(--ink);margin-top:clamp(12px,1.6vw,22px)}
 .hero-card__meta>span+span{color:var(--muted)}
 .hero-card__notch{position:static!important;grid-column:1;grid-row:2;justify-content:flex-start;
  padding:clamp(20px,3vw,32px) clamp(24px,4vw,64px) clamp(28px,4vh,52px);background:none;border-radius:0;z-index:2}
 .hero-card__notch .btn--outline{background:transparent;border-color:var(--ink);color:var(--ink)}
}
@media (max-width:900px){
 .hero-card{display:block;min-height:0;border-radius:0;background:var(--canvas);aspect-ratio:auto}
 .hero-card::after{display:none!important}
 .hero-card__photo{position:relative!important;inset:auto!important;width:100%;height:auto;aspect-ratio:4/3;
  object-fit:cover;clip-path:none!important}
 .hero-card__tab{position:static!important;padding:20px 20px 0;background:none;border-radius:0}
 .hero-card__tab h1{color:var(--ink);font-size:clamp(34px,10.5vw,52px);max-width:12ch}
 .hero-card__kicker,.hero-card__meta{color:var(--muted)}
 .hero-card__notch{position:static!important;padding:18px 20px 26px;background:none}
 .hero-card__notch .btn--outline{border-color:var(--ink);color:var(--ink)}
}


/* ==== FAQ: заголовок в своей колонке, вопрос над ответом ==== */
@media (min-width:901px){
 .landing-seo .seo-inner{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,88px);align-items:start}
}
.landing-seo .seo-inner__faq>h3{margin:0 0 clamp(14px,2vw,22px);font-family:var(--mono,monospace);font-size:11px;
 letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:500}
.landing-seo .seo-faq{display:block;margin:0}
.landing-seo .seo-faq>div{display:block;padding:clamp(16px,2.2vw,24px) 0;border-top:1px solid var(--line)}
.landing-seo .seo-faq>div:first-child{border-top:0;padding-top:0}
.landing-seo .seo-faq dt{display:block;margin:0;font-family:var(--ff-display,serif);font-size:clamp(18px,1.6vw,23px);
 line-height:1.25;color:var(--ink);font-weight:400;text-wrap:balance;max-width:34ch}
.landing-seo .seo-faq dd{display:block;margin:8px 0 0;color:var(--muted);font-size:15px;line-height:1.55;max-width:58ch}

/* ==== Оффер в hero: крупнее заголовок и цена отдельной строкой ==== */
@media (min-width:901px){
 .hero-card__tab h1{font-size:clamp(64px,7.4vw,116px);max-width:10ch}
 .hero-card__meta{margin-top:clamp(16px,2vw,28px);gap:14px 34px}
 .hero-card__meta>span{font-size:13px;letter-spacing:.02em}
 .hero-card__meta>span:first-child{font-family:var(--mono,monospace);font-size:clamp(22px,2.1vw,30px);
  letter-spacing:-.01em;color:var(--ink);font-weight:500;line-height:1}
}
@media (max-width:900px){
 .hero-card__meta>span:first-child{font-family:var(--mono,monospace);font-size:22px;color:var(--ink);font-weight:500}
}

/* ==== Липкая панель WhatsApp внизу экрана на телефоне ==== */
/* на десктопе панели нет: там кнопка WhatsApp уже стоит в hero и в подвале */
.mobile-cta{display:none}
@media (max-width:900px){
 .mobile-cta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgb(29 29 27/.06)}
 .mobile-cta__btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;
  padding:0 18px;border-radius:var(--r);background:var(--accent);color:#fff;
  text-decoration:none;font:600 15px/1 var(--ff-text);letter-spacing:-.01em}
 .mobile-cta__btn svg{width:20px;height:20px;flex:none;fill:currentColor}
 .mobile-cta__btn:hover,.mobile-cta__btn:focus-visible{background:#1F6535;color:#fff}
 /* контент не должен уезжать под панель: 48px кнопки + 20px отступов + запас */
 body{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}