/* Clinical aesthetic */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f7f9fc;
  --surface:#ffffff;
  --ink:#22304a;
  --muted:#6b7c93;
  --brand:#1366e2;
  --line:#e6edf5;
  --shadow:0 10px 30px rgba(21, 41, 77, .08);
}
html,body{height:100%}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;}
.container{max-width:1160px;margin:0 auto;padding:0 24px}

.site-header{position:sticky;top:0;background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(12px);z-index:10;border-bottom:1px solid var(--line)}
.nav{display:flex;justify-content:space-between;align-items:center;min-height:80px}
.brand img{height:64px;display:block} /* bigger logo */
.site-header nav a{color:var(--muted);text-decoration:none;margin-left:24px;font-size:15px}
.site-header nav a:hover{color:var(--ink)}

.hero{padding:56px 0 24px;background:linear-gradient(180deg,#eaf3ff 0%, #f7f9fc 50%, #f7f9fc 100%)}
.hero.no-image .hero-inner{display:block}
.hero-copy h1{font-size:52px;line-height:1.12;margin-bottom:10px;letter-spacing:-.6px}
.hero-copy h1 span{color:var(--brand)}
.lead{font-size:19px;color:#425472;margin-top:6px}
.disclaimer-text{color:#71839e;font-size:13px;margin-top:10px}
.cta-row{display:flex;gap:12px;margin-top:16px}
.btn{display:inline-block;padding:12px 18px;border-radius:12px;border:1px solid #cfe1ff;text-decoration:none;color:#0f2245;font-weight:700;background:#fff;box-shadow:var(--shadow)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.ghost{background:#fff}
.btn.lg{padding:14px 22px;font-size:16px}

.section{padding:76px 0;border-top:1px solid var(--line)}
.section.alt{background:#ffffff}
.section h2{font-size:32px;margin-bottom:14px;letter-spacing:-.3px}
.two-col{display:grid;grid-template-columns:1.25fr .75fr;gap:28px;align-items:start}

.image-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.image-card img, .image-card svg{display:block;width:100%;height:auto}
.image-card figcaption{font-size:12.5px;color:#6b7c93;padding:8px 12px;background:#fafcff;border-top:1px solid var(--line)}

.xlist{margin-top:10px}
.xlist li{list-style:none;margin:8px 0;color:#2a3a58}

.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:16px}
.feature{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:var(--shadow)}
.feature h3{font-size:16px;margin-bottom:4px}
.feature p{color:var(--muted);font-size:14px}

.bullets{margin-top:10px}
.bullets li{margin:8px 0}

.pill-cards{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.pill{background:#eef4ff;color:#143a78;border:1px solid #cfe1ff;padding:8px 12px;border-radius:999px;font-weight:600;font-size:13.5px}

.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:12px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:var(--shadow)}
.card img{width:100%;height:168px;object-fit:cover;border-radius:10px;margin-bottom:10px}
.card h3{font-size:18px;margin-bottom:6px}
.card p{color:var(--muted)}

.center-img img{display:block;margin:20px auto;max-width:95%;height:auto}

.site-footer{padding:40px 0;border-top:1px solid var(--line);background:#ffffff}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:24px}
.foot-brand{display:flex;align-items:center;gap:12px}
.foot-brand img{height:48px}

@media (max-width:980px){
  .two-col{grid-template-columns:1fr}
  .cards-3{grid-template-columns:1fr}
  .brand img{height:56px}
  .hero-copy h1{font-size:44px}
}


/* Render check marks for Solution bullets */
.bullets{list-style:none;padding-left:0}
.bullets li{position:relative;padding-left:26px;margin:8px 0}
.bullets li:before{content:"✔";position:absolute;left:0;top:0;color:var(--brand);font-weight:800}


/* --- Team (Pro) Styles --- */
.team-hero.pro{padding:56px 0 24px;background:linear-gradient(180deg,#eaf3ff 0%,#f7f9fc 50%,#f7f9fc 100%)}
.hero-inner-team{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center}
.team-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.team-stats .stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;box-shadow:var(--shadow);text-align:center}
.team-stats .stat strong{display:block;font-size:22px;color:#1366e2}
.team-stats .stat span{font-size:13px;color:#6b7c93}
.hero-art svg{width:100%;height:auto;border-radius:16px;box-shadow:var(--shadow)}

.team-grid.pro{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.card-pro{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:16px;display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden}
.card-pro:after{content:'';position:absolute;inset:auto -40px -40px auto;width:160px;height:160px;background:radial-gradient(closest-side,#eaf3ff,transparent);transform:rotate(25deg);opacity:.7}
.person .headshot{width:160px;height:160px;border-radius:50%;object-fit:cover;align-self:center;box-shadow:0 6px 16px rgba(0,0,0,.08);border:4px solid #fff}
.person-meta{text-align:center}
.person-meta h3{font-size:20px;margin-top:4px}
.person .role{margin-top:2px;color:#1366e2;font-weight:700}
.person .bio{color:#2a3a58;font-size:15px;line-height:1.55}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.tags span{background:#eef4ff;border:1px solid #cfe1ff;color:#143a78;padding:6px 10px;border-radius:999px;font-size:12.5px;font-weight:700}

.ribbons{margin-top:24px}
.ribbon{position:relative}
.ribbon svg{width:100%;height:auto;display:block;border-radius:16px;box-shadow:var(--shadow)}
.ribbon-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10px 20px}
.ribbon-text strong{font-size:18px;color:#0f2245}
.ribbon-text span{color:#465670;font-size:14px;margin-top:4px;max-width:720px}

@media (max-width:980px){
  .hero-inner-team{grid-template-columns:1fr}
  .team-grid.pro{grid-template-columns:1fr}
}

/* ===== Mobile Consistency Pack v2 (safe to append) ===== */
@media (max-width: 980px){
  /* Unify section spacing for all top-level sections */
  section, .section {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
  /* Unify inner side padding */
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Headings scale */
  h1 { font-size: clamp(1.6rem, 6vw, 2rem); line-height: 1.2; }
  h2 { font-size: clamp(1.3rem, 5.2vw, 1.6rem); line-height: 1.3; }
  h3 { font-size: clamp(1.1rem, 4.6vw, 1.25rem); line-height: 1.3; }

  /* Images: full-width by default */
  img { max-width: 100%; height: auto; }
  .hero-art svg { width: 100%; height: 160px; }

  /* Stack any two-column and hero grids */
  .hero-inner, .hero-inner-team, .two-col, .media, .grid-2 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Problem / Solution lists: consistent spacing and bullet alignment */
  .bullets li, .xlist li, ul.checks li, ul.xs li {
    margin: 8px 0 !important;
    line-height: 1.5 !important;
  }
  ul, ol { padding-left: 1.1rem; }

  /* Cards: 1 per row on mobile for consistency */
  .cards-3, .cards-4, .team-grid, .team-grid.pro {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .card, .card-pro, .person.card-pro {
    padding: 14px !important;
    border-radius: 14px !important;
  }
  .person .headshot { width: 120px; height: 120px; }

  /* Use Cases images above text and full width */
  #indications .card img, .use-case img, .usecases img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 10px 0;
  }

  /* Manufacturing section alignment */
  #mfg img { display:block; margin: 0 0 12px 0; }

  /* CTAs: full-width and spaced */
  .btn, .btn.lg { display:block; width:100%; text-align:center; }
  #contact .btn.lg { margin-bottom: 24px; }

  /* Tagline/foot banners slim + aligned */
  .footer-banner, .tagline-banner {
    margin: 20px 16px 8px !important;
    border-radius: 10px 10px 0 0 !important;
  }
  .footer-banner .banner-inner, .tagline-banner .tagline-inner {
    min-height: 52px; padding: 10px 12px;
  }
  .footer-banner .tagline, .tagline-banner .tagline-text {
    font-size: .98rem;
  }

  /* Prevent sideways scroll */
  .copy, p, li { overflow-wrap: break-word; word-break: break-word; }
}

/* Extra-tight phones */
@media (max-width: 600px){
  .person-meta h3 { font-size: 1.05rem; }
}


/* ===== UniDose Mobile Symmetry + Scroll Patch (append-only) ===== */
@media (max-width: 980px) {
  /* 0) Ensure the page can scroll on iOS and nothing locks the height */
  html, body {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  main, .site, .page, .page-wrap, .page-wrapper, .content, .container {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  section, .section {
    height: auto !important;
    min-height: 0 !important;
  }

  /* 1) Make all homepage sections feel equal for seamless scrolling */
  section#exec, section#problem, section#solution, section#mfg, section#indications, section#contact {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* 2) Tighten the hero so it doesn't dwarf other sections */
  .hero {
    padding: 36px 0 16px !important;
  }
  .hero-copy h1 {
    font-size: 36px !important;
    line-height: 1.2 !important;
    margin-bottom: 10px !important;
  }
  .lead {
    font-size: 16px !important;
    line-height: 1.45 !important;
    margin-bottom: 14px !important;
  }
  .cta-row {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .cta-row .btn, .btn.lg {
    width: 100% !important;
    max-width: 320px !important;
    text-align: center !important;
  }
  /* Remove any manual <br> gaps in the opening paragraph on phones */
  #exec p br { display: none; }

  /* 3) Normalize grids, images, and cards */
  .two-col, .hero-inner, .hero-inner-team {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .cards-3 { grid-template-columns: 1fr !important; gap: 16px !important; }
  .card, .card-pro { padding: 14px !important; border-radius: 14px !important; }
  .card img, #indications .card img { width: 100% !important; height: auto !important; }
  #mfg img { width: 100% !important; height: auto !important; margin: 0 0 12px 0 !important; }

  /* 4) Typography alignment */
  h1 { font-size: clamp(1.6rem, 6vw, 2rem); }
  h2 { font-size: clamp(1.3rem, 5.2vw, 1.6rem); }
  h3 { font-size: clamp(1.1rem, 4.6vw, 1.25rem); }

  /* 5) Prevent accidental horizontal scroll from long words */
  .copy, p, li { overflow-wrap: break-word; word-break: break-word; }
}

/* Extra-tight phones */
@media (max-width: 600px){
  .brand img{ height:48px !important; }
  .person .headshot { width: 120px !important; height: 120px !important; }
}


/* --- Footer Mobile Fix: prevent text overlap (v1) --- */
@media (max-width: 980px) {
  .site-footer .footer-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;      /* space between blocks */
  }
  .site-footer .contact-info {
    width: 100% !important;
    font-size: 0.95rem;
    line-height: 1.5;
  }
  .site-footer .small p {
    margin: 0;                 /* tighten margins */
  }
}