/* =============================================
   MatraMeds Pharmaceuticals — styles.css
   Responsive: desktop / tablet / mobile
   Breakpoints: 1000px (tablet) / 760px (mobile) / 400px (small phone)
   ============================================= */

:root{
  --bg:#f7f8fc;
  --card:#ffffff;
  --ink:#132238;
  --muted:#54657a;
  --line:#d9e1ec;
  --brand:#0b6fb8;
  --brand-2:#1aa58c;
  --accent:#eef7ff;
  --warning:#fff8e8;
  --shadow:0 16px 40px rgba(18,34,56,.08);
  --radius:22px;
  --max:1180px;
}

/* ── RESET ── */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,#f8fbff 0%, #f7f8fc 35%, #f4f7fb 100%);
  line-height:1.6;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; display:block}

/* ── CONTAINER ── */
.container{width:min(var(--max), calc(100% - 2rem)); margin:0 auto}

/* ── HEADER & NAV ── */
header{
  position:sticky; top:0; z-index:40;
  background:rgba(248,251,255,.92); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(217,225,236,.65);
}
.navbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.75rem 0;
}
.brand{
  display:flex; align-items:center; gap:.75rem;
  font-weight:800; color:var(--ink);
  text-decoration:none; flex-shrink:0;
}
.brand span{
  font-size:1rem; line-height:1.2;
  white-space:nowrap;
}
.brand-mark{
  width:100px !important;
  height:66px !important;
  object-fit:contain;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
  position:static !important;
  overflow:visible !important;
  flex:0 0 auto;
}
.brand-mark:before,
.brand-mark:after{content:none !important;}

/* Nav links — desktop */
.nav-links{
  display:flex; gap:.9rem; flex-wrap:wrap;
  align-items:center; justify-content:flex-end;
}
.nav-links a{
  color:var(--ink); font-weight:600;
  padding:.45rem .35rem; font-size:.95rem;
  white-space:nowrap;
}
.nav-links a:hover{color:var(--brand); text-decoration:none}
.nav-cta{
  background:var(--brand); color:#fff !important;
  padding:.65rem 1.1rem !important; border-radius:999px;
  box-shadow:0 8px 20px rgba(11,111,184,.2);
}

/* Hamburger button — hidden on desktop */
.nav-toggle{
  display:none;
  flex-direction:column; justify-content:center; align-items:center;
  gap:5px; width:44px; height:44px;
  background:none; border:none; cursor:pointer;
  padding:0; border-radius:10px;
  -webkit-tap-highlight-color:transparent;
}
.nav-toggle span{
  display:block; width:22px; height:2px;
  background:var(--ink); border-radius:2px;
  transition:transform .22s, opacity .18s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── HERO ── */
.hero{padding:4rem 0 2.5rem}
.hero-grid{
  display:grid; grid-template-columns:1.15fr .85fr; gap:1.5rem; align-items:stretch;
}
.hero-card,.feature-card,.content-card,.info-card,.stat-card,.form-card,.list-card,.quote-card,.video-card{
  background:var(--card); border:1px solid rgba(217,225,236,.8);
  border-radius:var(--radius); box-shadow:var(--shadow);
}
.hero-copy{
  padding:1.75rem;
  background:linear-gradient(160deg,#fff 0%, #f4fbff 100%);
}
.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  background:#e9f6ff; color:#08568e; border:1px solid #cfe8fa;
  padding:.4rem .8rem; border-radius:999px; font-size:.88rem; font-weight:700;
}
h1{font-size:clamp(2rem,5vw,4rem); line-height:1.08; margin:.8rem 0 .9rem}
h2{font-size:clamp(1.4rem,3vw,2.2rem); line-height:1.18; margin:0 0 .75rem}
h3{font-size:1.1rem; line-height:1.3; margin:0 0 .5rem}
.lead{font-size:1.05rem; color:var(--muted); line-height:1.65}
.hero-actions,.button-row{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.1rem}

/* ── BUTTONS ── */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:700; padding:.8rem 1.1rem; border-radius:999px;
  border:1px solid var(--line); background:#fff; color:var(--ink);
  box-shadow:0 6px 18px rgba(18,34,56,.06);
  font-size:.95rem; min-height:44px;
  -webkit-tap-highlight-color:transparent;
  cursor:pointer;
}
.btn.primary{
  background:linear-gradient(135deg,var(--brand),#0c86d6);
  color:#fff; border-color:transparent;
}

/* ── SECTIONS ── */
section{padding:1rem 0 2.8rem}
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:1rem; margin-bottom:1.1rem; flex-wrap:wrap;
}
.muted{color:var(--muted)}
.small{font-size:.92rem}
.kicker{
  font-weight:800; color:var(--brand);
  text-transform:uppercase; letter-spacing:.06em; font-size:.82rem;
}

/* ── GRIDS ── */
.grid-2,.grid-3,.grid-4{display:grid; gap:1rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* ── CARDS ── */
.feature-card,.info-card,.stat-card,.content-card,.list-card,.quote-card,.form-card{padding:1.25rem}
.stat-card{background:linear-gradient(180deg,#fff 0%, #f8fcff 100%)}
.stat{font-size:clamp(1.6rem,4vw,2rem); font-weight:900; letter-spacing:-.03em}
.tag{
  display:inline-flex; padding:.32rem .62rem;
  background:#eef7ff; color:#0a5f9d; border-radius:999px;
  font-size:.78rem; font-weight:700; margin-bottom:.65rem;
}
.panel{
  background:linear-gradient(160deg,#fff 0%,#f6fbff 100%);
  border:1px solid var(--line); border-radius:18px; padding:.9rem;
}
.note{
  background:var(--warning); border:1px solid #f0d88e;
  color:#604800; border-radius:14px; padding:.85rem .95rem;
}
.disclaimer{
  background:#f2f6fb; border:1px solid var(--line);
  border-radius:14px; padding:.8rem .95rem;
  color:var(--muted); font-size:.92rem;
}
.checklist{padding-left:1.1rem; margin:.3rem 0 0}
.checklist li{margin:.32rem 0}
.list-tight li{margin:.2rem 0}
.callout{border-left:4px solid var(--brand); padding-left:1rem; color:var(--muted)}
.inline-ref{font-size:.82em; vertical-align:super; margin-left:2px}

/* ── STORY BAND ── */
.story-band{
  padding:1.5rem;
  background:linear-gradient(135deg,#0f2841 0%,#183f63 100%);
  color:#fff; border-radius:var(--radius); box-shadow:var(--shadow);
}
.story-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:1.25rem; align-items:center}
.problem-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem}
.problem-pill{
  background:#fff; border-radius:18px; padding:1rem;
  border:1px solid var(--line); box-shadow:var(--shadow);
}

/* ── VIDEO CARD ── */
.video-card{
  padding:1.25rem;
  background:linear-gradient(160deg,#0f2841 0%,#163e63 40%,#1f7bc3 100%);
  color:#fff; min-height:240px; position:relative; overflow:hidden;
}
.video-card:before{
  content:""; position:absolute; inset:auto -40px -70px auto;
  width:200px; height:200px; border-radius:50%; background:rgba(255,255,255,.08);
}
.play{
  width:64px; height:64px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.22); margin-bottom:.9rem;
}
.play:before{
  content:""; border-left:16px solid #fff;
  border-top:11px solid transparent; border-bottom:11px solid transparent; margin-left:5px;
}

/* ── HERO FIGURE / ILLUSTRATION ── */
.hero-figure,.illustration{
  border-radius:18px;
  background:
    radial-gradient(circle at 20% 20%,rgba(255,255,255,.65),transparent 30%),
    radial-gradient(circle at 80% 35%,rgba(255,255,255,.28),transparent 25%),
    linear-gradient(135deg,#dff1ff 0%,#bfe4ff 45%,#d4f5ea 100%);
  min-height:200px; position:relative; overflow:hidden; border:1px solid var(--line);
}
.hero-figure:before,.hero-figure:after,
.illustration:before,.illustration:after{
  content:""; position:absolute; border-radius:50%;
}
.hero-figure:before,.illustration:before{
  width:160px; height:160px; background:rgba(11,111,184,.11); right:-20px; bottom:-30px;
}
.hero-figure:after,.illustration:after{
  width:100px; height:100px; background:rgba(26,165,140,.14); left:-15px; top:-15px;
}
.hero-figure{background:none !important; border:none !important; min-height:0 !important; overflow:visible !important}
.hero-figure:before,.hero-figure:after{content:none !important}

/* Image cards */
.home-image-card{
  background:#fff; border:1px solid rgba(217,225,236,.8);
  border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;
}
.home-image-card img{display:block; width:100%; height:100%; object-fit:cover}

/* ── FORMS ── */
.form-card form{display:grid; gap:.9rem}
label{font-weight:700; font-size:.94rem}
input,textarea,select{
  width:100%; padding:.85rem 1rem; border-radius:12px;
  border:1px solid #cfd9e4; background:#fff; color:var(--ink); font:inherit;
  min-height:44px;
}
textarea{min-height:120px; resize:vertical}
.form-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:.85rem}
.toast{
  display:none; margin-top:.5rem; padding:.75rem .95rem; border-radius:12px;
  background:#ebfaf6; border:1px solid #bfe9da; color:#116652; font-weight:600;
}
.toast.show{display:block}

/* ── FOOTER ── */
footer{
  margin-top:2rem; padding:2.2rem 0 2.8rem;
  background:#0d1c2f; color:#d6e3ef;
}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1.1fr; gap:1.25rem}
footer h3{color:#fff; margin-bottom:.5rem}
footer a{color:#dbe9f8}
footer ul{list-style:none; padding:0; margin:.35rem 0 0}
footer li{margin:.4rem 0}
.footer-meta{
  margin-top:1.2rem; padding-top:.9rem;
  border-top:1px solid rgba(217,225,236,.2);
  color:#b7c7d8; font-size:.88rem;
}

/* ── HERO SIDE ── */
.hero-side{display:grid; gap:1rem}

/* ── LEGAL PAGES ── */
.legal-wrap{max-width:980px; margin:0 auto}
.legal-card{
  background:#fff; border:1px solid rgba(15,39,74,.1);
  border-radius:24px; padding:2rem;
  box-shadow:0 10px 30px rgba(15,39,74,.06);
}
.legal-card h2{margin-top:1.75rem}
.legal-card h3{margin-top:1.1rem}
.legal-card p,.legal-card li{line-height:1.7}
.legal-card ul{margin:.6rem 0 1rem 1.2rem}
.legal-card .section-number{color:#1f5fa7; font-weight:700; margin-right:.35rem}
.legal-card .meta-line{font-weight:600}

/* Table wrapper — prevents overflow on mobile */
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:1rem 0 1.5rem}
.legal-table{
  width:100%; border-collapse:collapse; font-size:.95rem;
  min-width:500px; /* forces scroll on small screens */
}
.legal-table th,.legal-table td{
  border:1px solid rgba(15,39,74,.12); padding:.75rem .9rem;
  vertical-align:top; text-align:left;
}
.legal-table th{background:rgba(31,95,167,.06); font-weight:700}

/* ── HCP GATE ── */
body.modal-open{overflow:hidden}
.gated-main{display:none}
.gated-main.is-visible{display:block}
.hcp-gate{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  background:rgba(13,28,47,.66); padding:1rem;
}
.hcp-gate[hidden]{display:none !important}
.hcp-gate-card{
  width:min(600px,100%); background:#fff; border:1px solid var(--line);
  border-radius:24px; box-shadow:0 28px 70px rgba(18,34,56,.24); padding:1.6rem;
}
.hcp-gate-card h2{margin-bottom:.5rem}
.hcp-gate-actions{display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1.1rem}
.hcp-gate-note{margin-top:.9rem; font-size:.91rem; color:var(--muted)}
.gate-badge{
  display:inline-flex; align-items:center; gap:.5rem;
  background:#eef7ff; color:#0a5f9d; border:1px solid #cfe8fa;
  padding:.4rem .8rem; border-radius:999px; font-size:.88rem; font-weight:700;
}

/* ============================================
   TABLET — 1000px and below
   ============================================ */
@media (max-width:1000px){
  .hero-grid,.story-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .grid-4{grid-template-columns:1fr 1fr}
  .problem-strip{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .nav-links a{font-size:.88rem; gap:.7rem}
}

/* ============================================
   MOBILE — 760px and below
   ============================================ */
@media (max-width:760px){

  /* Nav — hamburger */
  .nav-toggle{display:flex}
  .navbar{padding:.6rem 0; position:relative}
  .brand span{font-size:.9rem}
  .brand-mark{width:80px !important; height:53px !important}

  .nav-links{
    display:none;
    flex-direction:column; align-items:stretch;
    position:absolute; top:100%; left:0; right:0;
    background:rgba(248,251,255,.98); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
    padding:.75rem 1rem 1rem;
    gap:0;
    box-shadow:0 8px 24px rgba(18,34,56,.1);
    z-index:50;
  }
  .nav-links.is-open{display:flex}
  .nav-links a{
    padding:.75rem .5rem; font-size:1rem; border-bottom:1px solid var(--line);
    display:block; min-height:44px;
  }
  .nav-links a:last-child{border-bottom:none}
  .nav-cta{
    margin-top:.5rem; text-align:center;
    border-radius:12px; padding:.75rem 1rem !important;
  }

  /* Sections */
  section{padding:.5rem 0 2rem}
  .hero{padding:2rem 0 1.5rem}
  .section-head{flex-direction:column; align-items:flex-start; gap:.5rem}

  /* Grids — all single column */
  .hero-grid,
  .grid-2,
  .grid-3,
  .grid-4,
  .story-grid,
  .form-grid,
  .footer-grid,
  .problem-strip{grid-template-columns:1fr}

  /* Typography */
  h1{font-size:1.9rem}
  h2{font-size:1.4rem}
  h3{font-size:1.05rem}
  .lead{font-size:1rem}
  .stat{font-size:1.7rem}

  /* Cards */
  .hero-copy,
  .feature-card,
  .info-card,
  .stat-card,
  .content-card,
  .list-card,
  .quote-card,
  .form-card,
  .video-card{padding:1.1rem}

  /* Story band */
  .story-band{padding:1.1rem; border-radius:16px}

  /* Buttons */
  .btn{padding:.75rem 1rem; font-size:.95rem}
  .hero-actions,.button-row{flex-direction:column; gap:.6rem}
  .hero-actions .btn,.button-row .btn{width:100%; justify-content:center}

  /* Footer */
  .footer-grid{gap:1.5rem}
  footer{padding:1.75rem 0 2.2rem}

  /* HCP gate */
  .hcp-gate-card{padding:1.2rem; border-radius:18px}
  .hcp-gate-actions{flex-direction:column}
  .hcp-gate-actions .btn{width:100%; justify-content:center}

  /* Legal */
  .legal-card{padding:1.1rem; border-radius:18px}
  .legal-table{font-size:.85rem}

  /* Image cards height */
  .home-image-card{min-height:200px !important}

  /* Problem pills */
  .problem-pill{padding:.85rem}
}

/* ============================================
   SMALL PHONE — 400px and below
   ============================================ */
@media (max-width:400px){
  .container{width:calc(100% - 1.25rem)}
  h1{font-size:1.65rem}
  h2{font-size:1.25rem}
  .brand span{display:none} /* logo only on tiny screens */
  .brand-mark{width:72px !important; height:48px !important}
  .hero-copy{padding:.9rem}
  .legal-card{padding:.9rem}
  section{padding:.25rem 0 1.5rem}
}