/* Example business website. Intrinsic proportions keep the miniature readable. */
.card-visual.visual-websites{padding:14px 16px;background:#e9ece8}
.site-demo{container-type:inline-size;position:relative;flex:none;width:100%;max-width:380px;aspect-ratio:1.6;font-family:Arial,Helvetica,sans-serif;color:#202c27}
.site-browser{height:100%;overflow:hidden;border:1px solid #d2d9d3;border-radius:5px;background:white;box-shadow:0 4px 13px #24372b14}
.site-chrome{height:5.5cqw;display:flex;align-items:center;gap:3cqw;background:#f4f5f5;border-bottom:1px solid #e0e4e2;padding:0 2.3cqw}
.site-dots{display:flex;gap:1cqw;align-items:center}.site-dots i{display:block;width:1.2cqw;height:1.2cqw;border-radius:50%;background:#d9ddda}.site-dots i:first-child{background:#ec9087}.site-dots i:nth-child(2){background:#e6c16c}.site-dots i:nth-child(3){background:#94c393}
.site-address{display:flex;align-items:center;justify-content:center;gap:1.5cqw;flex:1;background:#fff;border:1px solid #e5e8e5;border-radius:1cqw;height:3.5cqw;font-size:1.8cqw;color:#626b66;letter-spacing:.1px}.site-address svg{width:2cqw;height:2cqw}.site-reload{font-size:2.8cqw;color:#87918b;line-height:1}
.site-nav{height:9cqw;padding:0 3.5cqw;display:flex;align-items:center;gap:3cqw;background:white}
.site-business-logo{display:flex;align-items:center;gap:1.6cqw;color:#254e3d;flex:none}.site-business-logo>svg{width:4.2cqw;height:4.2cqw;flex:none}.site-business-logo strong{display:block;font-family:Arial,Helvetica,sans-serif;font-size:2.7cqw;letter-spacing:-.08cqw;line-height:1.15}.site-business-logo strong>span{display:block;font-size:1cqw;letter-spacing:.45cqw;margin-top:.7cqw;font-weight:400;color:#7e8981}
.site-nav-links{font-size:1.55cqw;color:#6c756f;white-space:nowrap;margin-left:auto}.site-nav-contact{font-size:1.5cqw;white-space:nowrap;padding:1.6cqw 2cqw;background:#2c5542;color:white;border-radius:.5cqw}
.site-hero{height:35cqw;display:grid;grid-template-columns:51% 49%;background:#f5f4ed;position:relative}
.site-hero-copy{padding:3.8cqw 2cqw 2cqw 4cqw;position:relative;z-index:1}
.site-kicker{font-size:1.1cqw;letter-spacing:.35cqw;line-height:1.3;display:block;color:#6b776b}
.site-hero-copy h3{font-family:Arial,Helvetica,sans-serif;font-weight:600;font-size:6.1cqw;line-height:1.06;letter-spacing:-.3cqw;margin:1.8cqw 0 2cqw;color:#223e2d;white-space:nowrap}
.site-hero-copy p{font-size:1.65cqw;line-height:1.7;color:#70796b;margin:0}
.site-quote{display:inline-flex;align-items:center;justify-content:space-between;gap:4cqw;padding:1.8cqw 2.4cqw;background:#fa731d;color:#26372c;font-size:1.75cqw;font-weight:600;margin-top:2.2cqw;border-radius:.6cqw;line-height:1}
.site-quote>span{font-size:2.5cqw}
.site-project-photo{width:100%;height:100%;object-fit:cover;object-position:55% 50%;max-width:none;border-radius:0}
.site-below{padding:2.1cqw 3.7cqw 2cqw;background:white;height:13cqw;overflow:hidden}
.site-below>strong{font-size:2.2cqw;line-height:1.2;display:block;font-weight:600;letter-spacing:-.03cqw}
.site-below>div{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw;margin-top:1.7cqw}
.site-below>div>span{background:#f5f6f2;border:1px solid #edf0e8;display:flex;align-items:center;justify-content:center;gap:1.4cqw;padding:1.7cqw .8cqw;font-size:1.6cqw;border-radius:.6cqw;white-space:nowrap;line-height:1}
.site-below i{font-size:1.4cqw;color:#84917f;font-style:normal}
.site-notice{position:absolute;right:-1.3cqw;bottom:-1.9cqw;width:51cqw;display:flex;align-items:center;gap:2.3cqw;padding:3cqw;background:white;border:1px solid #dce3db;border-radius:1.5cqw;box-shadow:0 6px 18px #17301c1c;z-index:3;animation:float 6s ease-in-out infinite}
.site-notice-icon{display:grid;place-items:center;width:8cqw;height:8cqw;background:#eaf1e6;border-radius:50%;color:#527545;flex:none}.site-notice-icon svg{width:4.4cqw;height:4.4cqw}
.site-notice strong{display:block;font-size:2.8cqw;line-height:1.4;font-weight:600;white-space:nowrap}.site-notice small{display:block;font-size:1.8cqw;line-height:1.8;color:#7a8574;white-space:nowrap}.site-notice-check{font-size:3cqw;color:#628655;margin-left:auto}
.combo-web .site-demo{max-width:none}.combo-web .site-notice{display:none}.combo-web{position:relative}
.service-large-visual.visual-websites{padding:36px 30px 62px}.service-large-visual .site-demo{max-width:460px}

/* Recognisable social post and publishing queue. Icons belong to the example. */
.card-visual.visual-social-media-management{padding:12px 16px;background:#eeeae6}
.social-preview{container-type:inline-size;position:relative;width:100%;max-width:380px;aspect-ratio:1.6;flex:none;font-family:Arial,Helvetica,sans-serif;color:#262626}
.social-post{position:absolute;left:0;top:0;width:61cqw;height:62.5cqw;background:#fff;border:1px solid #dededc;border-radius:1.5cqw;overflow:hidden;box-shadow:0 4px 12px #362f2910}
.social-account{display:flex;align-items:center;gap:1.8cqw;padding:2.1cqw 2.3cqw;height:10cqw;line-height:1.25}
.social-avatar{display:grid;place-items:center;flex:none;width:6cqw;height:6cqw;border-radius:50%;background:#31563e;color:#fff;font-size:1.7cqw;font-weight:700;border:1px solid #e1e6dc}
.social-account>span:nth-child(2){flex:1;min-width:0}.social-account strong{font-size:2.5cqw;font-weight:600;display:block;line-height:1.4}.social-account small{font-size:1.6cqw;color:#8b8e89;display:block;line-height:1.3}.social-post-menu{font-size:3.8cqw;font-weight:700;letter-spacing:.2cqw;align-self:flex-start;line-height:1}
.social-post-photo{position:relative;width:100%;height:31cqw;background:#e1e5dd;overflow:hidden}
.social-post-photo>img{width:100%;height:100%;object-fit:cover;object-position:55% 60%;max-width:none}
.social-post-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#10231bd6,transparent 80%)}
.social-post-photo>span{position:absolute;left:3cqw;bottom:2.8cqw;z-index:1;font-family:Arial,Helvetica,sans-serif;font-size:4.6cqw;font-weight:600;letter-spacing:-.2cqw;line-height:1.02;color:#fff}
.social-post-tools{display:flex;align-items:center;gap:2.1cqw;padding:1.8cqw 2.5cqw .8cqw;height:6.5cqw}
.social-post-tools svg{width:3.3cqw;height:3.3cqw;flex:none}.social-post-tools .social-bookmark{margin-left:auto}
.social-caption{font-size:2cqw;line-height:1.6;margin:0;padding:0 2.6cqw;color:#555c56;max-width:100%}.social-caption strong{color:#262626;font-size:2cqw;font-weight:600;letter-spacing:0}.social-caption>span{color:#42658a}
.social-planner{position:absolute;right:0;top:13cqw;width:47cqw;background:#fff;border:1px solid #d6dce1;border-radius:1.5cqw;padding:3cqw;box-shadow:0 8px 22px #362f2926;z-index:2;line-height:1.3}
.social-planner-title{display:flex;align-items:center;justify-content:space-between;gap:1.5cqw;padding-bottom:2.4cqw;border-bottom:1px solid #eef0ed}.social-planner-title>strong{font-size:2.9cqw;font-weight:600;letter-spacing:-.04cqw}.social-planner-title>svg{width:3.7cqw;height:3.7cqw;color:#68766b}
.social-planner-sub{display:flex;align-items:center;justify-content:space-between;margin:2cqw 0 1cqw;font-size:1.8cqw;color:#8b948b}
.social-queue-item{display:flex;align-items:center;gap:2cqw;padding:2cqw 0;border-bottom:1px solid #eef1eb}
.social-queue-item>img,.social-text-thumb{width:8.5cqw;height:9cqw;object-fit:cover;flex:none;border-radius:1cqw;border:1px solid #e4e7df}
.social-text-thumb{display:grid;place-content:center;background:#e4ebd8;color:#446140;font-family:Georgia,serif;font-size:2.2cqw;line-height:.95;font-style:italic}
.social-queue-item>div{flex:1;min-width:0}.social-queue-item strong{display:block;font-size:2.35cqw;line-height:1.5;letter-spacing:0;font-weight:600;white-space:nowrap}.social-queue-item small{display:block;font-size:1.7cqw;line-height:1.5;color:#8b948b;white-space:nowrap}
.social-queue-platform{display:flex;align-items:center;gap:1cqw;font-size:1.8cqw;color:#707970;line-height:1.5}
.social-platform{display:inline-flex;align-items:center;justify-content:center;width:2.7cqw;height:2.7cqw;flex:none;border-radius:.7cqw;line-height:1;color:white}.instagram{background:linear-gradient(30deg,#ffcc50,#f13c71 45%,#9348d5 80%)}.instagram>svg{width:2.2cqw;height:2.2cqw}.facebook{background:#1877f2;border-radius:50%;font:bold 3cqw/1 Arial,sans-serif;padding-top:.5cqw}
.social-brand-row{position:absolute;right:2cqw;top:0;display:flex;align-items:center;gap:3cqw;z-index:3}
.social-brand-row>.social-platform{width:10cqw;height:10cqw;border-radius:2.6cqw;box-shadow:0 2px 6px #253b4c14}
.social-brand-row>.instagram>svg{width:8.2cqw;height:8.2cqw}
.social-brand-row>.facebook{border-radius:50%;font-size:11cqw;padding-top:2cqw}
.social-queue-check{width:3.5cqw;height:3.5cqw;flex:none;display:grid;place-items:center;font-size:1.8cqw;background:#eaf4e5;color:#60874f;border-radius:50%}
.social-planner-footer{display:flex;align-items:center;gap:1.3cqw;font-size:2cqw;color:#5d7852;padding:2.3cqw 0 .2cqw;white-space:nowrap}.social-planner-footer>span{font-size:2.6cqw}
.service-large-visual.visual-social-media-management{padding:35px 30px 63px;background:#eeeae6}.service-large-visual .social-preview{max-width:460px}
@media(min-width:621px) and (max-width:800px){.card-visual.visual-websites,.card-visual.visual-social-media-management{padding-left:10px;padding-right:10px}}
@media(max-width:620px){.card-visual.visual-websites,.card-visual.visual-social-media-management{padding:16px 20px}.site-demo,.social-preview{max-width:360px}.service-large-visual.visual-websites,.service-large-visual.visual-social-media-management{padding-left:24px;padding-right:24px;min-height:320px}.site-notice{bottom:-3.5cqw;right:-2cqw}}
@media(max-width:360px){.card-visual.visual-websites,.card-visual.visual-social-media-management{padding-left:16px;padding-right:16px}.service-large-visual.visual-websites,.service-large-visual.visual-social-media-management{padding-left:20px;padding-right:20px;min-height:295px}}
