/* Base */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; font-family: "Segoe UI", Arial, sans-serif; }

.dark{
  background:#111;
  color:#fff;
}

/* Centering */
.center{
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
}

/* Meet icon (simple look-alike) */
/* .meet-icon{
  width:64px; height:44px;
  border-radius:10px;
  position:relative;
  background: linear-gradient(90deg,#00c7a5 0 60%, #ffcc33 60% 100%);
}
.meet-icon:before{
  content:"";
  position:absolute;
  left:18px; top:10px;
  width:24px; height:24px;
  border-radius:6px;
  background:#0aa6ff;
  opacity:.25;
} */
.meet-icon-img{
  width: 72px;       /* same size vibe */
  height: 72px;
  object-fit: contain;
  margin-bottom: 14px;
  display:block;
}


/* Spinner */
.spinner{
  width:42px; height:42px;
  border-radius:50%;
  border:4px solid rgba(255,255,255,.25);
  border-top-color:#fff;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg);} }

.joining-text{ font-size:20px; opacity:.95; }

/* Modal */
.modal-backdrop{
  position:fixed; inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.15);
}
.modal{
  width:min(420px, 92vw);
  background:#f5f5f5;
  color:#111;
  border-radius:6px;
  padding:18px 18px 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.modal-title{ font-weight:700; margin-bottom:10px; }
.modal-body{ color:#333; line-height:1.35; margin-bottom:14px; }
.modal-actions{ display:flex; justify-content:flex-start; }

/* Buttons */
.btn{
  border:0;
  padding:10px 18px;
  border-radius:2px;
  cursor:pointer;
  font-weight:600;
}
.btn.primary{ background:#1a73e8; color:#fff; }
.btn.large{ padding:12px 22px; font-size:15px; }

/* Store page */
.store{ background:#fff; color:#111; }
.store-topbar{
  position:sticky; top:0;
  background:#fff;
  border-bottom:1px solid #e6e6e6;
  padding:10px 16px;
  display:flex;
  align-items:center;
  gap:18px;
  z-index:10;
}
.ms-logo{ font-weight:700; }
.store-nav a{
  text-decoration:none;
  color:#222;
  margin-right:12px;
  font-size:14px;
}
.store-search{ margin-left:auto; }
.store-search input{
  padding:8px 10px;
  border:1px solid #d7d7d7;
  border-radius:18px;
  width:min(280px, 40vw);
}

.store-wrap{ max-width:1100px; margin:0 auto; padding:22px 16px 60px; }

.hero{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:26px;
  align-items:start;
}
@media (max-width: 860px){
  .hero{ grid-template-columns:1fr; }
}


.big-meet{
  width:100%;
  aspect-ratio: 1 / 1;   /* keeps SAME square size */
  border-radius:18px;
  background-image: url("../assets/meetpic.png");
  background-size: cover;      /* fills box */
  background-position: center; /* keeps centered */
  background-repeat: no-repeat;
  border:1px solid #ececec;
}

.subhead{ color:#555; font-size:14px; margin-bottom:6px; }
h1{ margin:0 0 6px; font-size:34px; }
.publisher{ color:#666; margin-bottom:14px; }

.cards{
  margin-top:18px;
  display:grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap:10px;
}
@media (max-width: 1000px){
  .cards{ grid-template-columns: repeat(2, minmax(160px, 1fr)); }
}


.card{
  border:1px solid #ececec;
  border-radius:12px;
  padding:10px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:90px;
}

.card img{
  width:100%;
  height:100%;
  object-fit:contain; /* keeps full image visible */
  border-radius:8px;
}



.desc{
  margin-top:26px;
  padding-top:18px;
  border-top:1px solid #efefef;
  color:#333;
  line-height:1.5;
}

.reviews{
  margin-top:30px;
}
.reviews h2{ margin:0 0 14px; }
.review{
  border:1px solid #efefef;
  border-radius:10px;
  padding:14px 16px;
  margin-bottom:14px;
  background:#fff;
}
.stars{ font-size:14px; margin-bottom:6px; color:#c58b00; }
.quote{ color:#222; margin-bottom:6px; }
.by{ color:#666; font-size:13px; }

.brand-wrap{
  display:flex;
  align-items:center;
  gap:10px;
}

.app-mini-logo{
  width:22px;
  height:22px;
  object-fit:contain;
  opacity:0.95;
}

/* SAME LEFT WIDTH AS HERO IMAGE COLUMN */
.desc,
.reviews{
  margin-left: 346px;   /*  aligns with pictures */
}

/* Mobile fix */
@media (max-width: 860px){
  .desc,
  .reviews{
    margin-left: 0;
  }
}


.btn {
  text-decoration: none;   /* removes underline */
  border: none;
  outline: none;
}

.btn.primary {
  background: #2563eb;     /* blue like Microsoft */
  color: #fff;
  padding: 12px 26px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
}

.btn.primary:hover {
  background: #1e4fd8;
}

.footer {
  margin-top: 64px;
  padding: 20px 0 30px;
  text-align: center;
  font-size: 12px;
  color: #6b6b6b;
  border-top: 1px solid #e5e5e5;
}

.footer-links {
  margin-top: 6px;
}

.footer-links a {
  color: #6b6b6b;
  text-decoration: none;
  margin: 0 6px;
}

.footer-links a:hover {
  text-decoration: underline;
}