/* ==========================================================================
   Infantis — product visuals stylesheet (August 2026 design refinement)
   Product screenshots, dashboards and illustrative UI blocks.
   ========================================================================== */

.product-stage{background:#eef7f4;overflow:hidden}

/* Device + dashboard scene */
.device-scene{display:grid;grid-template-columns:330px 1fr;align-items:center;gap:38px}
.real-phone{display:block;width:100%;height:auto;border-radius:28px}
.chw-ui.image-only,.mobile-ui.image-only,.trend-ui.image-only{padding:0;background:transparent;border:0;box-shadow:none;min-height:0}
.chw-ui.image-only .real-phone{filter:drop-shadow(0 22px 28px rgba(13,42,58,.18))}

.institution-ui.realistic{overflow-x:auto;border-radius:16px;-webkit-overflow-scrolling:touch}
.institution-ui.realistic img{display:block;width:100%;height:auto;min-width:0;border-radius:16px;box-shadow:0 24px 60px rgba(13,42,58,.16)}

/* Climate scene */
.climate-ui.realistic{display:grid;grid-template-columns:minmax(260px,360px) 1fr;align-items:center;gap:10px}
.climate-ui.realistic>.real-phone{max-width:340px;margin:auto;filter:drop-shadow(0 25px 30px rgba(13,42,58,.18))}
.climate-context{padding:42px}
.climate-context h3{font-size:1.9rem;margin:.55rem 0 1rem;font-family:var(--font-display);font-weight:600;letter-spacing:-.01em}
.climate-context p{font-size:1.04rem;line-height:1.75;color:#506563;max-width:640px}
.climate-points{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px}
.climate-points span{padding:16px;border:1px solid #dbe8e5;border-radius:14px;background:#fff;font-weight:660;font-size:.95rem;color:#244844;box-shadow:0 8px 22px rgba(13,77,70,.05)}

/* Shared UI-block furniture */
.cap,.muted{display:block;color:var(--accessible-teal);font-size:11px;font-weight:780;text-transform:uppercase;letter-spacing:.14em}
.ui-note{text-align:center;font-size:12px;color:#728b87;margin-top:26px}
.ui-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.ui-top h3{margin:5px 0 22px}
.pill{padding:7px 12px;border-radius:999px;background:#f2f6f5;font-size:11px;font-weight:720;color:#3c5a56;white-space:nowrap}
.pill.green{background:#ddf4ed;color:#087565}

/* Evidence dashboard */
.evidence-ui{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 28px 64px rgba(13,77,70,.12);padding:32px;overflow:hidden}
.metric-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.metric-row.four{grid-template-columns:repeat(4,1fr)}
.metric-row>div{padding:18px;border:1px solid var(--line);border-radius:14px;display:grid;gap:2px;background:#fdfefe}
.metric-row span{font-size:10.5px;color:#6e8884;font-weight:640;text-transform:uppercase;letter-spacing:.06em}
.metric-row b{font-size:24px;color:var(--ink);font-family:var(--font-display);font-weight:620}
.metric-row small{font-size:9px;color:#79908d}
.evidence-bottom{display:grid;grid-template-columns:1.7fr 1fr;gap:20px;margin-top:22px}
.evidence-bottom>div{padding:20px;border:1px solid var(--line);border-radius:16px}
.evidence-bottom b{color:var(--ink)}

.hbar{display:grid;grid-template-columns:150px 1fr 44px;gap:12px;align-items:center;margin-top:20px;font-size:11px;color:#4f6b67}
.hbar strong{color:var(--ink);text-align:right}
.hbar i{display:block;height:8px;background:#e7f0ed;border-radius:8px;overflow:hidden}
.hbar em{display:block;height:100%;background:linear-gradient(90deg,var(--teal),#63c4b7);border-radius:8px}

.donut>div{width:135px;height:135px;border-radius:50%;margin:6px auto 10px;display:flex;flex-direction:column;justify-content:center;align-items:center;background:radial-gradient(circle,#fff 54%,transparent 56%),conic-gradient(var(--teal) 0 86%,#e3efeb 86%)}
.donut b{font-size:28px;color:var(--ink);font-family:var(--font-display);font-weight:620}
.donut small{font-size:10px;color:#6e8884}
.donut p{text-align:center;font-size:11.5px;color:#6e8884;margin:0}

/* ---- Responsive --------------------------------------------------------- */
@media(max-width:900px){
  .device-scene{grid-template-columns:1fr}
  .chw-ui.image-only{width:min(360px,100%);margin:auto}
  .metric-row.four{grid-template-columns:1fr 1fr}
  .evidence-bottom{grid-template-columns:1fr}
}
@media(max-width:760px){
  .climate-ui.realistic{grid-template-columns:1fr}
  .climate-context{padding:26px 6px 6px}
  .climate-points{grid-template-columns:1fr}
  .institution-ui.realistic img{min-width:680px}
  .institution-ui.realistic::after{
    content:'Swipe to explore the dashboard';
    position:sticky;left:12px;display:inline-block;margin:10px;padding:6px 11px;
    background:#fff;border:1px solid #dbe8e5;border-radius:999px;font-size:11px;color:#355d58;
  }
}
@media(max-width:620px){
  .evidence-ui{padding:20px}
  .metric-row,.metric-row.four{grid-template-columns:1fr 1fr}
  .hbar{grid-template-columns:1fr;gap:6px}
  .hbar strong{text-align:left}
}