/* Customer functions: four complete screens with the same hierarchy as the water-ordering flow. */
.consumer-showcase {
    --consumer-ink:#203b61;--consumer-copy:#536b89;--consumer-blue:#1466e8;
    --consumer-tint:#edf5ff;--consumer-line:#dbe7f5;
    padding:76px 0;background:#fff;color:var(--consumer-ink);
}
.consumer-showcase .container { width:var(--sst-wide); }
.consumer-heading { display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:36px; }
.consumer-eyebrow { display:block;color:var(--consumer-blue);font-size:14px;line-height:1.6;margin-bottom:9px;font-weight:500; }
.consumer-heading h2 { font-family:"PingFang SC","Microsoft YaHei",sans-serif;font-size:clamp(30px,2.45vw,44px);font-weight:600;letter-spacing:-.6px;line-height:1.45;margin:0 0 12px; }
.consumer-heading p { color:var(--consumer-copy);font-size:16px;line-height:1.85;margin:0; }
.consumer-heading-link { display:inline-flex;align-items:center;gap:18px;flex-shrink:0;color:var(--consumer-blue);font-size:15px;min-height:44px; }
.consumer-heading-link:hover { text-decoration:underline;text-underline-offset:5px; }
.consumer-screen-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.2vw,48px);padding:36px clamp(22px,2.3vw,48px) 30px;background:var(--consumer-tint);border-radius:10px; }
.consumer-feature { min-width:0; }
.consumer-feature-heading { text-align:center;margin-bottom:25px; }
.consumer-feature-heading>span { display:block;color:var(--consumer-blue);font-size:13px;line-height:1.7;margin-bottom:6px; }
.consumer-feature-heading h3 { color:var(--consumer-ink);font-size:clamp(18px,1.3vw,24px);font-weight:600;line-height:1.5;margin:0; }
.consumer-screen { display:block;width:min(100%,230px);padding:0;border:0;border-radius:0;margin:0 auto;background:transparent;cursor:zoom-in; }
.consumer-feature .consumer-feature-copy { color:var(--consumer-copy);font-size:14px;line-height:1.9;margin:24px auto 0;max-width:290px; }
.consumer-feature-details { list-style:none;padding:18px 0 0;border-top:1px solid var(--consumer-line);margin:18px auto 0;max-width:290px; }
.consumer-feature-details li { position:relative;padding-left:14px;color:var(--consumer-copy);font-size:14px;line-height:1.9; }
.consumer-feature-details li+li { margin-top:8px; }
.consumer-feature-details li::before { content:"";position:absolute;width:4px;height:4px;background:#5590df;border-radius:50%;left:0;top:.8em; }
.consumer-service-strip { display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:30px 0;border-bottom:1px solid var(--consumer-line); }
.consumer-service-strip>div { display:flex;gap:18px;align-items:flex-start; }
.consumer-service-strip>div+div { border-left:1px solid var(--consumer-line);padding-left:40px; }
.consumer-service-icon { display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;background:var(--consumer-tint);border-radius:8px;color:var(--consumer-blue); }
.consumer-service-icon svg { width:24px;height:24px; }
.consumer-service-strip h3 { font-size:17px;font-weight:600;line-height:1.6;margin:0 0 5px;color:var(--consumer-ink); }
.consumer-service-strip p { font-size:14px;line-height:1.8;margin:0;color:var(--consumer-copy); }
.consumer-section-foot { display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:18px;color:var(--consumer-copy);font-size:12px;line-height:1.8; }
.consumer-section-foot p { margin:0; }
.consumer-section-foot>span { flex-shrink:0; }
.consumer-showcase-detail { padding-block:52px 60px; }
.sst-demo .demo-grid-single { grid-template-columns:1fr; }
.sst-demo .demo-artwork-grid-pair { display:flex;justify-content:center;--consumer-demo-gap:clamp(16px,1.3vw,25px);gap:var(--consumer-demo-gap); }
.sst-demo .demo-artwork-grid-pair .demo-artwork { width:calc((100% - 2 * var(--consumer-demo-gap)) / 3); }
.sst-demo .demo-grid-single .demo-artwork-grid { grid-template-columns:repeat(3,minmax(0,1fr));padding-inline:clamp(24px,8vw,190px); }
@media(min-width:1800px) {
    .consumer-screen { width:min(100%,270px); }
    .consumer-feature .consumer-feature-copy,.consumer-feature-details { max-width:330px;font-size:16px; }
    .consumer-feature-details li { font-size:15px; }
}
@media(max-width:1100px) {
    .sst-demo .demo-artwork-grid-pair { --consumer-demo-gap:14px; }
    .consumer-screen-grid { gap:22px;padding-inline:22px; }
    .consumer-feature-heading h3 { font-size:17px; }
    .consumer-feature .consumer-feature-copy { font-size:13px; }
}
@media(max-width:950px) {
    .sst-demo .demo-artwork-grid-pair { --consumer-demo-gap:11px; }
    .consumer-showcase { padding-block:56px; }
    .consumer-heading { gap:22px; }
    .consumer-heading p { font-size:14px; }
    .consumer-heading-link { font-size:14px; }
    .consumer-screen-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 40px;padding:30px; }
    .consumer-feature-heading h3 { font-size:20px; }
    .consumer-feature .consumer-feature-copy { max-width:260px;font-size:14px; }
    .consumer-feature-details { max-width:260px; }
    .consumer-service-strip { gap:22px; }
    .consumer-service-strip>div+div { padding-left:22px; }
    .consumer-section-foot { flex-direction:column;gap:8px; }
}
@media(max-width:680px) {
    .consumer-showcase { padding-block:44px; }
    .consumer-heading { display:block;margin-bottom:24px; }
    .consumer-eyebrow { font-size:12px;margin-bottom:6px; }
    .consumer-heading h2 { font-size:28px;margin-bottom:10px; }
    .consumer-heading-link { margin-top:12px; }
    .consumer-screen-grid { gap:28px 18px;padding:24px 16px 22px;border-radius:8px; }
    .consumer-feature-heading { margin-bottom:18px; }
    .consumer-feature-heading>span { font-size:11px;margin-bottom:5px; }
    .consumer-feature-heading h3 { font-size:16px;letter-spacing:-.4px; }
    .consumer-feature .consumer-feature-copy { margin-top:18px;font-size:13px;line-height:1.8; }
    .consumer-feature-details { padding-top:14px;margin-top:14px; }
    .consumer-feature-details li { font-size:12px;padding-left:11px; }
    .consumer-service-strip { grid-template-columns:1fr;gap:22px;padding-block:24px; }
    .consumer-service-strip>div { gap:14px; }
    .consumer-service-strip>div+div { border:0;padding:0; }
    .consumer-service-strip h3 { font-size:16px; }
    .consumer-service-strip p { font-size:13px; }
    .consumer-section-foot { font-size:11px; }
    .sst-demo .demo-artwork-grid-pair { --consumer-demo-gap:10px; }
    .sst-demo .demo-grid-single .demo-artwork-grid { padding-inline:13px; }
}
@media(max-width:360px) {
    .sst-demo .demo-artwork-grid-pair { --consumer-demo-gap:8px; }
    .consumer-screen-grid { gap:26px 12px;padding-inline:12px; }
    .consumer-feature-heading h3 { font-size:14px; }
}