/* Mobile-only layer. Desktop layout/CSS/JS remain unchanged. */
:root{
  --m-gold:#c39035;
  --m-gold2:#e0b95f;
  --m-text:#f4eee5;
  --m-muted:#cfc4b2;
  --m-panel:rgba(15,14,12,.88);
  --m-line:rgba(255,255,255,.14);
  --m-ease:cubic-bezier(.65,0,.35,1);
  --m-dur:1040ms;
  --m-cut:14px;
}

html,body{width:100%;min-width:0!important;height:100%;overflow:hidden!important;background:#000!important;-webkit-text-size-adjust:100%}
body{color:var(--m-text);touch-action:none}
body.modal-open{touch-action:auto}

.site-bg{position:fixed!important;inset:0!important;z-index:-10!important;overflow:hidden!important;background:#000!important}
.site-bg::before{content:""!important;position:absolute!important;inset:-8%!important;background:url("/images/bg/dark_texture_upscaled_4x.webp") center/cover no-repeat!important;filter:brightness(1.18) contrast(1.08)!important;opacity:.88!important;transform:rotate(90deg) scale(1.2)!important;pointer-events:none!important}
.site-bg::after{content:""!important;position:absolute!important;inset:0!important;background:radial-gradient(circle at 0 0,rgba(195,135,45,.13),transparent 34%),radial-gradient(circle at 100% 0,rgba(195,135,45,.11),transparent 32%),linear-gradient(180deg,rgba(0,0,0,.14),rgba(0,0,0,.62))!important;pointer-events:none!important}

.site-header{position:fixed!important;inset:0 0 auto 0!important;height:0!important;padding:0!important;z-index:90!important;background:transparent!important;pointer-events:none!important}
.header-brand{position:fixed!important;top:16px!important;left:16px!important;width:78px!important;height:48px!important;display:block!important;opacity:0!important;pointer-events:auto!important;transform:translateY(-8px) rotate(-4deg)!important;transition:opacity 360ms ease,transform 520ms var(--m-ease)!important}
body.mobile-ready:not(.mobile-page-0) .header-brand{opacity:.92!important;transform:translateY(0) rotate(-4deg)!important}
.header-brand__head{display:block!important;width:78px!important;height:auto!important}.header-brand__word{display:none!important}

.menu-button{position:fixed!important;z-index:92!important;top:18px!important;right:16px!important;left:auto!important;min-width:116px!important;height:42px!important;padding:0 14px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:12px!important;border:1px solid rgba(195,144,53,.62)!important;background:rgba(0,0,0,.34)!important;color:#fff!important;text-transform:uppercase!important;letter-spacing:.1em!important;font-size:12px!important;font-weight:800!important;pointer-events:auto!important;transform:none!important;backdrop-filter:blur(8px)!important;transition:top 520ms var(--m-ease),left 520ms var(--m-ease),right 520ms var(--m-ease),transform 520ms var(--m-ease),opacity 260ms ease!important}
body.mobile-page-0 .menu-button{top:calc(50svh + 168px)!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important}
.menu-button i{width:25px!important;height:12px!important;display:block!important;position:relative!important}.menu-button i::before,.menu-button i::after{content:""!important;position:absolute!important;left:0!important;width:100%!important;height:2px!important;background:#fff!important;transition:.22s ease!important}.menu-button i::before{top:0!important}.menu-button i::after{bottom:0!important}.menu-button[aria-expanded="true"] i::before{top:5px!important;transform:rotate(45deg)!important}.menu-button[aria-expanded="true"] i::after{bottom:5px!important;transform:rotate(-45deg)!important}

.mobile-menu-backdrop{position:fixed;inset:0;z-index:84;background:rgba(0,0,0,.68);opacity:0;pointer-events:none;transition:.22s ease;backdrop-filter:blur(2px)}.mobile-menu-backdrop.open{opacity:1;pointer-events:auto}
.menu-panel{position:fixed!important;top:50%!important;left:50%!important;right:auto!important;width:min(330px,calc(100vw - 34px))!important;max-height:calc(100svh - 90px)!important;overflow:auto!important;z-index:100!important;background:rgba(5,4,3,.96)!important;border:1px solid rgba(195,144,53,.58)!important;clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)!important;transform:translate(-50%,-46%) scale(.96)!important;opacity:0!important;pointer-events:none!important;transition:.24s ease!important;backdrop-filter:blur(10px)!important;box-shadow:0 28px 80px rgba(0,0,0,.65)!important}.menu-panel.open{transform:translate(-50%,-50%) scale(1)!important;opacity:1!important;pointer-events:auto!important}.menu-panel a,.menu-panel button{width:100%!important;min-height:54px!important;display:flex!important;align-items:center!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.08)!important;background:rgba(255,255,255,.035)!important;color:#fff!important;padding:0 18px!important;text-transform:uppercase!important;font-weight:800!important;letter-spacing:.08em!important;font-size:13px!important;text-align:left!important}.menu-panel button{color:var(--m-gold2)!important;background:rgba(195,144,53,.18)!important}

main{height:auto!important;min-height:0!important;width:100%!important;overflow:visible!important;transform:translate3d(0,0,0);transition:transform var(--m-dur) var(--m-ease)!important;will-change:transform}
.screen{width:100%!important;height:100svh!important;min-height:100svh!important;padding:72px 18px 46px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;overflow:hidden!important;position:relative!important;border-bottom:0!important}.screen::after{content:none!important;display:none!important;background:none!important}
.eyebrow{font-size:11px!important;letter-spacing:.16em!important;margin:0 0 10px!important;color:var(--m-gold2)!important}h1,h2,h3{text-wrap:balance!important}h2{font-size:clamp(38px,11vw,56px)!important;line-height:.9!important;letter-spacing:-.035em!important}h3{font-size:clamp(26px,8vw,40px)!important;line-height:.92!important}.btn{height:48px!important;padding:0 18px!important;font-size:11px!important}

/* Hero has two real mobile pages inside one desktop section */
.hero-screen{height:200svh!important;min-height:200svh!important;display:block!important;padding:0 18px!important}.hero-grid{width:100%!important;height:200svh!important;min-height:200svh!important;display:block!important;transform:none!important}.hero-logo-stack{height:100svh!important;min-height:100svh!important;display:grid!important;align-content:center!important;justify-items:center!important;gap:10px!important;padding-bottom:48px!important}.hero-head{width:min(86vw,400px)!important;margin:0 auto!important;transform:translateY(10px)!important;transition:opacity 360ms ease,transform 520ms var(--m-ease)!important}.hero-word{width:min(82vw,390px)!important;margin:0 auto!important;transform:translateY(-4px)!important}.hero-copy{height:100svh!important;min-height:100svh!important;width:100%!important;max-width:350px!important;margin:0 auto!important;padding:0!important;border:0!important;text-align:center!important;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important}.hero-title{font-size:clamp(56px,17vw,92px)!important;line-height:.82!important;letter-spacing:-.038em!important;max-width:100%!important;text-align:center!important}.hero-title span{letter-spacing:-.038em!important}.hero-lead{font-size:18px!important;max-width:310px!important;margin:22px auto 24px!important;color:var(--m-muted)!important}.hero-actions{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;width:min(285px,100%)!important;margin:0 auto!important}body.mobile-page-0 .hero-screen::before{content:""!important;position:absolute!important;left:50%!important;top:calc(100svh - 72px)!important;width:28px!important;height:28px!important;transform:translateX(-50%) rotate(45deg)!important;border-right:2px solid var(--m-gold2)!important;border-bottom:2px solid var(--m-gold2)!important;animation:mobileArrowBounce 1.35s ease-in-out infinite!important;opacity:.9!important}@keyframes mobileArrowBounce{0%,100%{transform:translate(-50%,0) rotate(45deg);opacity:.52}45%{transform:translate(-50%,10px) rotate(45deg);opacity:1}}

/* Product has two real mobile pages */
.product-screen{height:200svh!important;min-height:200svh!important;display:block!important;padding:0 18px!important}.product-layout{width:100%!important;height:200svh!important;display:block!important}.product-copy,.texture-showcase{height:100svh!important;min-height:100svh!important;display:flex!important;flex-direction:column!important;justify-content:center!important}.product-copy h3{font-family:Montserrat,Arial,sans-serif!important;font-size:23px!important;line-height:1.15!important;letter-spacing:0!important;color:var(--m-gold2)!important;margin:16px 0 14px!important}.product-copy p{font-size:15px!important;line-height:1.46!important;margin:0 0 18px!important;color:#efe7da!important;font-weight:600!important}.mini-facts{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;margin:22px 0 0!important}.mini-facts article{padding:16px!important;background:var(--m-panel)!important;border:1px solid var(--m-line)!important;clip-path:polygon(var(--m-cut) 0,100% 0,100% calc(100% - var(--m-cut)),calc(100% - var(--m-cut)) 100%,0 100%,0 var(--m-cut))!important}.mini-facts b{display:block!important;text-transform:uppercase!important;margin-bottom:7px!important}.mini-facts span{color:var(--m-muted)!important;font-size:13px!important}.texture-title{color:var(--m-gold2)!important;font-size:26px!important;line-height:1.12!important;text-align:center!important;margin:0 0 16px!important}.texture-strip{width:100%!important;height:auto!important;display:grid!important;grid-template-columns:repeat(2,1fr)!important;overflow:hidden!important;border:1px solid rgba(195,144,53,.24)!important;background:#050403!important;clip-path:polygon(13px 0,100% 0,100% calc(100% - 13px),calc(100% - 13px) 100%,0 100%,0 13px)!important}.texture-strip figure{margin:0!important;display:grid!important;grid-template-rows:120px 50px!important;text-align:center!important;background:#050403!important;overflow:hidden!important}.texture-strip img{width:100%!important;height:120px!important;object-fit:cover!important;object-position:center bottom!important;background:#050403!important}.texture-strip figcaption{height:50px!important;display:flex!important;align-items:center!important;justify-content:center!important;background:rgba(0,0,0,.76)!important;font-size:12px!important;font-weight:800!important;line-height:1.12!important;padding:8px!important}.texture-cta{width:100%!important;margin:18px 0 0!important}

/* Benefits */
.benefits-screen .section-inner{height:100%!important;width:100%!important;display:flex!important;flex-direction:column!important;justify-content:center!important;gap:14px!important;overflow:hidden!important}.benefits-screen .section-head{align-self:stretch!important;margin:0!important}.benefits-screen h2{font-size:clamp(38px,11vw,56px)!important;line-height:.88!important;max-width:360px!important}.benefit-grid{display:grid!important;grid-auto-flow:column!important;grid-template-rows:repeat(2,minmax(0,1fr))!important;grid-template-columns:none!important;grid-auto-columns:calc(100vw - 36px)!important;gap:16px 36px!important;width:max-content!important;height:calc(100svh - 255px)!important;min-height:0!important;margin:0!important;transform:translate3d(calc(var(--mobile-benefit-page,0) * -100vw),0,0)!important;transition:transform var(--m-dur) var(--m-ease)!important}.benefit-grid article{min-height:0!important;padding:18px!important;display:flex!important;flex-direction:column!important;justify-content:space-between!important;background:var(--m-panel)!important;border:1px solid var(--m-line)!important;clip-path:polygon(var(--m-cut) 0,100% 0,100% calc(100% - var(--m-cut)),calc(100% - var(--m-cut)) 100%,0 100%,0 var(--m-cut))!important}.benefit-grid article h3{font-size:clamp(28px,8.4vw,38px)!important;line-height:.9!important;letter-spacing:-.025em!important;margin:0!important}.benefit-grid article p{margin:0!important;font-size:14px!important;line-height:1.38!important;color:var(--m-muted)!important}.source-note{font-size:11px!important;margin:0!important;color:var(--m-muted)!important;line-height:1.25!important}

/* Characteristics */
.characteristics-screen{display:flex!important;padding:72px 18px 46px!important}.char-stage{height:100%!important;width:100%!important;overflow:hidden!important;padding:0!important;display:flex!important;flex-direction:column!important;justify-content:center!important}.char-top{height:auto!important;min-height:0!important;padding:0!important;display:block!important;margin:0 0 14px!important}.char-top h2{font-size:clamp(34px,10vw,48px)!important;line-height:.9!important;max-width:360px!important}.char-progress{display:flex!important;gap:8px!important;position:static!important;margin:14px 0 0!important;width:100%!important}.char-progress span{flex:1!important;width:auto!important;height:4px!important;background:rgba(255,255,255,.16)!important}.char-progress span.active{background:var(--m-gold2)!important;box-shadow:0 0 18px rgba(224,185,95,.22)!important}.char-viewport{height:calc(100svh - 210px)!important;min-height:0!important;overflow:hidden!important}.char-track{height:100%!important;display:flex!important;transition:transform var(--m-dur) var(--m-ease)!important;transform:translate3d(calc(var(--mobile-char-index,0) * -100%),0,0)!important}.char-panel{flex:0 0 100%!important;width:100%!important;height:100%!important;padding:0!important;overflow:hidden!important;display:block!important}.panel-shell{height:100%!important;width:100%!important;min-height:0!important;margin:0!important;padding:16px!important;overflow:auto!important;display:block!important;background:var(--m-panel)!important;border:1px solid var(--m-line)!important;clip-path:polygon(var(--m-cut) 0,100% 0,100% calc(100% - var(--m-cut)),calc(100% - var(--m-cut)) 100%,0 100%,0 var(--m-cut))!important}.panel-title{margin:0 0 14px!important}.panel-title h3{font-size:clamp(24px,7vw,34px)!important;line-height:.95!important;letter-spacing:-.025em!important}.sizes-layout,.lab-layout{display:block!important}.size-main{min-height:0!important;padding:16px!important;margin-bottom:10px!important}.size-main strong{font-size:26px!important;line-height:1!important;margin:14px 0 12px!important}.size-main p{font-size:13px!important}.size-cards,.metrics-grid,.ratio-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}.size-cards article,.metrics-grid article,.ratio-grid article{min-height:96px!important;padding:12px!important}.size-cards b,.metrics-grid b,.ratio-grid b,.size-main b{font-size:11px!important}.size-cards span{font-size:15px!important}.metrics-grid article strong,.ratio-grid article strong{font-size:24px!important;line-height:.95!important}.comparison-table{display:grid!important;grid-template-columns:.68fr 1.06fr 1.06fr!important;gap:0!important;border:1px solid rgba(255,255,255,.12)!important}.comparison-table .th{display:block!important;background:rgba(255,255,255,.08)!important;color:#fff!important;font-size:10px!important;text-transform:uppercase!important}.comparison-table .accent{color:var(--m-gold2)!important}.comparison-table>div{min-height:0!important;padding:9px 7px!important;border:1px solid rgba(255,255,255,.09)!important;font-size:11px!important;line-height:1.28!important}.comparison-table>div:nth-child(3n+1):not(.th){color:var(--m-gold2)!important;font-weight:800!important;background:rgba(195,144,53,.10)!important}.panel-note{font-size:12px!important;margin-top:12px!important}

/* Applications */
.applications-screen .section-inner{height:100%!important;width:100%!important;display:flex!important;flex-direction:column!important;justify-content:center!important;gap:16px!important;overflow:hidden!important}.applications-screen .section-head{margin:0!important;align-self:stretch!important}.applications-screen h2{font-size:clamp(34px,10vw,48px)!important}.application-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important}.application-grid article{min-height:94px!important;padding:13px!important;background:var(--m-panel)!important;border:1px solid var(--m-line)!important;clip-path:polygon(var(--m-cut) 0,100% 0,100% calc(100% - var(--m-cut)),calc(100% - var(--m-cut)) 100%,0 100%,0 var(--m-cut))!important}.application-grid article b{display:block!important;color:var(--m-gold2)!important;text-transform:uppercase!important;margin-bottom:8px!important;font-size:14px!important;line-height:1.1!important}.application-grid article span{font-size:12px!important;color:var(--m-muted)!important;line-height:1.25!important}.applications-screen .source-note{display:none!important}

/* Supply */
.supply-screen .section-inner{height:100%!important;width:100%!important;display:flex!important;flex-direction:column!important;justify-content:center!important;gap:18px!important}.supply-screen .section-head{margin:0!important}.supply-screen h2{font-size:clamp(34px,10vw,50px)!important}.supply-grid{display:grid!important;grid-template-columns:1fr!important;gap:22px!important;margin:0!important}.supply-grid article{min-height:168px!important;padding:24px 22px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;background:var(--m-panel)!important;border:1px solid var(--m-line)!important;clip-path:polygon(var(--m-cut) 0,100% 0,100% calc(100% - var(--m-cut)),calc(100% - var(--m-cut)) 100%,0 100%,0 var(--m-cut))!important}.supply-grid article b{font-size:17px!important;line-height:1.15!important;color:var(--m-gold2)!important;letter-spacing:.02em!important}.supply-grid article strong{font-size:clamp(26px,7.6vw,34px)!important;line-height:.95!important;margin:18px 0 14px!important;white-space:nowrap!important}.supply-grid article span{color:var(--m-muted)!important;font-size:18px!important;line-height:1.32!important}.supply-grid article em{display:none!important}

/* Terms */
.terms-screen .section-inner{height:100%!important;width:100%!important;display:block!important;position:relative!important;overflow:hidden!important}.terms-screen .section-head{position:absolute!important;left:0!important;right:0!important;top:7svh!important;margin:0!important}.terms-screen h2{font-size:clamp(34px,10vw,50px)!important;line-height:.9!important;max-width:340px!important}.terms-grid{position:absolute!important;left:0!important;right:0!important;top:29svh!important;height:50svh!important;display:grid!important;grid-template-columns:1fr!important;grid-template-rows:1fr 1fr!important;gap:16px!important;margin:0!important;opacity:1!important;transform:translate3d(calc(var(--mobile-terms-page,0) * -100vw),0,0)!important;transition:transform var(--m-dur) var(--m-ease),opacity .28s ease!important}.steps-grid{position:absolute!important;left:0!important;top:29svh!important;height:50svh!important;display:grid!important;grid-auto-flow:column!important;grid-template-rows:repeat(2,minmax(0,1fr))!important;grid-template-columns:none!important;grid-auto-columns:calc(100vw - 36px)!important;gap:16px 36px!important;width:max-content!important;opacity:0!important;pointer-events:none!important;transform:translate3d(calc((var(--mobile-terms-page,0) - 1) * -100vw),0,0)!important;transition:transform var(--m-dur) var(--m-ease),opacity .28s ease!important}body.mobile-terms-1 .terms-grid,body.mobile-terms-2 .terms-grid{opacity:0!important;pointer-events:none!important}body.mobile-terms-1 .steps-grid,body.mobile-terms-2 .steps-grid{opacity:1!important;pointer-events:auto!important}.price-card,.steps-grid article{min-height:0!important;padding:18px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;background:var(--m-panel)!important;border:1px solid var(--m-line)!important;clip-path:polygon(var(--m-cut) 0,100% 0,100% calc(100% - var(--m-cut)),calc(100% - var(--m-cut)) 100%,0 100%,0 var(--m-cut))!important}.price-card--accent{background:rgba(195,144,53,.20)!important;border-color:rgba(195,144,53,.55)!important}.price-card strong{font-size:clamp(28px,8vw,36px)!important;line-height:.94!important;margin:10px 0 8px!important}.price-card span,.steps-grid article b{display:block!important;color:var(--m-gold2)!important;font-size:15px!important;line-height:1.12!important;text-transform:uppercase!important}.price-card p,.price-card b,.steps-grid article span{font-size:13px!important;color:var(--m-muted)!important;line-height:1.35!important}.steps-grid article b{margin-bottom:10px!important}.steps-grid article b::first-letter{color:var(--m-gold2)!important}.official-note{display:none!important}.mobile-terms-progress{display:flex;gap:8px;position:absolute;left:0;right:0;bottom:52px}.mobile-terms-progress span{flex:1;height:3px;background:rgba(255,255,255,.16)}.mobile-terms-progress span.active{background:var(--m-gold2)}

/* Catalog promo */
.catalog-screen .section-inner{height:100%!important;width:100%!important;display:flex!important;flex-direction:column!important;justify-content:center!important;gap:20px!important}.catalog-promo-layout{display:flex!important}.catalog-promo-copy p:not(.eyebrow){color:var(--m-muted)!important;font-size:17px!important;margin:20px 0!important;line-height:1.45!important}.catalog-promo-actions{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}.catalog-promo-series{display:none!important}.catalog-promo-selected{align-self:center!important;margin:0!important}

/* Lead */
.lead-layout{height:100%!important;min-height:0!important;display:flex!important;flex-direction:column!important;justify-content:center!important;gap:18px!important}.lead-copy h2{font-size:clamp(40px,12vw,62px)!important}.lead-copy p:not(.eyebrow){color:var(--m-muted)!important;font-size:17px!important;margin:18px 0 0!important;line-height:1.45!important}.lead-badges{display:none!important}.lead-form{max-height:62svh!important;overflow:auto!important;overscroll-behavior:contain!important;padding:16px!important;background:rgba(5,4,3,.82)!important;border:1px solid rgba(195,144,53,.52)!important;clip-path:polygon(13px 0,100% 0,100% calc(100% - 13px),calc(100% - 13px) 100%,0 100%,0 13px)!important}.field span,.form-section-label{font-size:11px!important}.field input,.field textarea{padding:13px!important;font-size:14px!important}.contact-choice{grid-template-columns:1fr!important;gap:8px!important}.contact-choice label{height:44px!important}.selected-box{padding:13px!important}.selected-items{max-height:150px!important}.selected-item{grid-template-columns:42px 1fr 32px!important;gap:9px!important}.selected-item img{width:42px!important;height:42px!important}

/* Fullscreen mobile catalog modal */
.catalog-modal{position:fixed!important;inset:0!important;z-index:120!important;padding:0!important;background:#000!important;display:flex!important;flex-direction:column!important}.catalog-modal[hidden]{display:none!important}.catalog-modal::before{content:""!important;position:absolute!important;inset:0!important;z-index:-1!important;background:linear-gradient(180deg,rgba(0,0,0,.30),rgba(0,0,0,.72)),url("/images/bg/dark_texture_upscaled_4x.webp") center/cover no-repeat!important}.catalog-modal__panel{width:100%!important;height:100svh!important;max-width:none!important;display:flex!important;flex-direction:column!important;padding:0!important;background:transparent!important;border:0!important;clip-path:none!important;overflow:hidden!important}.catalog-modal__close{position:fixed!important;top:14px!important;right:14px!important;width:46px!important;height:46px!important;z-index:124!important;border:1px solid rgba(255,255,255,.18)!important;background:rgba(0,0,0,.55)!important;color:#fff!important;font-size:32px!important;transform:none!important}.catalog-modal__side{position:relative!important;flex:0 0 auto!important;width:100%!important;height:auto!important;border-right:0!important;border-bottom:1px solid rgba(195,144,53,.38)!important;padding:14px 68px 0 14px!important;overflow:visible!important;display:block!important}.catalog-modal__side h2{font-size:38px!important;line-height:.88!important}.catalog-modal__side>p:not(.eyebrow){font-size:12px!important;margin:8px 0 10px!important}.catalog-modal__side::after{content:"→";position:absolute;right:18px;bottom:14px;color:var(--m-gold2);font-size:20px;opacity:.8}.catalog-tabs{display:flex!important;gap:8px!important;overflow-x:auto!important;overflow-y:hidden!important;padding:8px 34px 10px 0!important;scrollbar-width:none!important}.catalog-tabs::-webkit-scrollbar{display:none!important}.catalog-tabs button{flex:0 0 auto!important;height:38px!important;min-width:142px!important;padding:0 12px!important;font-size:10px!important}.catalog-modal__selected{display:none!important}.catalog-modal__content{flex:1 1 auto!important;min-height:0!important;width:100%!important;padding:14px!important;overflow:hidden!important;display:flex!important;flex-direction:column!important}.catalog-heading h3{font-size:30px!important;line-height:.9!important;margin:0 0 8px!important}.catalog-heading p{font-size:12px!important;margin:0 0 12px!important}.catalog-scroll{flex:1 1 auto!important;min-height:0!important;overflow:auto!important;padding-right:0!important;overscroll-behavior:contain!important}.catalog-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;padding-bottom:170px!important}.color-card{min-height:0!important}.color-card__image{height:118px!important}.color-card__body{padding:10px!important;min-height:82px!important}.color-card__code,.color-card__title{font-size:11px!important}.color-card__add{height:36px!important;font-size:10px!important}.catalog-modal__cart{position:fixed!important;left:0!important;right:0!important;bottom:0!important;z-index:122!important;height:auto!important;max-height:42svh!important;width:100%!important;border-left:0!important;border-top:1px solid rgba(195,144,53,.55)!important;padding:10px 14px 14px!important;background:rgba(5,4,3,.96)!important;overflow:hidden!important}.catalog-modal__cart .catalog-modal__selected{display:grid!important;height:100%!important;padding:0!important;grid-template-rows:auto minmax(0,1fr) auto!important}.catalog-modal__cart .selected-box__head span{font-size:34px!important;margin-right:18px!important}.selected-items--modal{max-height:120px!important;overflow:auto!important;align-content:start!important;grid-auto-rows:max-content!important}.btn-to-lead{height:44px!important;width:100%!important;margin-top:8px!important}.fly-clone{display:none!important}

@media (max-width:380px){h2{font-size:38px!important}.hero-title{font-size:58px!important}.texture-strip figure{grid-template-rows:108px 48px!important}.texture-strip img{height:108px!important}.metrics-grid,.ratio-grid,.size-cards{grid-template-columns:1fr!important}.catalog-grid{grid-template-columns:1fr!important}.application-grid{grid-template-columns:1fr!important}.benefit-grid{height:calc(100svh - 245px)!important}}


/* ===== MOBILE PATCH 4: final corrections after device check ===== */

/* Strong mobile background fallback */
@media (max-width: 820px){
  .site-bg{
    background:
      radial-gradient(circle at 0% 0%, rgba(195,135,45,.10), transparent 32%),
      radial-gradient(circle at 100% 0%, rgba(195,135,45,.09), transparent 30%),
      linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.58)),
      url("/images/bg/dark_texture_upscaled_4x.webp") center/cover no-repeat !important;
  }

  .site-bg::before{
    opacity:.58!important;
  }

  /* No moving menu on intro: original button is hidden; clone is shown under logo. */
  .menu-button{
    top:18px!important;
    right:16px!important;
    left:auto!important;
    transform:none!important;
    transition:opacity 300ms ease!important;
  }

  body.mobile-page-0 .menu-button:not(.mobile-intro-menu){
    opacity:0!important;
    pointer-events:none!important;
  }

  .mobile-intro-menu{
    position:absolute!important;
    top:calc(50svh + 138px)!important;
    left:50%!important;
    right:auto!important;
    transform:translateX(-50%)!important;
    opacity:1!important;
    pointer-events:auto!important;
    z-index:8!important;
  }

  body:not(.mobile-page-0) .mobile-intro-menu{
    opacity:0!important;
    pointer-events:none!important;
  }

  .hero-logo-stack{
    transform:translateY(-18px)!important;
    gap:10px!important;
  }

  .hero-head{
    width:min(86vw,410px)!important;
    transform:translateY(20px)!important;
  }

  .hero-word{
    width:min(82vw,400px)!important;
    transform:translateY(-10px)!important;
  }

  body.mobile-page-0 .hero-screen::before{
    bottom:26px!important;
    animation:mobileArrowBounce 1.15s ease-in-out infinite!important;
  }

  /* Textures: labels fixed, no sliding overlay */
  .texture-showcase{
    gap:14px!important;
  }

  .texture-title{
    font-size:24px!important;
    line-height:1.12!important;
    text-align:center!important;
  }

  .texture-strip{
    grid-template-columns:repeat(2, minmax(0, 1fr))!important;
  }

  .texture-strip figure{
    grid-template-rows:122px 46px!important;
    overflow:hidden!important;
    min-width:0!important;
  }

  .texture-strip img{
    height:122px!important;
    min-height:122px!important;
    max-height:122px!important;
    object-fit:cover!important;
    object-position:center bottom!important;
  }

  .texture-strip figcaption{
    position:static!important;
    width:100%!important;
    height:46px!important;
    min-height:46px!important;
    max-height:46px!important;
    padding:5px 6px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    font-size:10px!important;
    line-height:1.05!important;
    background:rgba(0,0,0,.82)!important;
    overflow:hidden!important;
  }

  /* Benefits: one column, two cards per page, horizontal page shift */
  .benefits-screen .section-inner{
    gap:14px!important;
  }

  .benefits-screen .section-head{
    margin:0!important;
  }

  .benefits-screen h2{
    font-size:clamp(34px,10vw,48px)!important;
    line-height:.9!important;
    max-width:360px!important;
  }

  .benefit-grid{
    display:grid!important;
    grid-auto-flow:column!important;
    grid-template-columns:repeat(2, calc(100vw - 36px))!important;
    grid-template-rows:repeat(2, minmax(0, 1fr))!important;
    gap:16px 18px!important;
    width:max-content!important;
    height:calc(100svh - 250px)!important;
    transform:translate3d(calc(var(--mobile-benefit-page, 0) * -1 * (100vw - 18px)),0,0)!important;
  }

  .benefit-grid article{
    width:calc(100vw - 36px)!important;
    height:auto!important;
    padding:18px!important;
    overflow:hidden!important;
  }

  .benefit-grid article h3{
    font-size:clamp(26px,7.6vw,34px)!important;
    line-height:.93!important;
    max-width:100%!important;
    white-space:normal!important;
  }

  .benefit-grid article p{
    font-size:13px!important;
    line-height:1.35!important;
  }

  .source-note{
    font-size:10px!important;
    line-height:1.25!important;
  }

  /* Characteristics: keep heading in screen and make content meaningful */
  .characteristics-screen{
    padding-top:84px!important;
  }

  .char-stage{
    justify-content:center!important;
  }

  .char-top{
    margin:0 0 14px!important;
  }

  .char-top h2{
    font-size:clamp(32px,9.8vw,48px)!important;
    line-height:.9!important;
    max-width:360px!important;
    margin-left:0!important;
  }

  .char-viewport{
    height:calc(100svh - 245px)!important;
    min-height:360px!important;
  }

  .panel-title h3{
    font-size:clamp(24px,7.3vw,34px)!important;
    line-height:.96!important;
  }

  .comparison-table{
    display:grid!important;
    grid-template-columns:32% 34% 34%!important;
    gap:0!important;
    border:1px solid rgba(255,255,255,.10)!important;
  }

  .comparison-table .th{
    display:block!important;
    background:rgba(255,255,255,.08)!important;
    color:#fff!important;
    text-transform:uppercase!important;
    font-weight:800!important;
    font-size:10px!important;
  }

  .comparison-table .th.accent{
    color:var(--mobile-gold-2)!important;
  }

  .comparison-table > div{
    display:block!important;
    padding:9px 7px!important;
    min-height:42px!important;
    border:0!important;
    border-right:1px solid rgba(255,255,255,.10)!important;
    border-bottom:1px solid rgba(255,255,255,.10)!important;
    background:rgba(255,255,255,.025)!important;
    font-size:10.5px!important;
    line-height:1.25!important;
    overflow-wrap:anywhere!important;
    color:var(--mobile-text)!important;
    text-transform:none!important;
  }

  .comparison-table > div:nth-child(3n+1):not(.th){
    color:var(--mobile-gold-2)!important;
    font-weight:800!important;
    background:rgba(195,144,53,.10)!important;
  }

  .size-main strong{
    font-size:16px!important;
  }

  .size-main p,
  .size-cards article span,
  .metrics-grid article span,
  .ratio-grid article span{
    font-size:12px!important;
  }

  .metrics-grid article strong,
  .ratio-grid article strong{
    font-size:24px!important;
  }

  /* Applications: less shouting, cleaner card text */
  .applications-screen .section-inner{
    gap:18px!important;
  }

  .applications-screen h2{
    font-size:clamp(34px,10vw,48px)!important;
    line-height:.9!important;
  }

  .application-grid{
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
  }

  .application-grid article{
    min-height:104px!important;
    padding:14px 10px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    gap:8px!important;
  }

  .application-grid article b{
    font-size:14px!important;
    line-height:1.05!important;
    margin:0!important;
  }

  .application-grid article span{
    font-size:12px!important;
    line-height:1.25!important;
  }

  /* Supply */
  .supply-screen h2{
    font-size:clamp(34px,10vw,48px)!important;
    line-height:.92!important;
  }

  .supply-grid article{
    min-height:168px!important;
    padding:24px 22px!important;
  }

  .supply-grid article b{
    font-size:17px!important;
  }

  .supply-grid article strong{
    font-family:Montserrat,Arial,sans-serif!important;
    font-size:20px!important;
    line-height:1.1!important;
    white-space:nowrap!important;
    margin:18px 0 12px!important;
  }

  .supply-grid article span{
    font-size:19px!important;
    line-height:1.2!important;
    color:#fff!important;
    font-weight:800!important;
  }

  /* Terms: all three pages slide horizontally, never fade */
  .terms-screen h2{
    font-size:clamp(34px,10vw,48px)!important;
    line-height:.92!important;
  }

  .terms-layout{
    position:relative!important;
    overflow:hidden!important;
  }

  .terms-grid{
    grid-template-columns:1fr!important;
    gap:16px!important;
    position:absolute!important;
    top:calc(50% + 18px)!important;
    left:0!important;
    width:100%!important;
    opacity:1!important;
    pointer-events:auto!important;
    transform:translateY(-50%) translateX(calc(var(--mobile-terms-page, 0) * -1 * 100vw))!important;
  }

  .steps-grid{
    grid-template-columns:repeat(4, calc((100vw - 54px) / 2))!important;
    gap:18px!important;
    width:max-content!important;
    position:absolute!important;
    top:calc(50% + 18px)!important;
    left:0!important;
    opacity:1!important;
    pointer-events:auto!important;
    transform:translateY(-50%) translateX(calc((1 - var(--mobile-terms-page, 0)) * 100vw))!important;
  }

  body.mobile-terms-1 .terms-grid,
  body.mobile-terms-2 .terms-grid{
    opacity:1!important;
    pointer-events:auto!important;
  }

  body.mobile-terms-1 .steps-grid,
  body.mobile-terms-2 .steps-grid{
    opacity:1!important;
    pointer-events:auto!important;
  }

  .price-card,
  .steps-grid article{
    min-height:170px!important;
    padding:22px 18px!important;
  }

  .steps-grid article{
    width:calc((100vw - 54px) / 2)!important;
  }

  .price-card strong{
    font-size:clamp(28px,8vw,36px)!important;
  }

  .steps-grid article b{
    display:block!important;
    font-size:14px!important;
    line-height:1.12!important;
    margin-bottom:10px!important;
  }

  .steps-grid article span{
    font-size:12px!important;
    line-height:1.32!important;
  }

  /* Catalog promo: only copy/buttons/counter on mobile */
  .catalog-screen h2{
    font-size:clamp(34px,10vw,48px)!important;
    line-height:.92!important;
  }

  .catalog-promo-layout{
    justify-content:center!important;
  }

  .catalog-promo-series{
    display:none!important;
  }

  .catalog-promo-copy p:not(.eyebrow){
    font-size:16px!important;
    line-height:1.42!important;
    margin:18px 0!important;
  }

  /* Mobile modal catalog */
  .catalog-tabs{
    position:relative!important;
    display:flex!important;
    gap:8px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-x!important;
    scroll-snap-type:x proximity!important;
    padding:10px 30px 10px 0!important;
  }

  .catalog-tabs::after{
    content:"→"!important;
    position:sticky!important;
    right:0!important;
    flex:0 0 24px!important;
    height:38px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    color:var(--mobile-gold-2)!important;
    background:linear-gradient(90deg, transparent, rgba(0,0,0,.85) 38%)!important;
    pointer-events:none!important;
  }

  .catalog-tabs button{
    min-width:128px!important;
    height:36px!important;
    font-size:9px!important;
    line-height:1.05!important;
    scroll-snap-align:start!important;
  }

  .catalog-heading h3{
    font-size:clamp(24px,7vw,32px)!important;
    line-height:.96!important;
    max-width:300px!important;
  }

  .catalog-heading p{
    font-size:11px!important;
    line-height:1.28!important;
  }

  .catalog-cart,
  .catalog-modal__cart{
    padding:10px 18px 14px!important;
  }

  .catalog-modal__cart .selected-box__head span,
  #modalSelectedCount{
    margin-right:14px!important;
  }

  .color-card__image{
    height:116px!important;
  }
}


/* TASK 2 FIX V2: mobile hero arrow like desktop, but bound to the first mobile sub-screen.
   Hero on mobile is 200svh: first sub-screen is .hero-logo-stack, second is .hero-copy.
   Therefore the arrow must live inside .hero-logo-stack, not on .hero-screen bottom. */
@media (max-width: 820px){
  body.mobile-page-0 .hero-screen::before{
    content:none!important;
    display:none!important;
    animation:none!important;
  }

  .hero-logo-stack{
    position:relative!important;
  }

  .mobile-scroll-arrow{
    position:absolute!important;
    left:50%!important;
    bottom:28px!important;
    width:28px!important;
    height:28px!important;
    z-index:20!important;
    pointer-events:none!important;
    opacity:0!important;
    transform:translateX(-50%)!important;
    transition:opacity .24s ease!important;
  }

  body.mobile-page-0 .mobile-scroll-arrow{
    opacity:.95!important;
  }

  .mobile-scroll-arrow::before{
    content:""!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    border-right:2px solid var(--m-gold2, #e0b95f)!important;
    border-bottom:2px solid var(--m-gold2, #e0b95f)!important;
    transform:translateY(0) rotate(45deg)!important;
    animation:mobileScrollArrowBounce 1.18s ease-in-out infinite!important;
    will-change:transform, opacity!important;
  }

  @keyframes mobileScrollArrowBounce{
    0%,100%{
      transform:translateY(0) rotate(45deg);
      opacity:.5;
    }

    45%{
      transform:translateY(10px) rotate(45deg);
      opacity:1;
    }
  }
}


/* TASK 2 FIX V3: make the mobile hero arrow jump, not just blink.
   The arrow shape stays rotated inside ::before; the outer wrapper moves vertically.
   This avoids transform conflicts between rotate(45deg) and translateY() on mobile browsers. */
@media (max-width: 820px){
  body.mobile-page-0 .mobile-scroll-arrow{
    opacity:.95!important;
    animation:mobileScrollArrowWrapperBounce 1.18s ease-in-out infinite!important;
    will-change:transform, opacity!important;
  }

  .mobile-scroll-arrow::before{
    animation:none!important;
    opacity:1!important;
    transform:rotate(45deg)!important;
  }

  @keyframes mobileScrollArrowWrapperBounce{
    0%,100%{
      transform:translate3d(-50%,0,0)!important;
      opacity:.55;
    }

    45%{
      transform:translate3d(-50%,12px,0)!important;
      opacity:1;
    }
  }
}


/* TASK 2 FIX V4: mobile arrow jump + blink without transform/opacity conflicts.
   Reason: earlier rules use transform/opacity with !important, so keyframes cannot override them.
   This version keeps the wrapper fixed and animates only margin-top + filter on the arrow shape. */
@media (max-width: 820px){
  body.mobile-page-0 .mobile-scroll-arrow{
    opacity:.95!important;
    transform:translateX(-50%)!important;
    animation:none!important;
  }

  body:not(.mobile-page-0) .mobile-scroll-arrow{
    opacity:0!important;
    animation:none!important;
  }

  .mobile-scroll-arrow::before{
    transform:rotate(45deg)!important;
    opacity:1!important;
    animation:mobileScrollArrowShapeBounceV4 1.15s ease-in-out infinite!important;
    will-change:margin-top, filter!important;
  }

  @keyframes mobileScrollArrowShapeBounceV4{
    0%,100%{
      margin-top:0;
      filter:opacity(.48);
    }

    45%{
      margin-top:12px;
      filter:opacity(1);
    }
  }
}


/* TASK 3 FIX: mobile background visibility.
   The background layer was placed at z-index:-10, so on mobile it could sit behind the
   black body background. Keep it behind content, but above the page background. */
@media (max-width: 820px){
  .site-bg{
    z-index:0!important;
    pointer-events:none!important;
    background-color:#070605!important;
    background-image:
      radial-gradient(circle at 8% 0%, rgba(195,135,45,.16), transparent 34%),
      radial-gradient(circle at 100% 4%, rgba(195,135,45,.12), transparent 32%),
      linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.54)),
      url("/images/bg/dark_texture_upscaled_4x.webp")!important;
    background-position:center!important;
    background-size:cover!important;
    background-repeat:no-repeat!important;
  }

  .site-bg::before{
    content:""!important;
    position:absolute!important;
    inset:-10%!important;
    background:url("/images/bg/dark_texture_upscaled_4x.webp") center/cover no-repeat!important;
    transform:rotate(90deg) scale(1.24)!important;
    filter:brightness(1.22) contrast(1.08)!important;
    opacity:.54!important;
    mix-blend-mode:screen!important;
    pointer-events:none!important;
  }

  .site-bg::after{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    background:
      radial-gradient(circle at 0% 0%, rgba(195,135,45,.10), transparent 36%),
      radial-gradient(circle at 100% 0%, rgba(195,135,45,.08), transparent 34%),
      linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.50))!important;
    pointer-events:none!important;
  }

  main{
    position:relative!important;
    z-index:1!important;
  }

  .site-header,
  .menu-panel,
  .mobile-menu-backdrop,
  .catalog-modal{
    position:fixed!important;
  }
}


/* TASK 4 FIX: mobile "Ключевые преимущества".
   Required layout: 2 horizontal pages; each page has 2 vertical cards.
   This overrides the earlier column/grid mix that allowed the second page to peek in and
   made the second page look clipped after horizontal step. */
@media (max-width: 820px){
  .benefits-screen{
    padding-top:76px!important;
    padding-bottom:44px!important;
  }

  .benefits-screen .section-inner{
    width:100%!important;
    max-width:none!important;
    height:100%!important;
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    gap:14px!important;
    overflow:hidden!important;
    margin:0!important;
    padding:0!important;
  }

  .benefits-screen .section-head{
    flex:0 0 auto!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
  }

  .benefits-screen .section-head h2,
  .benefits-screen h2{
    font-size:clamp(32px,9.4vw,46px)!important;
    line-height:.92!important;
    letter-spacing:-.03em!important;
    max-width:330px!important;
    margin:0!important;
  }

  .benefits-screen .source-note{
    flex:0 0 auto!important;
    margin:0!important;
    font-size:11px!important;
    line-height:1.28!important;
    max-width:330px!important;
  }

  .benefit-grid{
    --benefit-page-width:calc(100vw - 36px);
    --benefit-page-gap:18px;

    flex:0 0 auto!important;
    width:max-content!important;
    max-width:none!important;
    height:calc(100svh - 250px)!important;
    min-height:390px!important;
    max-height:500px!important;

    display:grid!important;
    grid-auto-flow:column!important;
    grid-template-rows:repeat(2, minmax(0, 1fr))!important;
    grid-template-columns:none!important;
    grid-auto-columns:var(--benefit-page-width)!important;
    gap:16px var(--benefit-page-gap)!important;

    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    align-items:stretch!important;
    justify-items:stretch!important;
    transform:translate3d(
      calc(var(--mobile-benefit-page, 0) * -1 * (var(--benefit-page-width) + var(--benefit-page-gap))),
      0,
      0
    )!important;
    transition:transform var(--m-duration, 1040ms) var(--m-ease, cubic-bezier(.65,0,.35,1))!important;
    will-change:transform!important;
  }

  .benefit-grid article{
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    box-sizing:border-box!important;

    display:flex!important;
    flex-direction:column!important;
    justify-content:space-between!important;
    gap:12px!important;

    padding:18px 18px 16px!important;
    overflow:hidden!important;
  }

  .benefit-grid article h3{
    font-size:clamp(22px,6.8vw,30px)!important;
    line-height:.96!important;
    letter-spacing:-.02em!important;
    max-width:100%!important;
    margin:0!important;
    white-space:normal!important;
    text-wrap:balance!important;
  }

  .benefit-grid article p{
    margin:0!important;
    font-size:clamp(14px,3.85vw,16px)!important;
    line-height:1.36!important;
    color:var(--m-muted, #cfc4b2)!important;
  }
}

@media (max-width: 380px){
  .benefit-grid{
    height:calc(100svh - 238px)!important;
    min-height:360px!important;
    gap:14px 18px!important;
  }

  .benefit-grid article{
    padding:16px!important;
  }

  .benefit-grid article h3{
    font-size:clamp(21px,6.4vw,28px)!important;
  }

  .benefit-grid article p{
    font-size:13.5px!important;
  }
}


/* TASK 4 FIX V2: hard-lock mobile benefits into 2 full-width horizontal pages.
   Page 1: cards 1-2. Page 2: cards 3-4.
   The previous grid still behaved like 2 narrow columns on some mobile browsers. */
@media (max-width: 820px){
  .benefits-screen{
    padding-left:18px!important;
    padding-right:18px!important;
    overflow:hidden!important;
  }

  .benefits-screen .section-inner{
    width:100%!important;
    max-width:none!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    align-items:stretch!important;
  }

  .benefit-grid{
    --benefit-page-width:calc(100vw - 36px);
    --benefit-gap:18px;

    width:calc((var(--benefit-page-width) * 2) + var(--benefit-gap))!important;
    max-width:none!important;
    min-width:0!important;

    display:grid!important;
    grid-auto-flow:row!important;
    grid-template-columns:repeat(2, var(--benefit-page-width))!important;
    grid-template-rows:repeat(2, minmax(0, 1fr))!important;
    column-gap:var(--benefit-gap)!important;
    row-gap:16px!important;

    height:calc(100svh - 252px)!important;
    min-height:390px!important;
    max-height:500px!important;

    margin:0!important;
    padding:0!important;
    overflow:visible!important;

    transform:translate3d(
      calc(var(--mobile-benefit-page, 0) * -1 * (var(--benefit-page-width) + var(--benefit-gap))),
      0,
      0
    )!important;
    transition:transform var(--m-duration, 1040ms) var(--m-ease, cubic-bezier(.65,0,.35,1))!important;
    will-change:transform!important;
  }

  .benefit-grid article:nth-child(1){
    grid-column:1!important;
    grid-row:1!important;
  }

  .benefit-grid article:nth-child(2){
    grid-column:1!important;
    grid-row:2!important;
  }

  .benefit-grid article:nth-child(3){
    grid-column:2!important;
    grid-row:1!important;
  }

  .benefit-grid article:nth-child(4){
    grid-column:2!important;
    grid-row:2!important;
  }

  .benefit-grid article{
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    padding:18px 18px 16px!important;
  }

  .benefit-grid article h3{
    font-size:clamp(22px,6.6vw,30px)!important;
    line-height:.96!important;
    letter-spacing:-.02em!important;
    margin:0!important;
    max-width:100%!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }

  .benefit-grid article p{
    font-size:clamp(14px,3.85vw,16px)!important;
    line-height:1.36!important;
    margin:0!important;
    max-width:100%!important;
  }
}

@media (max-width: 380px){
  .benefit-grid{
    height:calc(100svh - 240px)!important;
    min-height:360px!important;
  }

  .benefit-grid article h3{
    font-size:clamp(21px,6.2vw,28px)!important;
  }

  .benefit-grid article p{
    font-size:13.5px!important;
  }
}


/* TASK 5 FIX: mobile "Стоимость и условия".
   Required mobile structure:
   page 1: retail + wholesale;
   page 2: conditions 1 + 2;
   page 3: conditions 3 + 4.
   Earlier CSS placed all 4 condition cards on page 2 and left page 3 empty. */
@media (max-width: 820px){
  .terms-screen{
    padding-left:18px!important;
    padding-right:18px!important;
    overflow:hidden!important;
  }

  .terms-screen .section-inner,
  .terms-layout{
    --terms-page-width:calc(100vw - 36px);
    --terms-page-gap:18px;

    width:100%!important;
    max-width:none!important;
    height:100%!important;
    min-height:0!important;
    box-sizing:border-box!important;
    position:relative!important;
    overflow:hidden!important;
  }

  .terms-screen .section-head{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    position:relative!important;
    z-index:2!important;
  }

  .terms-grid,
  .steps-grid{
    position:absolute!important;
    left:0!important;
    right:auto!important;
    top:calc(50% + 24px)!important;

    height:calc(100svh - 315px)!important;
    min-height:360px!important;
    max-height:455px!important;

    margin:0!important;
    padding:0!important;
    opacity:1!important;
    pointer-events:auto!important;

    transition:transform var(--m-duration, 1040ms) var(--m-ease, cubic-bezier(.65,0,.35,1))!important;
    will-change:transform!important;
  }

  .terms-grid{
    width:var(--terms-page-width)!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:repeat(2, minmax(0, 1fr))!important;
    gap:16px!important;
    transform:translate3d(
      calc(var(--mobile-terms-page, 0) * -1 * (var(--terms-page-width) + var(--terms-page-gap))),
      -50%,
      0
    )!important;
  }

  .steps-grid{
    width:calc((var(--terms-page-width) * 2) + var(--terms-page-gap))!important;
    display:grid!important;
    grid-template-columns:repeat(2, var(--terms-page-width))!important;
    grid-template-rows:repeat(2, minmax(0, 1fr))!important;
    column-gap:var(--terms-page-gap)!important;
    row-gap:16px!important;
    transform:translate3d(
      calc((1 - var(--mobile-terms-page, 0)) * (var(--terms-page-width) + var(--terms-page-gap))),
      -50%,
      0
    )!important;
  }

  .steps-grid article:nth-child(1){
    grid-column:1!important;
    grid-row:1!important;
  }

  .steps-grid article:nth-child(2){
    grid-column:1!important;
    grid-row:2!important;
  }

  .steps-grid article:nth-child(3){
    grid-column:2!important;
    grid-row:1!important;
  }

  .steps-grid article:nth-child(4){
    grid-column:2!important;
    grid-row:2!important;
  }

  body.mobile-terms-0 .steps-grid,
  body.mobile-terms-1 .steps-grid,
  body.mobile-terms-2 .steps-grid,
  body.mobile-terms-0 .terms-grid,
  body.mobile-terms-1 .terms-grid,
  body.mobile-terms-2 .terms-grid{
    opacity:1!important;
    pointer-events:auto!important;
  }

  .price-card,
  .steps-grid article{
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    box-sizing:border-box!important;

    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;

    padding:20px 18px!important;
    overflow:hidden!important;
  }

  .price-card strong{
    font-size:clamp(26px,7.8vw,36px)!important;
    line-height:.96!important;
    margin:12px 0 10px!important;
  }

  .price-card span,
  .steps-grid article b{
    font-size:14px!important;
    line-height:1.12!important;
  }

  .steps-grid article b{
    margin-bottom:10px!important;
  }

  .price-card p,
  .steps-grid article span{
    font-size:13px!important;
    line-height:1.32!important;
  }

  .mobile-terms-progress{
    left:0!important;
    right:0!important;
    bottom:72px!important;
    z-index:3!important;
  }
}

@media (max-width: 380px){
  .terms-grid,
  .steps-grid{
    height:calc(100svh - 300px)!important;
    min-height:340px!important;
  }

  .price-card,
  .steps-grid article{
    padding:17px 16px!important;
  }

  .price-card p,
  .steps-grid article span{
    font-size:12.5px!important;
  }
}


/* TASK 5 FIX V2: keep the "Стоимость и условия" heading at the top of the mobile screen.
   The cards are absolutely positioned; the heading must also be pinned explicitly,
   otherwise the old flex centering can place it between the cards. */
@media (max-width: 820px){
  .terms-screen .section-inner,
  .terms-layout{
    display:block!important;
    justify-content:initial!important;
    align-items:initial!important;
  }

  .terms-screen .section-head{
    position:absolute!important;
    top:92px!important;
    left:0!important;
    right:0!important;
    z-index:5!important;
    transform:none!important;
  }

  .terms-screen .section-head .eyebrow{
    margin:0 0 8px!important;
  }

  .terms-screen .section-head h2,
  .terms-screen h2{
    margin:0!important;
    max-width:330px!important;
  }

  .terms-grid,
  .steps-grid{
    top:calc(50% + 44px)!important;
  }
}

@media (max-width: 380px){
  .terms-screen .section-head{
    top:86px!important;
  }

  .terms-grid,
  .steps-grid{
    top:calc(50% + 50px)!important;
  }
}


/* TASK 6 FIX: mobile catalog series scroll indicator.
   Keep only one yellow chevron, remove the duplicated/white indicator and horizontal line. */
@media (max-width: 820px){
  .catalog-modal .catalog-tabs{
    position:relative!important;
    padding:10px 34px 10px 0!important;
  }

  .catalog-modal .catalog-tabs::before{
    content:none!important;
    display:none!important;
  }

  .catalog-modal .catalog-tabs::after{
    content:""!important;
    position:sticky!important;
    right:2px!important;
    top:2px!important;
    flex:0 0 28px!important;
    width:28px!important;
    height:36px!important;
    display:block!important;
    align-self:center!important;
    margin-left:0!important;

    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    pointer-events:none!important;
    z-index:5!important;
  }

  .catalog-modal .catalog-tabs::after{
    background:
      linear-gradient(135deg, transparent 42%, var(--m-gold2, #e0b95f) 43% 57%, transparent 58%),
      linear-gradient(45deg, transparent 42%, var(--m-gold2, #e0b95f) 43% 57%, transparent 58%)!important;
    background-size:14px 14px, 14px 14px!important;
    background-repeat:no-repeat!important;
    background-position:center 9px, center 19px!important;
    transform:translateY(-4px)!important;
  }
}


/* TASK 6 FIX V2: replace the original yellow series indicator, do not add a second one.
   The old yellow indicator was .catalog-modal__side::after. It must be hidden.
   The only remaining indicator is a clean right chevron in .catalog-tabs::after. */
@media (max-width: 820px){
  .catalog-modal__side::after{
    content:none!important;
    display:none!important;
  }

  .catalog-modal .catalog-tabs{
    position:relative!important;
    padding:10px 30px 10px 0!important;
  }

  .catalog-modal .catalog-tabs::before{
    content:none!important;
    display:none!important;
  }

  .catalog-modal .catalog-tabs::after{
    content:"›"!important;
    position:sticky!important;
    right:0!important;
    top:auto!important;

    flex:0 0 26px!important;
    width:26px!important;
    height:36px!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    align-self:center!important;

    margin:0 0 0 -2px!important;
    padding:0!important;

    color:var(--m-gold2, #e0b95f)!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;

    font-family:Arial, sans-serif!important;
    font-size:34px!important;
    font-weight:400!important;
    line-height:1!important;

    transform:translateY(-3px)!important;
    pointer-events:none!important;
    z-index:6!important;
  }
}


/* TASK 6 FIX V3: chevron at the right edge + smaller mobile catalog series heading.
   The previous chevron was still a flex item inside the horizontal tabs flow, so it moved
   together with tabs. It now overlays the tabs row at the right edge. */
@media (max-width: 820px){
  .catalog-modal__side::after{
    content:none!important;
    display:none!important;
  }

  .catalog-modal .catalog-tabs{
    position:relative!important;
    padding:10px 42px 10px 0!important;
    margin-right:0!important;
  }

  .catalog-modal .catalog-tabs::before{
    content:none!important;
    display:none!important;
  }

  .catalog-modal .catalog-tabs::after{
    content:"›"!important;
    position:absolute!important;
    right:8px!important;
    top:50%!important;
    transform:translateY(-58%)!important;

    width:24px!important;
    height:28px!important;
    flex:none!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;

    margin:0!important;
    padding:0!important;

    color:var(--m-gold2, #e0b95f)!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;

    font-family:Arial, sans-serif!important;
    font-size:36px!important;
    font-weight:400!important;
    line-height:1!important;

    pointer-events:none!important;
    z-index:10!important;
  }

  .catalog-modal .catalog-heading h3{
    font-size:clamp(20px, 5.9vw, 27px)!important;
    line-height:1!important;
    letter-spacing:-.02em!important;
    max-width:100%!important;
    margin:0 0 6px!important;
  }

  .catalog-modal .catalog-heading p{
    font-size:11px!important;
    line-height:1.28!important;
    margin:0 0 10px!important;
  }
}


/* TASK 6 FIX V4: chevron is not a tab item anymore.
   Put the only scroll indicator on .catalog-modal__side, outside the horizontal buttons flow.
   Disable every indicator attached to .catalog-tabs. */
@media (max-width: 820px){
  .catalog-modal__side{
    position:relative!important;
  }

  .catalog-modal .catalog-tabs{
    position:relative!important;
    padding:10px 42px 10px 0!important;
    margin-right:0!important;
  }

  .catalog-modal .catalog-tabs::before,
  .catalog-modal .catalog-tabs::after{
    content:none!important;
    display:none!important;
  }

  .catalog-modal__side::after{
    content:"›"!important;
    display:flex!important;
    position:absolute!important;

    right:15px!important;
    bottom:18px!important;
    top:auto!important;
    left:auto!important;

    width:24px!important;
    height:34px!important;
    align-items:center!important;
    justify-content:center!important;

    color:var(--m-gold2, #e0b95f)!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;

    font-family:Arial, sans-serif!important;
    font-size:38px!important;
    font-weight:400!important;
    line-height:1!important;

    transform:none!important;
    opacity:.95!important;
    pointer-events:none!important;
    z-index:12!important;
  }

  .catalog-modal .catalog-heading h3{
    font-size:clamp(20px, 5.7vw, 26px)!important;
    line-height:1!important;
    letter-spacing:-.02em!important;
    max-width:100%!important;
    margin:0 0 6px!important;
  }
}


/* TASK 7 FIX: mobile catalog bottom safe area.
   When selected items are shown, the fixed bottom cart covers the last product cards.
   Add enough scrollable bottom space so the final row can be lifted above the cart. */
@media (max-width: 820px){
  .catalog-modal .catalog-scroll{
    padding-bottom:0!important;
    scroll-padding-bottom:calc(42svh + 150px)!important;
    overscroll-behavior:contain!important;
  }

  .catalog-modal .catalog-grid{
    padding-bottom:calc(42svh + 150px)!important;
  }

  .catalog-modal__cart{
    max-height:42svh!important;
  }

  .catalog-modal__cart .selected-items--modal{
    max-height:18svh!important;
  }
}

@media (max-width: 380px){
  .catalog-modal .catalog-grid{
    padding-bottom:calc(44svh + 150px)!important;
  }

  .catalog-modal__cart{
    max-height:44svh!important;
  }
}


/* TASK 8 FIX: mobile catalog series row visual polish.
   Keep the existing horizontal scroll and the separate right chevron.
   Make category buttons smaller, aligned and less visually overloaded. */
@media (max-width: 820px){
  .catalog-modal .catalog-tabs{
    gap:7px!important;
    height:44px!important;
    min-height:44px!important;
    padding:8px 46px 8px 0!important;
    align-items:center!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
  }

  .catalog-modal .catalog-tabs::-webkit-scrollbar{
    display:none!important;
  }

  .catalog-modal .catalog-tabs button{
    flex:0 0 auto!important;
    min-width:112px!important;
    max-width:152px!important;
    height:34px!important;
    min-height:34px!important;

    padding:0 10px!important;
    box-sizing:border-box!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;

    font-size:8.5px!important;
    line-height:1!important;
    letter-spacing:.015em!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;

    border-width:1px!important;
  }

  .catalog-modal .catalog-tabs button.active{
    min-width:126px!important;
  }

  .catalog-modal .catalog-tabs button:focus-visible{
    outline:1px solid var(--m-gold2, #e0b95f)!important;
    outline-offset:2px!important;
  }

  .catalog-modal__side::after{
    right:13px!important;
    bottom:17px!important;
    width:26px!important;
    height:34px!important;
    font-size:38px!important;
  }
}

@media (max-width: 380px){
  .catalog-modal .catalog-tabs button{
    min-width:104px!important;
    max-width:140px!important;
    font-size:8px!important;
    padding:0 8px!important;
  }

  .catalog-modal .catalog-tabs button.active{
    min-width:116px!important;
  }
}


/* TASK 9 FIX: mobile lead form scroll with selected products.
   The mobile full-screen swiper must not hijack the scroll inside the application form. */
@media (max-width: 820px){
  .lead-screen .lead-form{
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
    touch-action:pan-y!important;
  }

  .lead-screen #selectedItems,
  .lead-screen .selected-items{
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
    touch-action:pan-y!important;
    max-height:150px!important;
  }
}


/* TASK 20 MOBILE: no yellow chevron, compact tabs, looped catalog ribbon. */
@media (max-width: 820px){
  .catalog-modal__side{
    padding:12px 14px 10px!important;
    border-bottom:1px solid rgba(195,144,53,.30)!important;
  }

  .catalog-modal__side::after{
    content:none!important;
    display:none!important;
  }

  .catalog-modal__side h2,
  .catalog-modal__side>.eyebrow,
  .catalog-modal__side>p:not(.eyebrow){
    display:none!important;
  }

  .catalog-modal .catalog-tabs{
    margin-top:0!important;
    height:42px!important;
    min-height:42px!important;
    padding:4px 0 8px!important;
    gap:7px!important;
    scroll-behavior:auto!important;
  }

  .catalog-modal .catalog-tabs button{
    min-width:116px!important;
    max-width:152px!important;
    height:32px!important;
    min-height:32px!important;
    font-size:8.2px!important;
  }

  .catalog-modal__content{
    padding:10px 14px 14px!important;
  }

  .catalog-heading{
    display:none!important;
  }

  .catalog-scroll{
    padding:0!important;
    scroll-behavior:smooth!important;
  }

  #catalogGrid.catalog-loop{
    display:block!important;
    grid-template-columns:none!important;
    gap:0!important;
    padding:0 0 calc(42svh + 150px)!important;
  }

  .catalog-series-section{
    padding:0 0 26px!important;
  }

  .catalog-series-section + .catalog-series-section{
    padding-top:18px!important;
    border-top:1px solid rgba(255,255,255,.10)!important;
  }

  .catalog-series-title{
    margin:0 0 12px!important;
    color:#fff!important;
    font-size:clamp(20px,5.7vw,26px)!important;
    line-height:1!important;
    letter-spacing:-.02em!important;
  }

  .catalog-series-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
  }
}

@media (max-width: 380px){
  #catalogGrid.catalog-loop{
    padding-bottom:calc(44svh + 150px)!important;
  }

  .catalog-modal .catalog-tabs button{
    min-width:108px!important;
    max-width:140px!important;
    font-size:8px!important;
  }
}


/* TASK 21 MOBILE: close catalog by swipe down, no X button. */
@media (max-width: 820px){
  .catalog-modal .catalog-modal__close{
    display:none!important;
  }

  .catalog-modal__panel::before{
    content:""!important;
    position:absolute!important;
    top:7px!important;
    left:50%!important;
    width:46px!important;
    height:4px!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.34)!important;
    transform:translateX(-50%)!important;
    z-index:20!important;
    pointer-events:none!important;
  }

  .catalog-modal__panel{
    touch-action:pan-y!important;
  }
}


/* TASK 22 MOBILE: repeated tab cycles are visible on mobile so the active series can be centered. */
@media (max-width: 820px){
  .catalog-modal .catalog-tabs{
    display:flex!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
  }

  .catalog-modal .catalog-tabs::-webkit-scrollbar{
    display:none!important;
  }

  .catalog-modal .catalog-tabs button{
    display:flex!important;
    flex:0 0 auto!important;
  }
}


/* TASK 25/26 MOBILE: when the user opens the form area, collapse the lead intro and let the form fill the screen.
   The long application flow then scrolls inside .lead-form instead of being pushed below the viewport. */
@media (max-width: 820px){
  body.mobile-mode-lead.mobile-lead-expanded .lead-screen{
    padding-top:74px!important;
    padding-bottom:14px!important;
    justify-content:flex-start!important;
  }

  body.mobile-mode-lead.mobile-lead-expanded .lead-layout{
    height:100%!important;
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    gap:0!important;
  }

  body.mobile-mode-lead.mobile-lead-expanded .lead-copy{
    height:0!important;
    max-height:0!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    opacity:0!important;
    overflow:hidden!important;
    pointer-events:none!important;
  }

  body.mobile-mode-lead.mobile-lead-expanded .lead-copy>*{
    display:none!important;
  }

  body.mobile-mode-lead.mobile-lead-expanded .lead-form{
    flex:1 1 auto!important;
    height:auto!important;
    max-height:none!important;
    min-height:0!important;
    margin:0!important;
    width:100%!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
    touch-action:pan-y!important;
  }
}

@media (max-width: 380px){
  body.mobile-mode-lead.mobile-lead-expanded .lead-screen{
    padding-top:68px!important;
    padding-bottom:10px!important;
  }

  body.mobile-mode-lead.mobile-lead-expanded .lead-form{
    padding:14px!important;
  }
}


/* TASK 27 MOBILE: add a bottom scroll buffer inside the expanded lead form.
   This lets the comment field be pulled higher than the screen center without moving the whole mobile page. */
@media (max-width: 820px){
  body.mobile-mode-lead.mobile-lead-expanded .lead-form{
    padding-bottom:calc(30svh + 16px)!important;
    scroll-padding-bottom:30svh!important;
  }

  body.mobile-mode-lead.mobile-lead-expanded .message-step{
    scroll-margin-bottom:30svh!important;
  }
}

@media (max-width: 380px){
  body.mobile-mode-lead.mobile-lead-expanded .lead-form{
    padding-bottom:calc(34svh + 14px)!important;
    scroll-padding-bottom:34svh!important;
  }

  body.mobile-mode-lead.mobile-lead-expanded .message-step{
    scroll-margin-bottom:34svh!important;
  }
}

/* TASK 0.1: stable mobile typography and compact layouts for short phone viewports.
   Android does not ship Impact, so the previous display stack fell back to a different font
   than desktop emulation. Use the bundled display face and reserve space below the fixed header. */
@media (max-width: 820px){
  :root{
    --display:MedoedDisplay,Montserrat,Arial,sans-serif;
  }

  h1,
  h2,
  h3{
    font-family:var(--display)!important;
    font-synthesis:none!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:none!important;
    text-wrap:balance!important;
  }

  .hero-title{
    font-size:clamp(52px,15.5vw,82px)!important;
    line-height:.86!important;
  }

  .product-copy h2{
    max-width:350px!important;
    font-size:clamp(34px,9.5vw,44px)!important;
    line-height:.9!important;
  }

  .benefits-screen .section-head h2,
  .benefits-screen h2{
    max-width:355px!important;
    font-size:clamp(30px,8.4vw,40px)!important;
    line-height:.94!important;
  }

  .char-top h2{
    font-size:clamp(30px,8.6vw,42px)!important;
    line-height:.94!important;
  }

  .applications-screen h2,
  .supply-screen h2,
  .terms-screen h2{
    font-size:clamp(30px,8.6vw,42px)!important;
    line-height:.94!important;
  }

  .lead-copy h2{
    font-size:clamp(34px,9.6vw,48px)!important;
    line-height:.94!important;
  }
}

@media (max-width: 820px) and (max-height: 760px){
  .product-copy{
    justify-content:flex-start!important;
    padding-top:max(92px,calc(env(safe-area-inset-top) + 78px))!important;
    padding-bottom:14px!important;
  }

  .product-copy h2{
    max-width:330px!important;
    font-size:clamp(31px,8.5vw,38px)!important;
    line-height:.9!important;
  }

  .product-copy h3{
    margin:9px 0 8px!important;
    font-size:18px!important;
    line-height:1.12!important;
  }

  .product-copy p{
    margin:0 0 8px!important;
    font-size:13px!important;
    line-height:1.33!important;
  }

  .mini-facts{
    gap:7px!important;
    margin:9px 0 0!important;
  }

  .mini-facts article{
    padding:11px 13px!important;
  }

  .mini-facts b{
    margin-bottom:4px!important;
    font-size:12px!important;
  }

  .mini-facts span{
    font-size:11px!important;
    line-height:1.22!important;
  }

  .terms-screen .section-head{
    top:82px!important;
  }

  .terms-grid,
  .steps-grid{
    top:calc(50% + 82px)!important;
    height:calc(100svh - 310px)!important;
    min-height:300px!important;
    max-height:390px!important;
  }

  .price-card,
  .steps-grid article{
    padding:16px!important;
  }

  .price-card strong{
    margin:8px 0 7px!important;
    font-size:clamp(24px,7vw,32px)!important;
  }

  .price-card p,
  .steps-grid article span{
    font-size:12px!important;
    line-height:1.28!important;
  }

  .mobile-terms-progress{
    bottom:0!important;
  }
}

/* TASK 0.1 FOLLOW-UP: shared heading position, stable mobile offsets,
   and a compact second product screen for short real-device viewports. */
@media (max-width: 820px){
  :root{
    --mobile-heading-top:84px;
  }

  /* Desktop presentation offsets must not leak into the mobile page stack. */
  .product-screen .section-inner,
  .product-layout,
  .benefits-screen .section-inner,
  .applications-screen .section-inner,
  .supply-screen .section-inner,
  .terms-screen .section-inner,
  .lead-layout,
  .catalog-promo-layout{
    transform:none!important;
  }

  /* Primary mobile headings share one top coordinate below the fixed header. */
  .product-copy,
  .texture-showcase{
    justify-content:flex-start!important;
    padding-top:var(--mobile-heading-top)!important;
    padding-bottom:18px!important;
  }

  .benefits-screen,
  .characteristics-screen,
  .applications-screen,
  .supply-screen,
  .terms-screen,
  .catalog-screen,
  .lead-screen{
    padding:0 18px!important;
    justify-content:flex-start!important;
  }

  .benefits-screen .section-inner,
  .applications-screen .section-inner,
  .supply-screen .section-inner,
  .catalog-screen .section-inner,
  .lead-layout{
    height:100svh!important;
    min-height:100svh!important;
    padding-top:var(--mobile-heading-top)!important;
    padding-bottom:18px!important;
    justify-content:flex-start!important;
  }

  .benefits-screen .section-inner,
  .applications-screen .section-inner,
  .supply-screen .section-inner{
    padding-bottom:28px!important;
  }

  .characteristics-screen .char-stage{
    height:100svh!important;
    min-height:100svh!important;
    padding-top:var(--mobile-heading-top)!important;
    padding-bottom:28px!important;
    justify-content:flex-start!important;
  }

  .terms-screen .section-inner,
  .terms-layout{
    height:100svh!important;
    min-height:100svh!important;
  }

  .terms-screen .section-head{
    top:var(--mobile-heading-top)!important;
  }

  /* Product page 2: keep the title visible and fit all six textures on short phones. */
  .texture-showcase{
    gap:10px!important;
  }

  .texture-title{
    flex:0 0 auto!important;
    margin:0!important;
    font-size:clamp(20px,6vw,24px)!important;
    line-height:1.12!important;
  }

  .texture-strip{
    flex:0 0 auto!important;
  }

  .texture-strip figure{
    grid-template-rows:min(13svh,112px) min(5svh,42px)!important;
  }

  .texture-strip img{
    height:min(13svh,112px)!important;
    min-height:0!important;
    max-height:112px!important;
  }

  .texture-strip figcaption{
    height:min(5svh,42px)!important;
    min-height:0!important;
    max-height:42px!important;
    padding:4px 5px!important;
    font-size:9.5px!important;
    line-height:1.04!important;
  }

  .texture-cta{
    flex:0 0 auto!important;
    width:100%!important;
    height:44px!important;
    margin:0!important;
  }
}

@media (max-width: 380px){
  :root{
    --mobile-heading-top:78px;
  }

  .texture-title{
    font-size:20px!important;
  }

  .texture-strip figure{
    grid-template-rows:min(12.5svh,96px) min(4.8svh,38px)!important;
  }

  .texture-strip img{
    height:min(12.5svh,96px)!important;
    max-height:96px!important;
  }

  .texture-strip figcaption{
    height:min(4.8svh,38px)!important;
    max-height:38px!important;
    font-size:9px!important;
  }
}


/* ===== TASK 0.2: vertical full-screen replacement instead of side movement ===== */
@media (max-width: 820px){
  /* Benefits: both card groups are placed one real viewport apart. */
  .benefits-screen .section-inner{
    overflow:hidden!important;
  }

  .benefit-grid{
    display:grid!important;
    grid-auto-flow:row!important;
    grid-template-columns:1fr!important;
    grid-template-rows:
      calc((100svh - 266px) / 2)
      calc((100svh - 266px) / 2)
      218px
      calc((100svh - 266px) / 2)
      calc((100svh - 266px) / 2)!important;
    grid-auto-columns:auto!important;
    gap:16px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:calc(100svh - 250px)!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    transition:transform var(--m-dur) var(--m-ease)!important;
    will-change:transform!important;
  }

  .benefit-grid article{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:auto!important;
  }

  .benefit-grid article:nth-child(1){grid-column:1!important;grid-row:1!important}
  .benefit-grid article:nth-child(2){grid-column:1!important;grid-row:2!important}
  .benefit-grid article:nth-child(3){grid-column:1!important;grid-row:4!important}
  .benefit-grid article:nth-child(4){grid-column:1!important;grid-row:5!important}

  body.mobile-benefit-0 .benefit-grid{
    transform:translate3d(0,0,0)!important;
  }

  body.mobile-benefit-1 .benefit-grid{
    transform:translate3d(0,-100svh,0)!important;
  }

  /* Characteristics: every panel enters from below and exits upward. */
  .char-track{
    width:100%!important;
    height:100%!important;
    display:flex!important;
    flex-direction:column!important;
    transition:transform var(--m-dur) var(--m-ease)!important;
    will-change:transform!important;
  }

  .char-panel{
    flex:0 0 100%!important;
    width:100%!important;
    height:100%!important;
  }

  body.mobile-char-0 .char-track{transform:translate3d(0,0,0)!important}
  body.mobile-char-1 .char-track{transform:translate3d(0,-100%,0)!important}
  body.mobile-char-2 .char-track{transform:translate3d(0,-200%,0)!important}
  body.mobile-char-3 .char-track{transform:translate3d(0,-300%,0)!important}

  /* Commercial terms: price and both step screens are one vertical viewport deck. */
  .terms-layout{
    overflow:hidden!important;
  }

  .terms-grid,
  .steps-grid{
    position:absolute!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    opacity:1!important;
    pointer-events:auto!important;
    transition:transform var(--m-dur) var(--m-ease)!important;
    will-change:transform!important;
  }

  .terms-grid{
    top:29svh!important;
    height:50svh!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:repeat(2,minmax(0,1fr))!important;
    gap:16px!important;
  }

  .steps-grid{
    top:129svh!important;
    height:calc(200svh - 50svh)!important;
    display:grid!important;
    grid-auto-flow:row!important;
    grid-template-columns:1fr!important;
    grid-template-rows:
      calc((50svh - 16px) / 2)
      calc((50svh - 16px) / 2)
      calc(50svh - 32px)
      calc((50svh - 16px) / 2)
      calc((50svh - 16px) / 2)!important;
    grid-auto-columns:auto!important;
    gap:16px!important;
  }

  .steps-grid article{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
  }

  .steps-grid article:nth-child(1){grid-column:1!important;grid-row:1!important}
  .steps-grid article:nth-child(2){grid-column:1!important;grid-row:2!important}
  .steps-grid article:nth-child(3){grid-column:1!important;grid-row:4!important}
  .steps-grid article:nth-child(4){grid-column:1!important;grid-row:5!important}

  body.mobile-terms-0 .terms-grid,
  body.mobile-terms-0 .steps-grid{
    transform:translate3d(0,0,0)!important;
  }

  body.mobile-terms-1 .terms-grid,
  body.mobile-terms-1 .steps-grid{
    transform:translate3d(0,-100svh,0)!important;
  }

  body.mobile-terms-2 .terms-grid,
  body.mobile-terms-2 .steps-grid{
    transform:translate3d(0,-200svh,0)!important;
  }
}


/* ===== TASK 0.2 REVISION: smoother benefits transition and readable characteristics ===== */
@media (max-width: 820px){
  /* Benefits: outgoing cards fade before they reach the fixed heading area. */
  .benefits-screen .section-head{
    position:relative!important;
    z-index:6!important;
    isolation:isolate!important;
  }


  .benefit-grid{
    position:relative!important;
    z-index:1!important;
  }

  .benefit-grid article{
    transition:opacity 360ms ease,filter 360ms ease!important;
    will-change:opacity!important;
  }

  body.mobile-benefit-0 .benefit-grid article:nth-child(1),
  body.mobile-benefit-0 .benefit-grid article:nth-child(2),
  body.mobile-benefit-1 .benefit-grid article:nth-child(3),
  body.mobile-benefit-1 .benefit-grid article:nth-child(4){
    opacity:1!important;
    filter:none!important;
  }

  body.mobile-benefit-0 .benefit-grid article:nth-child(3),
  body.mobile-benefit-0 .benefit-grid article:nth-child(4),
  body.mobile-benefit-1 .benefit-grid article:nth-child(1),
  body.mobile-benefit-1 .benefit-grid article:nth-child(2){
    opacity:0!important;
    filter:blur(1.5px)!important;
    pointer-events:none!important;
  }

  /* Characteristics: the heading occupies less height; progress is pinned to the bottom. */
  .characteristics-screen .char-stage{
    position:relative!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    gap:8px!important;
    height:100svh!important;
    min-height:100svh!important;
    padding-top:var(--mobile-heading-top)!important;
    padding-bottom:50px!important;
  }

  .characteristics-screen .char-top{
    flex:0 0 auto!important;
    position:static!important;
    margin:0!important;
    padding:0!important;
  }

  .characteristics-screen .char-top h2{
    position:relative!important;
    z-index:5!important;
    max-width:340px!important;
    margin:0!important;
    font-size:clamp(29px,8.3vw,39px)!important;
    line-height:.92!important;
  }

  .characteristics-screen .char-progress{
    position:absolute!important;
    z-index:8!important;
    left:0!important;
    right:0!important;
    bottom:20px!important;
    width:auto!important;
    margin:0!important;
    gap:8px!important;
  }

  .characteristics-screen .char-progress span{
    height:3px!important;
  }

  .characteristics-screen .char-viewport{
    flex:1 1 auto!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    overflow:hidden!important;
  }

  .characteristics-screen .char-track,
  .characteristics-screen .char-panel{
    min-height:0!important;
  }

  .characteristics-screen .panel-shell{
    height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
    overscroll-behavior:none!important;
    padding:12px 14px!important;
  }

  .characteristics-screen .panel-title{
    margin:0 0 9px!important;
  }

  .characteristics-screen .panel-title h3{
    font-size:clamp(22px,6.4vw,30px)!important;
    line-height:.94!important;
  }

  .characteristics-screen .size-main{
    min-height:0!important;
    margin-bottom:7px!important;
    padding:11px 12px!important;
  }

  .characteristics-screen .size-main strong{
    margin:8px 0 7px!important;
    font-size:clamp(18px,5.2vw,23px)!important;
    line-height:1!important;
  }

  .characteristics-screen .size-main p{
    font-size:11px!important;
    line-height:1.28!important;
  }

  .characteristics-screen .size-cards,
  .characteristics-screen .metrics-grid,
  .characteristics-screen .ratio-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
  }

  .characteristics-screen .size-cards article,
  .characteristics-screen .metrics-grid article,
  .characteristics-screen .ratio-grid article{
    min-height:68px!important;
    padding:8px!important;
  }

  .characteristics-screen .size-cards b,
  .characteristics-screen .metrics-grid b,
  .characteristics-screen .ratio-grid b,
  .characteristics-screen .size-main b{
    font-size:9px!important;
    line-height:1.08!important;
  }

  .characteristics-screen .size-cards span{
    font-size:11px!important;
    line-height:1.18!important;
  }

  .characteristics-screen .metrics-grid article strong,
  .characteristics-screen .ratio-grid article strong{
    font-size:18px!important;
    line-height:.96!important;
  }

  .characteristics-screen .metrics-grid article span,
  .characteristics-screen .ratio-grid article span{
    font-size:9px!important;
    line-height:1.16!important;
  }

  .characteristics-screen .comparison-table{
    grid-template-columns:31% 34.5% 34.5%!important;
  }

  .characteristics-screen .comparison-table .th{
    font-size:8px!important;
    line-height:1.08!important;
  }

  .characteristics-screen .comparison-table > div{
    min-height:0!important;
    padding:5px 4px!important;
    font-size:8.7px!important;
    line-height:1.16!important;
  }

  .characteristics-screen .panel-note{
    margin-top:7px!important;
    font-size:9.5px!important;
    line-height:1.2!important;
  }
}

@media (max-width: 820px) and (min-height: 760px){
  .characteristics-screen .char-stage{
    gap:10px!important;
    padding-bottom:54px!important;
  }

  .characteristics-screen .char-top h2{
    font-size:clamp(31px,8.7vw,42px)!important;
  }

  .characteristics-screen .panel-shell{
    padding:15px 16px!important;
  }

  .characteristics-screen .panel-title{
    margin-bottom:11px!important;
  }

  .characteristics-screen .panel-title h3{
    font-size:clamp(24px,6.8vw,33px)!important;
  }

  .characteristics-screen .size-main{
    padding:13px 14px!important;
    margin-bottom:9px!important;
  }

  .characteristics-screen .size-main p{
    font-size:12px!important;
  }

  .characteristics-screen .size-cards,
  .characteristics-screen .metrics-grid,
  .characteristics-screen .ratio-grid{
    gap:8px!important;
  }

  .characteristics-screen .size-cards article,
  .characteristics-screen .metrics-grid article,
  .characteristics-screen .ratio-grid article{
    min-height:76px!important;
    padding:10px!important;
  }

  .characteristics-screen .size-cards b,
  .characteristics-screen .metrics-grid b,
  .characteristics-screen .ratio-grid b,
  .characteristics-screen .size-main b{
    font-size:10px!important;
  }

  .characteristics-screen .size-cards span{
    font-size:12px!important;
  }

  .characteristics-screen .metrics-grid article strong,
  .characteristics-screen .ratio-grid article strong{
    font-size:21px!important;
  }

  .characteristics-screen .metrics-grid article span,
  .characteristics-screen .ratio-grid article span{
    font-size:10px!important;
  }

  .characteristics-screen .comparison-table .th{
    font-size:9px!important;
  }

  .characteristics-screen .comparison-table > div{
    padding:6px 5px!important;
    font-size:9.5px!important;
    line-height:1.18!important;
  }

  .characteristics-screen .panel-note{
    margin-top:9px!important;
    font-size:10.5px!important;
  }
}

/* Very short screens keep a contained fallback scroll, but changing the panel requires a new gesture. */
@media (max-width: 820px) and (max-height: 590px){
  .characteristics-screen .panel-shell{
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
    touch-action:pan-y!important;
  }
}

/* ===== TASK 0.2 REVISION 2: smooth benefits deck and smaller mobile type ===== */
@media (max-width: 820px){
  /* Consistent, more compact mobile typography across every section. */
  h2,
  .product-copy h2,
  .benefits-screen h2,
  .characteristics-screen .char-top h2,
  .applications-screen h2,
  .supply-screen h2,
  .terms-screen h2,
  .catalog-promo-copy h2,
  .lead-copy h2{
    font-size:clamp(31px,8.6vw,41px)!important;
    line-height:.93!important;
    letter-spacing:-.028em!important;
  }

  .hero-title{
    font-size:clamp(48px,14.5vw,72px)!important;
    line-height:.84!important;
  }

  .hero-lead,
  .lead-copy p:not(.eyebrow),
  .catalog-promo-copy p:not(.eyebrow){
    font-size:15px!important;
    line-height:1.42!important;
  }

  .product-copy h3{
    font-size:clamp(18px,5.1vw,22px)!important;
    line-height:1.16!important;
  }

  .texture-title{
    font-size:clamp(18px,5.2vw,21px)!important;
    line-height:1.14!important;
  }

  .characteristics-screen .panel-title h3,
  .catalog-heading h3{
    font-size:clamp(20px,5.8vw,26px)!important;
    line-height:.98!important;
  }

  .application-grid article b,
  .supply-grid article b,
  .price-card span,
  .steps-grid article b{
    font-size:13px!important;
    line-height:1.15!important;
  }

  .supply-grid article strong,
  .price-card strong{
    font-size:clamp(24px,6.9vw,30px)!important;
    line-height:.98!important;
  }

  .catalog-modal__side h2{
    font-size:31px!important;
    line-height:.92!important;
  }

  /* Benefits use a clipped two-screen deck instead of a tall grid with a spacer.
     This removes the fade/filter repaint and keeps the moving cards below the heading. */
  .benefits-screen .section-inner{
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    gap:12px!important;
    height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
  }

  .benefits-screen .section-head{
    position:relative!important;
    z-index:3!important;
    flex:0 0 auto!important;
    width:100%!important;
    margin:0!important;
  }

  .benefits-screen h2{
    max-width:330px!important;
  }

  .benefit-viewport{
    position:relative!important;
    z-index:1!important;
    flex:1 1 auto!important;
    width:100%!important;
    min-height:0!important;
    overflow:hidden!important;
    contain:layout paint!important;
    isolation:isolate!important;
  }

  .benefit-grid{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    gap:0!important;
    margin:0!important;
    overflow:visible!important;
    transform:translate3d(0,0,0)!important;
    transition:transform var(--m-dur) var(--m-ease)!important;
    will-change:transform!important;
    backface-visibility:hidden!important;
    -webkit-backface-visibility:hidden!important;
  }

  body.mobile-benefit-0 .benefit-grid{
    transform:translate3d(0,0,0)!important;
  }

  body.mobile-benefit-1 .benefit-grid{
    transform:translate3d(0,-100%,0)!important;
  }

  .benefit-page{
    flex:0 0 100%!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:repeat(2,minmax(0,1fr))!important;
    gap:16px!important;
    padding:0!important;
    contain:layout paint!important;
  }

  .benefit-grid article,
  body.mobile-benefit-0 .benefit-grid article,
  body.mobile-benefit-1 .benefit-grid article{
    grid-column:auto!important;
    grid-row:auto!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-width:none!important;
    padding:18px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    opacity:1!important;
    filter:none!important;
    pointer-events:auto!important;
    transition:none!important;
    transform:translateZ(0)!important;
    backface-visibility:hidden!important;
    -webkit-backface-visibility:hidden!important;
  }

  .benefit-grid article h3{
    margin:0 0 12px!important;
    color:var(--m-gold2)!important;
    font-family:Montserrat,Arial,sans-serif!important;
    font-size:clamp(17px,4.8vw,21px)!important;
    font-weight:800!important;
    line-height:1.12!important;
    letter-spacing:.01em!important;
    text-transform:uppercase!important;
  }

  .benefit-grid article p{
    margin:0!important;
    color:var(--m-muted)!important;
    font-size:13px!important;
    line-height:1.38!important;
  }

  .benefits-screen .source-note{
    flex:0 0 auto!important;
    margin:0!important;
    font-size:10px!important;
    line-height:1.25!important;
  }
}

@media (max-width: 820px) and (max-height: 700px){
  h2,
  .product-copy h2,
  .benefits-screen h2,
  .characteristics-screen .char-top h2,
  .applications-screen h2,
  .supply-screen h2,
  .terms-screen h2,
  .catalog-promo-copy h2,
  .lead-copy h2{
    font-size:clamp(29px,8vw,37px)!important;
  }

  .hero-title{
    font-size:clamp(44px,13.5vw,64px)!important;
  }

  .benefits-screen .section-inner{
    gap:10px!important;
  }

  .benefit-page{
    gap:12px!important;
  }

  .benefit-grid article{
    padding:15px!important;
  }

  .benefit-grid article h3{
    margin-bottom:9px!important;
    font-size:clamp(16px,4.5vw,19px)!important;
  }

  .benefit-grid article p{
    font-size:12px!important;
    line-height:1.34!important;
  }
}

@media (max-width: 820px){
  body.mobile-benefit-0 .benefit-grid .benefit-page article,
  body.mobile-benefit-1 .benefit-grid .benefit-page article{
    opacity:1!important;
    filter:none!important;
    pointer-events:auto!important;
  }
}

/* ===== CONTENT REVISION: three characteristic panels and five compact application cards ===== */
@media (max-width:820px){
  body.mobile-char-0 .char-track{transform:translate3d(0,0,0)!important}
  body.mobile-char-1 .char-track{transform:translate3d(0,-100%,0)!important}
  body.mobile-char-2 .char-track{transform:translate3d(0,-200%,0)!important}

  .characteristics-screen .sizes-layout--compact{
    display:flex!important;
    height:calc(100% - 38px)!important;
    align-items:center!important;
  }
  .characteristics-screen .sizes-layout--compact .size-cards{
    width:100%!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  .characteristics-screen .sizes-layout--compact .size-cards article{
    min-height:112px!important;
    padding:14px 10px!important;
  }
  .characteristics-screen .sizes-layout--compact .size-cards b{
    font-size:10px!important;
  }
  .characteristics-screen .sizes-layout--compact .size-cards span{
    font-size:13px!important;
    line-height:1.22!important;
  }

  .applications-screen .section-inner{
    display:flex!important;
    flex-direction:column!important;
    height:100svh!important;
    min-height:100svh!important;
    padding-top:var(--mobile-heading-top)!important;
    padding-bottom:24px!important;
    gap:10px!important;
  }
  .applications-screen .section-head{
    flex:0 0 auto!important;
    margin:0!important;
  }
  .application-grid{
    flex:1 1 auto!important;
    min-height:0!important;
    width:100%!important;
    margin:0!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:repeat(5,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .application-grid article{
    min-height:0!important;
    width:100%!important;
    padding:9px 14px!important;
    display:grid!important;
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)!important;
    align-items:center!important;
    gap:12px!important;
    text-align:left!important;
  }
  .application-grid article b{
    font-size:12px!important;
    line-height:1.12!important;
  }
  .application-grid article span{
    margin:0!important;
    font-size:10.5px!important;
    line-height:1.2!important;
  }
  .applications-screen .source-note{
    flex:0 0 auto!important;
    margin:0!important;
    font-size:9px!important;
    line-height:1.18!important;
  }
}

@media (max-width:380px), (max-width:820px) and (max-height:650px){
  .applications-screen .section-inner{gap:7px!important;padding-bottom:18px!important}
  .application-grid{gap:6px!important}
  .application-grid article{padding:7px 10px!important;gap:8px!important}
  .application-grid article b{font-size:11px!important}
  .application-grid article span{font-size:9.5px!important}
  .applications-screen .source-note{font-size:8px!important}
}


/* ===== MOBILE VISUAL REVISION R2: applications and first characteristics panel ===== */
@media (max-width:820px){
  /* Applications: compact editorial cards with a clear reading rhythm. */
  .applications-screen .section-inner{
    gap:12px!important;
  }
  .applications-screen .section-head h2{
    max-width:100%!important;
  }
  .application-grid{
    counter-reset:application-card!important;
    gap:9px!important;
  }
  .application-grid article{
    counter-increment:application-card!important;
    position:relative!important;
    grid-template-columns:42px minmax(0,.88fr) minmax(0,1.12fr)!important;
    gap:11px!important;
    padding:10px 14px 10px 10px!important;
    border-color:rgba(255,255,255,.13)!important;
    border-left:2px solid rgba(224,185,95,.88)!important;
    background:
      linear-gradient(100deg,rgba(195,144,53,.12),rgba(195,144,53,.025) 34%,rgba(12,11,10,.88) 72%)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 10px 24px rgba(0,0,0,.14)!important;
    clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)!important;
  }
  .application-grid article::before{
    content:"0" counter(application-card)!important;
    width:32px!important;
    height:32px!important;
    display:grid!important;
    place-items:center!important;
    justify-self:center!important;
    border:1px solid rgba(224,185,95,.5)!important;
    color:var(--m-gold2)!important;
    font:800 11px/1 Montserrat,Arial,sans-serif!important;
    letter-spacing:.05em!important;
    background:rgba(0,0,0,.24)!important;
  }
  .application-grid article b{
    margin:0!important;
    color:#f0c875!important;
    font-size:11.5px!important;
    line-height:1.12!important;
    letter-spacing:.015em!important;
  }
  .application-grid article span{
    color:#d7cdbd!important;
    font-size:10.5px!important;
    line-height:1.26!important;
  }

  /* First characteristics screen: denser cards, stronger hierarchy, restored note. */
  .characteristics-screen .char-panel:first-child .panel-shell{
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    padding:15px!important;
    background:linear-gradient(155deg,rgba(23,21,18,.94),rgba(8,8,7,.9))!important;
  }
  .characteristics-screen .char-panel:first-child .panel-title{
    margin-bottom:13px!important;
  }
  .characteristics-screen .sizes-layout--compact{
    display:block!important;
    height:auto!important;
    flex:0 0 auto!important;
  }
  .characteristics-screen .sizes-layout--compact .size-cards{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:repeat(2,96px)!important;
    gap:10px!important;
  }
  .characteristics-screen .sizes-layout--compact .size-cards article{
    min-height:0!important;
    height:96px!important;
    padding:14px 15px!important;
    align-content:center!important;
    justify-items:start!important;
    text-align:left!important;
    border-color:rgba(255,255,255,.13)!important;
    background:linear-gradient(145deg,rgba(34,31,27,.92),rgba(13,12,11,.94))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
    clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)!important;
  }
  .characteristics-screen .sizes-layout--compact .size-cards b{
    position:relative!important;
    margin:0 0 8px!important;
    padding-left:13px!important;
    color:var(--m-gold2)!important;
    font-size:9.5px!important;
    letter-spacing:.06em!important;
  }
  .characteristics-screen .sizes-layout--compact .size-cards b::before{
    content:""!important;
    position:absolute!important;
    left:0!important;
    top:50%!important;
    width:6px!important;
    height:6px!important;
    border:1px solid rgba(224,185,95,.9)!important;
    transform:translateY(-50%) rotate(45deg)!important;
  }
  .characteristics-screen .sizes-layout--compact .size-cards span{
    color:#f4eee5!important;
    font-size:13px!important;
    line-height:1.2!important;
  }
  .characteristics-screen .sizes-project-note{
    flex:0 0 auto!important;
    margin:12px 0 0!important;
    padding:11px 12px!important;
    border-left:2px solid var(--m-gold2)!important;
    background:linear-gradient(90deg,rgba(195,144,53,.13),rgba(195,144,53,.025))!important;
    color:#cfc4b2!important;
    font-size:10.5px!important;
    line-height:1.34!important;
    font-weight:600!important;
  }
}

@media (max-width:380px), (max-width:820px) and (max-height:650px){
  .application-grid{gap:6px!important}
  .application-grid article{
    grid-template-columns:34px minmax(0,.9fr) minmax(0,1.1fr)!important;
    gap:8px!important;
    padding:7px 10px 7px 7px!important;
  }
  .application-grid article::before{width:27px!important;height:27px!important;font-size:9px!important}
  .application-grid article b{font-size:10px!important}
  .application-grid article span{font-size:9px!important}

  .characteristics-screen .char-panel:first-child .panel-shell{padding:12px!important}
  .characteristics-screen .sizes-layout--compact .size-cards{
    grid-template-rows:repeat(2,80px)!important;
    gap:7px!important;
  }
  .characteristics-screen .sizes-layout--compact .size-cards article{
    height:80px!important;
    padding:10px 11px!important;
  }
  .characteristics-screen .sizes-layout--compact .size-cards b{font-size:8.5px!important;margin-bottom:6px!important}
  .characteristics-screen .sizes-layout--compact .size-cards span{font-size:11.5px!important}
  .characteristics-screen .sizes-project-note{margin-top:8px!important;padding:8px 10px!important;font-size:9px!important}
}

/* ===== MOBILE UNIFIED NOTE STRIP ===== */
@media (max-width:820px){
  .source-note,
  .panel-note,
  .sizes-project-note,
  .official-note{
    width:100%!important;
    padding:9px 11px!important;
    border:0!important;
    border-left:2px solid var(--m-gold2)!important;
    background:linear-gradient(90deg,rgba(195,144,53,.13),rgba(195,144,53,.025) 72%,rgba(195,144,53,0))!important;
    color:#cfc4b2!important;
    font-weight:600!important;
    clip-path:none!important;
  }
}


/* ===== TASK 2: mobile square structural blocks ===== */
.menu-panel,
.mini-facts article,
.texture-strip,
.benefit-grid article,
.panel-shell,
.application-grid article,
.supply-grid article,
.price-card,
.steps-grid article,
.lead-form,
.selected-box,
.selected-item,
.catalog-modal__panel,
.catalog-modal .color-card,
.catalog-modal .color-card__image,
.catalog-modal .catalog-modal__selected,
.characteristics-screen .sizes-layout--compact .size-cards article {
  clip-path:none!important;
  border-radius:0!important;
}

.catalog-modal .catalog-tabs button {
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)!important;
}

.catalog-modal .btn-to-lead {
  clip-path:none!important;
  border-radius:0!important;
}

.catalog-modal__cart .selected-box__head b {
  margin-left:8px!important;
}

/* ===== PRODUCT MATERIAL REVISION: equal mobile fact cards ===== */
@media (max-width:820px){
  .product-copy .mini-facts{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-auto-rows:minmax(82px,1fr)!important;
    align-items:stretch!important;
    gap:9px!important;
  }

  .product-copy .mini-facts article{
    width:100%!important;
    min-height:82px!important;
    height:100%!important;
    padding:13px 15px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:flex-start!important;
    background:linear-gradient(145deg,rgba(29,27,24,.92),rgba(13,12,11,.94))!important;
    border:1px solid rgba(255,255,255,.13)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
  }

  .product-copy .mini-facts b{
    margin:0 0 6px!important;
    color:var(--m-gold2)!important;
    font-size:11px!important;
    line-height:1.12!important;
    letter-spacing:.04em!important;
  }

  .product-copy .mini-facts span{
    display:block!important;
    color:#d7cdbd!important;
    font-size:10.5px!important;
    line-height:1.25!important;
  }
}

@media (max-width:820px) and (max-height:760px){
  .product-copy .mini-facts{
    grid-auto-rows:68px!important;
    gap:7px!important;
  }

  .product-copy .mini-facts article{
    min-height:68px!important;
    padding:9px 12px!important;
  }

  .product-copy .mini-facts b{
    margin-bottom:4px!important;
    font-size:10px!important;
  }

  .product-copy .mini-facts span{
    font-size:9.5px!important;
    line-height:1.18!important;
  }
}

/* ===== TASK 3.3: minimalist one-column mobile catalog ===== */
@media (max-width:820px){
  .catalog-modal__side{
    padding:12px 14px 9px!important;
    background:rgba(4,4,3,.74)!important;
  }

  .catalog-modal .catalog-tabs{
    height:auto!important;
    min-height:40px!important;
    gap:8px!important;
    padding:3px 0 7px!important;
    scroll-snap-type:x proximity!important;
  }

  .catalog-modal .catalog-tabs button{
    display:flex!important;
    flex:0 0 auto!important;
    min-width:auto!important;
    max-width:none!important;
    height:34px!important;
    padding:0 13px!important;
    font-size:8.5px!important;
    scroll-snap-align:center!important;
  }

  .catalog-modal__content{
    padding:12px 14px 0!important;
  }

  .catalog-modal .catalog-scroll{
    padding:0!important;
    scroll-padding-top:0!important;
    scroll-padding-bottom:88px!important;
  }

  #catalogGrid.catalog-loop{
    padding:0 0 96px!important;
  }

  .catalog-series-section{
    padding:0 0 30px!important;
    scroll-margin-top:0!important;
  }

  .catalog-series-section + .catalog-series-section{
    padding-top:22px!important;
  }

  .catalog-series-title{
    margin:0 0 12px!important;
    font-size:clamp(22px,6.3vw,29px)!important;
    line-height:.98!important;
  }

  .catalog-series-grid{
    grid-template-columns:1fr!important;
    gap:14px!important;
  }

  .catalog-modal .color-card{
    width:100%!important;
    min-height:0!important;
    background:rgba(14,13,12,.90)!important;
    border-color:rgba(255,255,255,.13)!important;
    box-shadow:none!important;
    cursor:default!important;
  }

  .catalog-modal .color-card:hover{
    transform:none!important;
  }

  .catalog-modal .color-card__image{
    width:100%!important;
    height:auto!important;
    aspect-ratio:16/10!important;
    object-fit:cover!important;
    cursor:default!important;
  }

  .catalog-modal .color-card__body{
    min-height:0!important;
    padding:13px 14px 12px!important;
    display:grid!important;
    grid-template-columns:minmax(72px,auto) 1fr!important;
    gap:12px!important;
    align-items:start!important;
  }

  .catalog-modal .color-card__code{
    margin:0!important;
    font-size:12px!important;
    line-height:1.25!important;
  }

  .catalog-modal .color-card__title{
    font-size:12px!important;
    line-height:1.35!important;
  }

  .catalog-modal .color-card__add{
    min-height:46px!important;
    height:auto!important;
    padding:10px 14px!important;
    font-size:10px!important;
    line-height:1.15!important;
    letter-spacing:.055em!important;
  }

  .catalog-modal__cart{
    left:0!important;
    right:0!important;
    bottom:0!important;
    height:auto!important;
    max-height:none!important;
    padding:8px 14px calc(8px + env(safe-area-inset-bottom))!important;
    background:rgba(5,4,3,.97)!important;
    backdrop-filter:blur(12px)!important;
  }

  .catalog-modal__cart .catalog-modal__selected{
    display:grid!important;
    grid-template-columns:auto minmax(150px,1fr)!important;
    grid-template-rows:44px!important;
    gap:12px!important;
    align-items:center!important;
    height:auto!important;
  }

  .catalog-modal__cart .selected-box__head{
    min-width:108px!important;
    height:44px!important;
    margin:0!important;
    padding:0 0 0 8px!important;
    gap:10px!important;
    justify-content:flex-start!important;
  }

  .catalog-modal__cart .selected-box__head b{
    margin-left:0!important;
    font-size:10px!important;
  }

  .catalog-modal__cart .selected-box__head span{
    margin:0!important;
    font-size:28px!important;
    line-height:1!important;
  }

  .catalog-modal__cart .selected-items--modal{
    display:none!important;
  }

  .catalog-modal .btn-to-lead{
    width:100%!important;
    height:44px!important;
    margin:0!important;
    font-size:10px!important;
  }

  .catalog-image-modal{
    display:none!important;
  }
}

/* ===== TASK 6 R2: portaled, keyboard-safe mobile application form ===== */
@media (max-width:820px){
  :root{
    --mobile-visual-height:100dvh;
    --mobile-visual-offset-top:0px;
  }

  /* mobile.js moves this section out of the translated <main>. Keeping the
     request form out of the svh-based page stack prevents keyboard resize from
     multiplying the page offset and exposing an empty screen. */
  body:not(.mobile-mode-lead) > .lead-screen[data-mobile-portaled="true"]{
    display:none!important;
  }

  body.mobile-mode-lead > .lead-screen[data-mobile-portaled="true"]{
    display:flex!important;
    position:fixed!important;
    z-index:58!important;
    top:var(--mobile-visual-offset-top,0px)!important;
    left:0!important;
    right:0!important;
    bottom:auto!important;
    width:100%!important;
    height:var(--mobile-visual-height,100dvh)!important;
    min-height:0!important;
    max-height:none!important;
    padding:74px 16px max(10px,env(safe-area-inset-bottom))!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    overflow:hidden!important;
    border:0!important;
    background:transparent!important;
    transform:none!important;
    transition:none!important;
    contain:layout paint!important;
  }

  body.mobile-mode-lead > .lead-screen[data-mobile-portaled="true"]::after{
    display:none!important;
  }

  body.mobile-mode-lead .lead-layout,
  body.mobile-mode-lead.mobile-lead-expanded .lead-layout{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    flex:1 1 auto!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    gap:10px!important;
    overflow:hidden!important;
    transform:none!important;
    transition:none!important;
  }

  body.mobile-mode-lead .lead-copy,
  body.mobile-mode-lead.mobile-lead-expanded .lead-copy{
    display:block!important;
    flex:0 0 auto!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    opacity:1!important;
    overflow:visible!important;
    pointer-events:auto!important;
    transform:none!important;
    transition:none!important;
  }

  body.mobile-mode-lead .lead-copy > *,
  body.mobile-mode-lead.mobile-lead-expanded .lead-copy > *{
    display:block!important;
  }

  body.mobile-mode-lead .lead-copy h2{
    margin:0!important;
    font-size:clamp(32px,9vw,42px)!important;
    line-height:.92!important;
  }

  body.mobile-mode-lead .lead-copy p:not(.eyebrow){
    max-width:520px!important;
    margin:7px 0 0!important;
    color:var(--m-muted)!important;
    font-size:12px!important;
    line-height:1.3!important;
  }

  body.mobile-mode-lead .lead-badges,
  body.mobile-mode-lead.mobile-lead-expanded .lead-badges{
    display:none!important;
  }

  body.mobile-mode-lead .lead-form,
  body.mobile-mode-lead.mobile-lead-expanded .lead-form{
    display:block!important;
    flex:1 1 auto!important;
    align-self:stretch!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:14px!important;
    padding-bottom:14px!important;
    overflow-x:hidden!important;
    overflow-y:hidden!important;
    overscroll-behavior-y:contain!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-y!important;
    scroll-padding:14px 0 18px!important;
    scrollbar-gutter:auto!important;
    transform:none!important;
    transition:none!important;
  }

  body.mobile-mode-lead .lead-form.is-scrollable{
    overflow-y:auto!important;
  }

  /* There is only one vertical scroller on this screen. */
  body.mobile-mode-lead .lead-form #selectedItems,
  body.mobile-mode-lead .lead-form .selected-items{
    max-height:none!important;
    overflow:visible!important;
    overscroll-behavior:auto!important;
    touch-action:auto!important;
  }

  body.mobile-mode-lead .lead-form input,
  body.mobile-mode-lead .lead-form textarea,
  body.mobile-mode-lead .lead-form select{
    font-size:16px!important;
    line-height:1.25!important;
  }

  body.mobile-mode-lead .lead-form textarea{
    min-height:92px!important;
    resize:vertical!important;
  }

  /* Focus is compacted without changing the section's positioning model. The
     overlay simply becomes shorter with visualViewport and the form scrolls. */
  body.mobile-lead-focused.mobile-mode-lead .lead-layout,
  body.mobile-keyboard-open.mobile-mode-lead .lead-layout{
    gap:7px!important;
  }

  body.mobile-lead-focused.mobile-mode-lead .lead-copy h2,
  body.mobile-keyboard-open.mobile-mode-lead .lead-copy h2{
    font-size:clamp(27px,7.8vw,34px)!important;
  }

  body.mobile-lead-focused.mobile-mode-lead .lead-copy p:not(.eyebrow),
  body.mobile-keyboard-open.mobile-mode-lead .lead-copy p:not(.eyebrow){
    display:none!important;
  }
}

@media (max-width:380px){
  body.mobile-mode-lead > .lead-screen[data-mobile-portaled="true"]{
    padding:68px 12px max(8px,env(safe-area-inset-bottom))!important;
  }

  body.mobile-mode-lead .lead-copy h2{
    font-size:30px!important;
  }

  body.mobile-mode-lead .lead-form,
  body.mobile-mode-lead.mobile-lead-expanded .lead-form{
    padding:12px!important;
  }
}


/* ===== TASK 6 R3: stable lead screen during Android/Yandex keyboard transitions ===== */
@media (max-width:820px){
  :root{
    --mobile-layout-height:100svh;
    --mobile-keyboard-inset:0px;
  }

  /* The request is a separate, opaque visual layer. Hiding the translated main
     prevents other sections from flashing through while the browser animates
     its visual viewport. */
  body.mobile-mode-lead main{
    visibility:hidden!important;
    pointer-events:none!important;
  }

  body.mobile-mode-lead > .lead-screen[data-mobile-portaled="true"]{
    top:0!important;
    bottom:auto!important;
    height:var(--mobile-layout-height,100svh)!important;
    min-height:var(--mobile-layout-height,100svh)!important;
    max-height:var(--mobile-layout-height,100svh)!important;
    background:rgba(0,0,0,.01)!important;
  }

  /* Focus/keyboard state must not change the title, description or gap. The
     visible top of the form therefore remains at exactly the same coordinate
     before, during and after the keyboard animation. */
  body.mobile-lead-focused.mobile-mode-lead .lead-layout,
  body.mobile-keyboard-open.mobile-mode-lead .lead-layout{
    gap:10px!important;
  }

  body.mobile-lead-focused.mobile-mode-lead .lead-copy h2,
  body.mobile-keyboard-open.mobile-mode-lead .lead-copy h2{
    font-size:clamp(32px,9vw,42px)!important;
  }

  body.mobile-lead-focused.mobile-mode-lead .lead-copy p:not(.eyebrow),
  body.mobile-keyboard-open.mobile-mode-lead .lead-copy p:not(.eyebrow){
    display:block!important;
  }

  body.mobile-mode-lead .lead-form,
  body.mobile-mode-lead.mobile-lead-expanded .lead-form{
    padding-bottom:calc(14px + var(--mobile-keyboard-inset,0px))!important;
    scroll-padding-bottom:calc(18px + var(--mobile-keyboard-inset,0px))!important;
    overflow-anchor:none!important;
  }

  body.mobile-mode-lead .lead-form *{
    overflow-anchor:none!important;
  }
}

@media (max-width:380px){
  body.mobile-lead-focused.mobile-mode-lead .lead-copy h2,
  body.mobile-keyboard-open.mobile-mode-lead .lead-copy h2{
    font-size:30px!important;
  }

  body.mobile-mode-lead .lead-form,
  body.mobile-mode-lead.mobile-lead-expanded .lead-form{
    padding-bottom:calc(12px + var(--mobile-keyboard-inset,0px))!important;
  }
}

/* ===== TASK 6 R4: animated entry/exit for the portaled request screen ===== */
@media (max-width:820px){
  /* The form stays outside the translated page stack for keyboard stability,
     but it now behaves visually like the next full-screen section. */
  body:not(.mobile-mode-lead) > .lead-screen[data-mobile-portaled="true"],
  body.mobile-mode-lead > .lead-screen[data-mobile-portaled="true"]{
    display:flex!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translate3d(0,100%,0)!important;
    transition:
      transform var(--m-dur) var(--m-ease),
      visibility 0s linear var(--m-dur)!important;
    will-change:transform!important;
    backface-visibility:hidden!important;
    background:
      radial-gradient(circle at 0% 0%,rgba(195,135,45,.13),transparent 34%),
      radial-gradient(circle at 100% 0%,rgba(195,135,45,.11),transparent 32%),
      linear-gradient(180deg,rgba(0,0,0,.16),rgba(0,0,0,.68)),
      url("/images/bg/dark_texture_upscaled_4x.webp") center/cover no-repeat!important;
  }

  body.mobile-lead-mounted > .lead-screen[data-mobile-portaled="true"]{
    visibility:visible!important;
    transition:
      transform var(--m-dur) var(--m-ease),
      visibility 0s linear 0s!important;
  }

  body.mobile-lead-mounted.mobile-lead-visible > .lead-screen[data-mobile-portaled="true"]{
    transform:translate3d(0,0,0)!important;
    pointer-events:auto!important;
  }

  /* Keep the regular section stack visible while it moves underneath the
     request screen. The request background is opaque, so no content shines
     through once the transition has completed. */
  body.mobile-mode-lead main,
  body.mobile-lead-mounted main{
    visibility:visible!important;
    pointer-events:none!important;
  }
}

@media (prefers-reduced-motion:reduce) and (max-width:820px){
  body:not(.mobile-mode-lead) > .lead-screen[data-mobile-portaled="true"],
  body.mobile-mode-lead > .lead-screen[data-mobile-portaled="true"]{
    transition-duration:1ms!important;
  }
}

/* ===== TASK 6 R5: shared background, stable lead transition and catalog CTA ===== */
@media (max-width:820px){
  /* Keep the portaled request fully laid out even before mobile-mode-lead is
     applied. This removes the one-frame switch from a normal flow element to a
     fixed overlay that caused the visible jerk. */
  body > .lead-screen[data-mobile-portaled="true"]{
    display:flex!important;
    position:fixed!important;
    z-index:58!important;
    top:0!important;
    right:0!important;
    bottom:auto!important;
    left:0!important;
    width:100%!important;
    height:var(--mobile-layout-height,100svh)!important;
    min-height:var(--mobile-layout-height,100svh)!important;
    max-height:var(--mobile-layout-height,100svh)!important;
    padding:74px 16px max(10px,env(safe-area-inset-bottom))!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    overflow:hidden!important;
    border:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translate3d(0,100%,0)!important;
    transition:transform var(--m-dur) var(--m-ease)!important;
    will-change:transform!important;
    backface-visibility:hidden!important;
    contain:layout paint!important;
    isolation:isolate!important;

    /* Same texture and lighting as the common .site-bg layer. */
    background-color:#070605!important;
    background-image:
      radial-gradient(circle at 8% 0%,rgba(195,135,45,.16),transparent 34%),
      radial-gradient(circle at 100% 4%,rgba(195,135,45,.12),transparent 32%),
      linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.54)),
      url("/images/bg/dark_texture_upscaled_4x.webp")!important;
    background-position:center!important;
    background-size:cover!important;
    background-repeat:no-repeat!important;
  }

  body > .lead-screen[data-mobile-portaled="true"]::before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    z-index:0!important;
    inset:-10%!important;
    background:url("/images/bg/dark_texture_upscaled_4x.webp") center/cover no-repeat!important;
    transform:rotate(90deg) scale(1.24)!important;
    filter:brightness(1.22) contrast(1.08)!important;
    opacity:.54!important;
    mix-blend-mode:screen!important;
    pointer-events:none!important;
  }

  body > .lead-screen[data-mobile-portaled="true"]::after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    z-index:0!important;
    inset:0!important;
    width:auto!important;
    height:auto!important;
    background:
      radial-gradient(circle at 0% 0%,rgba(195,135,45,.10),transparent 36%),
      radial-gradient(circle at 100% 0%,rgba(195,135,45,.08),transparent 34%),
      linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.50))!important;
    opacity:1!important;
    pointer-events:none!important;
  }

  body.mobile-lead-mounted > .lead-screen[data-mobile-portaled="true"]{
    visibility:visible!important;
  }

  body.mobile-lead-mounted.mobile-lead-visible > .lead-screen[data-mobile-portaled="true"]{
    transform:translate3d(0,0,0)!important;
    pointer-events:auto!important;
  }

  body > .lead-screen[data-mobile-portaled="true"] .lead-layout{
    position:relative!important;
    z-index:1!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    flex:1 1 auto!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    gap:10px!important;
    overflow:hidden!important;
    transform:none!important;
    transition:none!important;
  }

  body > .lead-screen[data-mobile-portaled="true"] .lead-copy{
    display:block!important;
    flex:0 0 auto!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    opacity:1!important;
    overflow:visible!important;
    pointer-events:auto!important;
    transform:none!important;
    transition:none!important;
  }

  body > .lead-screen[data-mobile-portaled="true"] .lead-copy > *{
    display:block!important;
  }

  body > .lead-screen[data-mobile-portaled="true"] .lead-copy h2{
    margin:0!important;
    font-size:clamp(32px,9vw,42px)!important;
    line-height:.92!important;
  }

  body > .lead-screen[data-mobile-portaled="true"] .lead-copy p:not(.eyebrow){
    display:block!important;
    max-width:520px!important;
    margin:7px 0 0!important;
    color:var(--m-muted)!important;
    font-size:12px!important;
    line-height:1.3!important;
  }

  body > .lead-screen[data-mobile-portaled="true"] .lead-badges{
    display:none!important;
  }

  body > .lead-screen[data-mobile-portaled="true"] .lead-form{
    display:block!important;
    flex:1 1 auto!important;
    align-self:stretch!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:14px!important;
    padding-bottom:calc(14px + var(--mobile-keyboard-inset,0px))!important;
    overflow-x:hidden!important;
    overflow-y:hidden!important;
    overscroll-behavior-y:contain!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-y!important;
    scroll-padding:14px 0 calc(18px + var(--mobile-keyboard-inset,0px))!important;
    scrollbar-gutter:auto!important;
    transform:none!important;
    transition:none!important;
    overflow-anchor:none!important;
  }

  body > .lead-screen[data-mobile-portaled="true"] .lead-form.is-scrollable{
    overflow-y:auto!important;
  }

  body > .lead-screen[data-mobile-portaled="true"] .lead-form *,
  body > .lead-screen[data-mobile-portaled="true"] .lead-form #selectedItems,
  body > .lead-screen[data-mobile-portaled="true"] .lead-form .selected-items{
    overflow-anchor:none!important;
  }

  body > .lead-screen[data-mobile-portaled="true"] .lead-form #selectedItems,
  body > .lead-screen[data-mobile-portaled="true"] .lead-form .selected-items{
    max-height:none!important;
    overflow:visible!important;
    overscroll-behavior:auto!important;
    touch-action:auto!important;
  }

  body > .lead-screen[data-mobile-portaled="true"] .lead-form input,
  body > .lead-screen[data-mobile-portaled="true"] .lead-form textarea,
  body > .lead-screen[data-mobile-portaled="true"] .lead-form select{
    font-size:16px!important;
    line-height:1.25!important;
  }

  body > .lead-screen[data-mobile-portaled="true"] .lead-form textarea{
    min-height:92px!important;
    resize:vertical!important;
  }

  /* The normal page stack stays visible and animates behind the lead layer. */
  body.mobile-lead-mounted main{
    visibility:visible!important;
    pointer-events:none!important;
  }
}

@media (max-width:380px){
  body > .lead-screen[data-mobile-portaled="true"]{
    padding:68px 12px max(8px,env(safe-area-inset-bottom))!important;
  }

  body > .lead-screen[data-mobile-portaled="true"] .lead-copy h2{
    font-size:30px!important;
  }

  body > .lead-screen[data-mobile-portaled="true"] .lead-form{
    padding:12px!important;
    padding-bottom:calc(12px + var(--mobile-keyboard-inset,0px))!important;
  }
}

@media (prefers-reduced-motion:reduce) and (max-width:820px){
  body > .lead-screen[data-mobile-portaled="true"]{
    transition-duration:1ms!important;
  }
}

/* ===== TASK 6 R6: the request uses the single global site background ===== */
@media (max-width:820px){
  /* The background texture belongs only to .site-bg. The request layer must
     stay transparent, otherwise the same image starts again at the section
     boundary and creates a visible seam while the screen moves. */
  body > .lead-screen[data-mobile-portaled="true"]{
    background:transparent!important;
    background-color:transparent!important;
    background-image:none!important;
    background-position:initial!important;
    background-size:auto!important;
    background-repeat:repeat!important;
    isolation:auto!important;
  }

  body > .lead-screen[data-mobile-portaled="true"]::before,
  body > .lead-screen[data-mobile-portaled="true"]::after{
    content:none!important;
    display:none!important;
    background:none!important;
  }
}

/* ===== TASK 6 R7: request is a normal page in the shared mobile screen stack ===== */
@media (max-width:820px){
  :root{
    --mobile-layout-height:100svh;
  }

  html,
  body{
    height:var(--mobile-layout-height)!important;
    min-height:var(--mobile-layout-height)!important;
  }

  /* One translated stack, one background, one transition. The request section
     stays inside <main> exactly like catalog, characteristics and other screens. */
  main{
    position:fixed!important;
    z-index:1!important;
    top:0!important;
    right:0!important;
    bottom:auto!important;
    left:0!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transition:transform var(--m-dur) var(--m-ease)!important;
    will-change:transform!important;
    backface-visibility:hidden!important;
  }

  html body.mobile-mode-lead main,
  html body.mobile-lead-mounted main{
    visibility:visible!important;
    pointer-events:auto!important;
  }

  .screen{
    height:var(--mobile-layout-height)!important;
    min-height:var(--mobile-layout-height)!important;
    max-height:var(--mobile-layout-height)!important;
  }

  .hero-screen,
  .hero-grid,
  .product-screen,
  .product-layout{
    height:calc(var(--mobile-layout-height) + var(--mobile-layout-height))!important;
    min-height:calc(var(--mobile-layout-height) + var(--mobile-layout-height))!important;
    max-height:calc(var(--mobile-layout-height) + var(--mobile-layout-height))!important;
  }

  .hero-logo-stack,
  .hero-copy,
  .product-copy,
  .texture-showcase,
  .benefits-screen .section-inner,
  .characteristics-screen .char-stage,
  .applications-screen .section-inner,
  .catalog-screen .section-inner,
  .lead-layout{
    height:var(--mobile-layout-height)!important;
    min-height:var(--mobile-layout-height)!important;
    max-height:var(--mobile-layout-height)!important;
  }

  body.mobile-page-0 .hero-screen::before{
    top:calc(var(--mobile-layout-height) - 72px)!important;
  }

  body.mobile-benefit-1 .benefit-grid{
    /* Move exactly one benefit page. The benefit viewport is shorter than the
       full mobile screen, so using --mobile-layout-height skipped the first
       card of page two. */
    transform:translate3d(0,-100%,0)!important;
  }

  /* The request has no local texture or overlay. The single fixed .site-bg is
     visible through every section, including during the transition. */
  .lead-screen,
  body.mobile-mode-lead .lead-screen{
    display:flex!important;
    position:relative!important;
    z-index:auto!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;
    width:100%!important;
    padding:0 18px!important;
    overflow:hidden!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:none!important;
    transition:none!important;
    contain:none!important;
    isolation:auto!important;
    background:transparent!important;
    background-color:transparent!important;
    background-image:none!important;
  }

  .lead-screen::before{
    content:none!important;
    display:none!important;
  }

  .lead-screen::after{
    background:linear-gradient(90deg,transparent,rgba(195,144,53,.34),transparent)!important;
  }

  body.mobile-mode-lead .lead-layout,
  body.mobile-mode-lead.mobile-lead-expanded .lead-layout{
    flex:0 0 var(--mobile-layout-height)!important;
    width:100%!important;
    margin:0!important;
    padding-top:var(--mobile-heading-top)!important;
    padding-bottom:max(12px,env(safe-area-inset-bottom))!important;
    gap:10px!important;
    overflow:hidden!important;
  }

  body.mobile-mode-lead .lead-copy,
  body.mobile-mode-lead.mobile-lead-expanded .lead-copy{
    flex:0 0 auto!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    opacity:1!important;
    overflow:visible!important;
  }

  body.mobile-mode-lead .lead-copy h2{
    margin:0!important;
    font-size:clamp(32px,9vw,42px)!important;
    line-height:.92!important;
  }

  body.mobile-mode-lead .lead-copy p:not(.eyebrow){
    display:block!important;
    margin:7px 0 0!important;
    font-size:12px!important;
    line-height:1.3!important;
  }

  body.mobile-mode-lead .lead-form,
  body.mobile-mode-lead.mobile-lead-expanded .lead-form{
    flex:1 1 auto!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:14px!important;
    padding-bottom:calc(14px + var(--mobile-keyboard-inset,0px))!important;
    overflow-x:hidden!important;
    overflow-y:hidden!important;
    overscroll-behavior-y:contain!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-y!important;
    scroll-padding:14px 0 calc(18px + var(--mobile-keyboard-inset,0px))!important;
    transform:none!important;
    transition:none!important;
    overflow-anchor:none!important;
  }

  body.mobile-mode-lead .lead-form.is-scrollable{
    overflow-y:auto!important;
  }

  body.mobile-mode-lead .lead-form #selectedItems,
  body.mobile-mode-lead .lead-form .selected-items{
    max-height:none!important;
    overflow:visible!important;
  }

  body.mobile-mode-lead .lead-form input,
  body.mobile-mode-lead .lead-form textarea,
  body.mobile-mode-lead .lead-form select{
    font-size:16px!important;
  }

  /* Old portal-state classes are deliberately inert. */
  body.mobile-lead-mounted .lead-screen,
  body.mobile-lead-mounted.mobile-lead-visible .lead-screen{
    visibility:visible!important;
    pointer-events:auto!important;
    transform:none!important;
  }
}

@media (max-width:380px){
  body.mobile-mode-lead .lead-layout,
  body.mobile-mode-lead.mobile-lead-expanded .lead-layout{
    padding-top:78px!important;
    padding-right:0!important;
    padding-left:0!important;
  }

  body.mobile-mode-lead .lead-copy h2{
    font-size:30px!important;
  }

  body.mobile-mode-lead .lead-form,
  body.mobile-mode-lead.mobile-lead-expanded .lead-form{
    padding:12px!important;
    padding-bottom:calc(12px + var(--mobile-keyboard-inset,0px))!important;
  }
}

/* ===== TASK 6 R8: keep request typography/layout stable during reverse transition ===== */
@media (max-width:820px){
  /* The lead screen remains visible while the common <main> stack animates back
     to the catalog. Its layout must therefore not depend on mobile-mode-lead,
     because that class changes at the beginning of the transition. */
  .lead-screen .lead-layout{
    flex:0 0 var(--mobile-layout-height)!important;
    width:100%!important;
    height:var(--mobile-layout-height)!important;
    min-height:var(--mobile-layout-height)!important;
    max-height:var(--mobile-layout-height)!important;
    margin:0!important;
    padding-top:var(--mobile-heading-top)!important;
    padding-bottom:max(12px,env(safe-area-inset-bottom))!important;
    gap:10px!important;
    overflow:hidden!important;
  }

  .lead-screen .lead-copy{
    flex:0 0 auto!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    opacity:1!important;
    overflow:visible!important;
  }

  .lead-screen .lead-copy h2{
    margin:0!important;
    font-size:clamp(32px,9vw,42px)!important;
    line-height:.92!important;
  }

  .lead-screen .lead-copy p:not(.eyebrow){
    display:block!important;
    margin:7px 0 0!important;
    font-size:12px!important;
    line-height:1.3!important;
  }

  .lead-screen .lead-form{
    flex:1 1 auto!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:14px!important;
    padding-bottom:calc(14px + var(--mobile-keyboard-inset,0px))!important;
    overflow-x:hidden!important;
    overflow-y:hidden!important;
    overscroll-behavior-y:contain!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-y!important;
    scroll-padding:14px 0 calc(18px + var(--mobile-keyboard-inset,0px))!important;
    transform:none!important;
    transition:none!important;
    overflow-anchor:none!important;
  }

  .lead-screen .lead-form.is-scrollable{
    overflow-y:auto!important;
  }

  .lead-screen .lead-form #selectedItems,
  .lead-screen .lead-form .selected-items{
    max-height:none!important;
    overflow:visible!important;
  }

  .lead-screen .lead-form input,
  .lead-screen .lead-form textarea,
  .lead-screen .lead-form select{
    font-size:16px!important;
  }
}

@media (max-width:380px){
  .lead-screen .lead-layout{
    padding-top:78px!important;
    padding-right:0!important;
    padding-left:0!important;
  }

  .lead-screen .lead-copy h2{
    font-size:30px!important;
  }

  .lead-screen .lead-form{
    padding:12px!important;
    padding-bottom:calc(12px + var(--mobile-keyboard-inset,0px))!important;
  }
}


/* ===== TASK 5: selected material textures on mobile ===== */
.texture-strip figcaption{
  flex-direction:column!important;
  gap:1px!important;
}

.texture-strip .texture-code,
.texture-strip .texture-name{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

.texture-strip .texture-code{
  color:var(--m-gold2)!important;
  font-size:8.2px!important;
  line-height:1!important;
  letter-spacing:.02em!important;
}

.texture-strip .texture-name{
  color:#f7efe2!important;
  font-size:8.8px!important;
  line-height:1.04!important;
}

.texture-strip .texture-series{
  display:none!important;
}