/* Реальные примеры сайтов · общий компонент главной и /vozmozhnosti/sajt. */
body.ss-public .ss-site-examples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;align-items:stretch}
body.ss-public .ss-site-card{min-width:0;display:flex;flex-direction:column;background:#fff;border:1px solid var(--ss-line,#dce6eb);border-radius:1rem;overflow:hidden;scroll-margin-top:7rem}
body.ss-public .ss-site-card-heading{display:flex;flex-direction:column;padding:2rem 2rem 1.6rem}
body.ss-public .ss-site-card-heading .ss-site-price{margin-top:auto}
@media(min-width:761px){@supports(grid-template-rows:subgrid){
 body.ss-public .ss-site-examples{grid-template-rows:auto auto auto 1fr;row-gap:0}
 body.ss-public .ss-site-card{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0}
}}
body.ss-public .ss-site-kind{display:block;color:#31596c;font-size:.8125rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;margin-bottom:.8rem}
body.ss-public .ss-site-card--individual .ss-site-kind{color:#765b31}
body.ss-public .ss-site-card h3{font-size:clamp(1.4rem,1.8vw,2rem);line-height:1.2;margin:0 0 1.15rem;max-width:28rem}
body.ss-public .ss-site-price{display:flex;flex-direction:column;gap:.35rem}
body.ss-public .ss-site-price strong{font-size:clamp(1.65rem,2.1vw,2.5rem);line-height:1.2;letter-spacing:-.035em;white-space:nowrap}
body.ss-public .ss-site-price small{font-size:1rem;font-weight:400;letter-spacing:0}
body.ss-public .ss-site-price>span{color:var(--ss-muted,#526676);font-size:.9375rem}
body.ss-public .ss-site-browser{--ss-preview-height:clamp(340px,37vw,620px);position:relative;display:block;margin:0 1.25rem;overflow:hidden;border:1px solid #dce6eb;border-radius:.65rem;text-decoration:none;color:var(--ss-navy,#002647);background:#f2f5f7;isolation:isolate;box-shadow:0 14px 32px -26px #00264780}
body.ss-public .ss-site-browser-bar{display:flex;align-items:center;gap:.7rem;height:2.5rem;padding:0 .9rem;background:#edf2f5;border-bottom:1px solid #dce6eb;font-size:.75rem;color:#526676}
body.ss-public .ss-site-browser-bar>span:nth-child(2){flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
body.ss-public .ss-site-browser-dots{display:flex;gap:4px;flex-shrink:0}
body.ss-public .ss-site-browser-dots i{width:6px;height:6px;border-radius:50%;background:#adbbc5}
body.ss-public .ss-site-viewport{display:block;height:var(--ss-preview-height);overflow:hidden;background:#fff}
body.ss-public .ss-site-viewport img{display:block;width:100%;height:auto;max-width:none;transform:translateY(0);transition:transform 1.1s ease}
body.ss-public .ss-site-browser-open{position:absolute;bottom:1rem;right:1rem;padding:.5rem .8rem;border-radius:.4rem;background:#002647;color:#fff;font-size:.8125rem;box-shadow:0 3px 12px #00264720;pointer-events:none}
body.ss-public .ss-site-caption{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem 1rem;padding:1rem 2rem 0;flex-wrap:wrap}
body.ss-public .ss-site-caption b{font-size:1rem}
body.ss-public .ss-site-caption>span{font-size:.8125rem;color:#526676}
body.ss-public .ss-site-touch-note{display:none}
body.ss-public .ss-site-card-body{display:flex;flex-direction:column;flex:1;padding:1rem 2rem 2rem;gap:1.2rem}
body.ss-public .ss-site-card-body>p{margin:0;font-size:1.0625rem;line-height:1.65}
body.ss-public .ss-site-list{list-style:none;margin:0;padding:0;display:grid;gap:.65rem}
body.ss-public .ss-site-list li{position:relative;padding-left:1.35rem;font-size:1rem;line-height:1.55}
body.ss-public .ss-site-list--detailed{gap:1rem;scroll-margin-top:7rem}
body.ss-public .ss-site-list--detailed li>strong{display:block;margin-bottom:.2rem;font-size:1.0625rem;line-height:1.4}
body.ss-public .ss-site-list--detailed li>span{display:block;color:#526676;font-size:.9375rem;line-height:1.6}
body.ss-public .ss-site-detail{color:#003c5b;text-decoration:underline;text-decoration-color:#9fb9c6;text-underline-offset:3px;white-space:nowrap;font-weight:600}
body.ss-public .ss-site-detail:hover{color:#0b747b;text-decoration-color:currentColor}
body.ss-public .ss-site-roadmap{padding:1.5rem;background:#f3f7f9;border:1px solid #dce6eb;border-radius:.65rem}
body.ss-public .ss-site-roadmap h4{margin:0 0 .6rem;font-size:1.125rem;line-height:1.35}
body.ss-public .ss-site-roadmap>p{font-size:.9375rem;line-height:1.6;color:#526676;margin:0 0 1rem}
body.ss-public .ss-site-roadmap ul{display:grid;gap:1rem;list-style:none;padding:0;margin:0}
body.ss-public .ss-site-roadmap li>a{color:#003c5b;font-weight:600;text-underline-offset:3px;font-size:1rem}
body.ss-public .ss-site-roadmap li>span{display:block;color:#526676;font-size:.9375rem;line-height:1.5;margin-top:.2rem}
body.ss-public .ss-site-separate{border-top:1px solid #dce6eb;margin-top:1.25rem;padding-top:1.25rem;display:grid;gap:.65rem}
body.ss-public .ss-site-separate b{font-size:.8125rem;letter-spacing:.04em;color:#765b31}
body.ss-public .ss-site-separate a{color:#003c5b;font-size:1rem;line-height:1.6;text-underline-offset:3px}
body.ss-public .ss-site-list li:before{content:"";position:absolute;left:.1rem;top:.4rem;width:.4rem;height:.65rem;border-right:2px solid #0b848e;border-bottom:2px solid #0b848e;transform:rotate(45deg)}
body.ss-public .ss-site-actions{display:flex;gap:.75rem;margin-top:auto;padding-top:.4rem;flex-wrap:wrap}
body.ss-public .ss-site-actions .nd-btn{flex:1;min-width:max-content;justify-content:space-between;font-size:.9375rem;padding:.85rem 1rem;gap:.75rem}
body.ss-public .ss-site-transfer{display:flex;align-items:center;gap:1.4rem;margin-top:2rem;padding:2rem;background:#eaf6f8;border:1px solid #d6e9ed;border-radius:1rem;scroll-margin-top:7rem}
body.ss-public .ss-site-transfer-icon{display:grid;place-items:center;width:3.5rem;height:3.5rem;flex:none;background:#fff;border-radius:.7rem}
body.ss-public .ss-site-transfer-icon svg{width:1.8rem;height:1.8rem}
body.ss-public .ss-site-transfer>div{flex:1;min-width:0}
body.ss-public .ss-site-transfer h3{margin:0 0 .6rem;font-size:1.4rem;line-height:1.25}
body.ss-public .ss-site-transfer p{margin:0;font-size:1rem;line-height:1.65}
body.ss-public .ss-site-transfer>.nd-btn{flex:none}
body.ss-public .ss-site-examples--compact .ss-site-browser{--ss-preview-height:clamp(300px,29vw,470px)}
body.ss-public .ss-site-shared-note{margin:1.5rem 0 0;color:#526676;font-size:1rem}
@media(min-width:761px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 body.ss-public .ss-site-browser:is(:hover,:focus-visible) .ss-site-viewport img{transform:translateY(min(0px,calc(-100% + var(--ss-preview-height))));transition:transform 12s linear}
}
@media(max-width:1100px){
 body.ss-public .ss-site-card-heading{padding:1.5rem}
 body.ss-public .ss-site-caption{padding-inline:1.5rem}
 body.ss-public .ss-site-card-body{padding:1rem 1.5rem 1.5rem}
 body.ss-public .ss-site-actions .nd-btn{flex-basis:100%}
 body.ss-public .ss-site-transfer{flex-wrap:wrap}
 body.ss-public .ss-site-transfer>.nd-btn{margin-left:4.9rem}
}
@media(max-width:760px){
 body.ss-public .ss-site-examples{grid-template-columns:1fr;gap:1.5rem}
 body.ss-public .ss-site-browser,body.ss-public .ss-site-examples--compact .ss-site-browser{--ss-preview-height:380px;margin-inline:1rem}
 body.ss-public .ss-site-card-heading{padding:1.5rem 1.25rem}
 body.ss-public .ss-site-card h3{font-size:1.6rem}
 body.ss-public .ss-site-caption{padding-inline:1.25rem}
 body.ss-public .ss-site-card-body{padding:1rem 1.25rem 1.5rem}
 body.ss-public .ss-site-viewport{overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}
 body.ss-public .ss-site-viewport img{transform:none!important;transition:none}
 body.ss-public .ss-site-hover-note{display:none}
 body.ss-public .ss-site-touch-note{display:inline}
 body.ss-public .ss-site-transfer{display:block;padding:1.5rem 1.25rem}
 body.ss-public .ss-site-transfer-icon{width:2.5rem;height:2.5rem;float:left;margin:0 .8rem .6rem 0}
 body.ss-public .ss-site-transfer p{clear:both}
 body.ss-public .ss-site-transfer h3{font-size:1.3rem}
 body.ss-public .ss-site-transfer>.nd-btn{margin:1.25rem 0 0;width:100%;justify-content:space-between}
}
@media(hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){
 body.ss-public .ss-site-viewport{overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}
 body.ss-public .ss-site-viewport img{transform:none!important;transition:none}
 body.ss-public .ss-site-hover-note{display:none}
 body.ss-public .ss-site-touch-note{display:inline}
}
@media(prefers-reduced-motion:reduce){body.ss-public .ss-site-viewport{overflow-y:auto}}

/* Один показательный индивидуальный проект на странице для сетей. */
body.ss-public #primer-proekta{scroll-margin-top:7rem}
body.ss-public .ss-site-examples--featured{display:block}
body.ss-public .ss-site-examples--featured .ss-site-card{display:flex;grid-row:auto}
body.ss-public .ss-site-examples--featured .ss-site-browser{--ss-preview-height:clamp(380px,55vw,620px)}
@media(min-width:1101px){
 body.ss-public .ss-site-examples--featured .ss-site-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto;align-items:start}
 body.ss-public .ss-site-examples--featured .ss-site-card-heading{grid-column:1/-1;grid-row:1;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:2rem;row-gap:.6rem;border-bottom:1px solid #dce6eb}
 body.ss-public .ss-site-examples--featured .ss-site-kind{grid-column:1;grid-row:1;margin:0}
 body.ss-public .ss-site-examples--featured .ss-site-card-heading h3{grid-column:1;grid-row:2;margin:0;max-width:36rem}
 body.ss-public .ss-site-examples--featured .ss-site-price{grid-column:2;grid-row:1/3;align-self:center;margin:0}
 body.ss-public .ss-site-examples--featured .ss-site-browser{grid-column:1;grid-row:2;margin:2rem 0 0 2rem}
 body.ss-public .ss-site-examples--featured .ss-site-caption{grid-column:1;grid-row:3;padding:1rem 0 2rem 2rem}
 body.ss-public .ss-site-examples--featured .ss-site-card-body{grid-column:2;grid-row:2/4;padding:2rem;align-self:stretch}
}