/* Weby extends the approved Satorai palette, typography and controls. */
.webs-hero{display:grid;grid-template-columns:1.12fr 1fr;align-items:center;gap:20px;padding-block:64px 48px}
.webs-hero-copy{position:relative;z-index:1}
.webs-hero h1{font-size:clamp(64px,7.3vw,96px);max-width:10ch;line-height:1.04}
.webs-intro{font-size:19px;max-width:42ch;margin-block:28px}
.webs-hero-art img{width:100%;object-fit:contain}
.webs-hero-art figcaption{font-size:13px;line-height:1.5;text-align:right;padding-right:24px;color:var(--muted);margin-top:-10px}
.webs-proof{padding-block:32px 70px;border-top:1px solid var(--ink);scroll-margin-top:32px}
.webs-proof-intro{display:flex;justify-content:space-between;align-items:end;gap:40px}
.webs-proof-intro h2{font-size:30px;max-width:26ch;line-height:1.15}
.webs-proof-intro>p{font-size:14px;max-width:32ch;color:var(--muted)}
.webs-brands{display:grid;grid-template-columns:1fr 1fr 1fr;gap:50px;margin-top:40px}
.webs-brands h3{font-size:36px;line-height:1.06;min-height:77px;display:flex;align-items:center}
.webs-brands p{font-size:14px;line-height:1.65;max-width:40ch;margin-top:15px;color:var(--muted)}
.webs-offer{background:var(--white);border-top:1px solid var(--line)}
.webs-offer-row{display:grid;grid-template-columns:1fr 1.5fr .65fr;gap:55px;padding-block:38px;border-top:1px solid var(--line);scroll-margin-top:32px}
.webs-offer-row h3{font-size:36px;line-height:1.07}
.webs-offer-row p{font-size:16px}
.webs-offer-row .webs-audience{font-size:14px;color:var(--muted);margin-top:18px;max-width:27ch}
.webs-offer-row ul{padding-left:19px;font-size:14px;color:var(--muted);margin-block:22px 12px}
.webs-offer-row li{padding-left:5px;margin-bottom:9px}
.webs-offer-row .webs-price{font-size:21px;font-weight:600;text-align:right;white-space:nowrap}
.webs-price span{display:block;font-weight:400;font-size:12px;color:var(--muted);margin-top:8px;white-space:normal}
.webs-scope{font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:22px;max-width:none}
.webs-method{background:var(--ink);color:var(--bone);padding-block:95px}
.webs-method-layout{display:grid;grid-template-columns:1fr 1fr;gap:100px}
.webs-method h2{font-size:clamp(40px,4.7vw,64px)}
.webs-method h2 span{color:var(--yellow)}
.webs-method-intro p{font-size:16px;max-width:38ch;color:#cec7bb;margin-top:28px}
.webs-method-intro p+p{font-size:14px;margin-top:20px}
.webs-method-list{margin:0}
.webs-method-list>div{padding-block:25px;border-bottom:1px solid #4d463b}
.webs-method-list>div:first-child{padding-top:0}
.webs-method-list dt{font-family:Bricolage,sans-serif;font-size:26px;font-weight:800;line-height:1.15;letter-spacing:-.025em}
.webs-method-list dd{margin:12px 0 0;font-size:15px;line-height:1.65;color:#cec7bb}
.webs-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:50px;counter-reset:web-step}
.webs-steps li{border-top:1px solid var(--ink);padding-top:24px;counter-increment:web-step}
.webs-steps li::before{content:counter(web-step);display:block;font-size:13px;font-weight:600;margin-bottom:22px;font-variant-numeric:tabular-nums}
.webs-steps h3{font-size:28px}
.webs-steps p{font-size:15px;color:var(--muted);margin-top:18px}
.webs-people{display:flex;gap:60px;flex-wrap:wrap;margin-top:48px}
.webs-people>div{display:flex;gap:16px;align-items:center}
.webs-people img{width:64px;height:64px;object-fit:cover;filter:grayscale(1);border-radius:3px}
.webs-people strong{display:block;font-size:14px}
.webs-people span{display:block;font-size:12px;color:var(--muted)}
.webs-faq{border-top:1px solid var(--line)}
.webs-closing{background:var(--yellow);padding-block:70px}
.webs-closing>.wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:85px;align-items:center}
.webs-closing h2{font-size:clamp(42px,4.6vw,64px);max-width:17ch}
.webs-closing p{font-size:16px;margin-bottom:24px}
.webs-closing .microcopy{font-size:12px;color:#4c3d12;margin:15px 0 0}
@media(max-width:1100px){
 .webs-page .nav-links{gap:18px;margin-right:0}.webs-page .nav-links a{font-size:13px}
 .webs-hero{padding-top:48px}.webs-hero h1{font-size:clamp(62px,7.3vw,80px)}.webs-intro{font-size:17px}
 .webs-offer-row{gap:30px;grid-template-columns:1fr 1.5fr .7fr}
 .webs-method-layout{gap:60px}.webs-closing>.wrap{gap:45px}
}
@media(max-width:760px){
 .webs-hero{grid-template-columns:1fr;gap:10px;padding-block:36px 28px}
 .webs-hero h1{font-size:clamp(51px,11.5vw,76px);max-width:12ch}
 .webs-intro{font-size:16px;margin-block:23px;max-width:40ch}
 .webs-hero .button{font-size:14px;gap:20px;width:100%;max-width:370px}
 .webs-hero-art{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:8px;margin-top:8px}
 .webs-hero-art img{max-height:210px}
 .webs-hero-art figcaption{font-size:12px;text-align:left;padding:0;margin:0;max-width:20ch}
 .webs-proof{padding-block:27px 50px}.webs-proof-intro{display:block}.webs-proof-intro h2{font-size:27px}
 .webs-proof-intro>p{font-size:13px;margin-top:16px;max-width:40ch}
 .webs-brands{grid-template-columns:1fr;gap:0;margin-top:24px}
 .webs-brands article{display:grid;grid-template-columns:.9fr 1.1fr;gap:24px;border-top:1px solid var(--line);padding-block:22px}
 .webs-brands h3{font-size:28px;min-height:0;align-items:start}
 .webs-brands p{font-size:13px;margin:0}
 .webs-offer-row{grid-template-columns:1fr;gap:20px;padding-block:29px}
 .webs-offer-row h3{font-size:33px}.webs-offer-row h3 br{display:none}
 .webs-offer-row .webs-audience{max-width:40ch;font-size:13px;margin-top:12px}
 .webs-offer-row p{font-size:15px}.webs-offer-row ul{font-size:14px;margin-top:17px}
 .webs-offer-row .webs-price{font-size:18px;text-align:left;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
 .webs-price span{margin:0}.webs-offer-row .text-link{font-size:14px}
 .webs-method{padding-block:58px}.webs-method-layout{grid-template-columns:1fr;gap:38px}
 .webs-method h2{font-size:43px}.webs-method-intro p{font-size:15px;max-width:43ch}
 .webs-method-list dt{font-size:25px}.webs-method-list dd{font-size:14px}
 .webs-steps{grid-template-columns:1fr;gap:25px}.webs-steps li{position:relative;padding-left:38px;padding-top:20px}
 .webs-steps li::before{position:absolute;left:0;top:23px;margin:0}.webs-steps h3{font-size:27px}.webs-steps p{font-size:14px;margin-top:13px}
 .webs-people{gap:24px;margin-top:35px}.webs-people>div{width:100%}
 .webs-closing{padding-block:52px}.webs-closing>.wrap{grid-template-columns:1fr;gap:28px}
 .webs-closing h2{font-size:42px}.webs-closing p{font-size:15px}.webs-closing .button{font-size:14px;gap:20px}
}