/* =========================
   PetDentify · Home page polish
   Depends on: base.css, components.css, header.css
   ========================= */

/* --- Hero rhythm --- */
.hero .container { padding-top: 36px; }
.hero h1 { margin: 6px 0 8px; letter-spacing:-.01em; }
.hero .lead { margin: 0 0 14px; color:#475467; }
.hero .guarantee { margin: 14px 0 18px; }

/* CTA band: centered + compact */
.cta-band { 
  text-align:center; 
  margin: 28px auto 0; 
  padding: 22px 20px; 
  max-width: 640px;
}

/* --- Sections --- */
section { border-top: 1px solid var(--line); }
#how, #micro, #colors, #pricing, #soon, #updates { padding: 54px 0; }

/* Headings tone */
#how h2, #micro h2, #colors h2, #pricing h2, #soon h2, #updates h2 { 
  letter-spacing:-.01em; 
}
#how .lead, #micro .lead { color:#475467; }

/* --- “Choose your color” grid polish --- */
#colors .grid.colors { gap: 16px; }
#colors .grid.colors .card{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:#fff; border:1px solid #eef2f7; border-radius:12px; 
  padding:16px 10px;
  box-shadow:0 1px 2px rgba(2,6,12,.04);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
#colors .grid.colors .card:hover{
  border-color:#e3e8ee; box-shadow:0 8px 22px rgba(2,6,12,.08); transform:translateY(-1px);
}
#colors .grid.colors .card img{
  height: 160px; width:auto; object-fit:contain;
  background:
    linear-gradient(45deg,#f3f4f6 25%,transparent 25%) 0 0/16px 16px,
    linear-gradient(45deg,transparent 75%,#f3f4f6 75%) 0 0/16px 16px,
    linear-gradient(45deg,transparent 25%,#f3f4f6 25%) 8px 8px/16px 16px,
    linear-gradient(45deg,#f3f4f6 75%,transparent 75%) 8px 8px/16px 16px;
  border-radius:10px; box-shadow:0 6px 18px rgba(2,6,12,.08);
}
#colors .grid.colors .card .caption{
  margin-top:8px; text-align:center; font-weight:600; color:#111;
}

/* --- Pricing cards polish --- */
#pricing .grid-3{ gap: 16px; }
#pricing .card{
  display:flex; flex-direction:column; background:#fff;
  border:1px solid #e6e9ef; border-radius:12px; padding:14px;
  box-shadow:0 1px 2px rgba(2,6,12,.04);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
#pricing .card:hover{ border-color:#e3e8ee; box-shadow:0 8px 22px rgba(2,6,12,.08); transform:translateY(-1px); }
#pricing .card h3{ margin:0 0 6px; font-weight:800; }
#pricing .price-xl{ font-size:32px; font-weight:800; margin: 8px 0 6px; }
#pricing .lead{ color:#475467; margin:0 0 12px; }
#pricing .card .btn{ 
  width:100%; margin-top:auto;
  display:flex; align-items:center; justify-content:center; text-align:center;  /* ensure centered label */
}
#pricing .pill{
  background:#fff7ed; color:#9a3412; border:1px solid #fed7aa; border-radius:999px;
  padding:6px 10px; font-size:12px;
}

/* --- Coming soon (progress cards) --- */
#soon .card{
  background:#fff; border:1px solid #eef2f7; border-radius:12px; padding:16px;
  box-shadow:0 1px 2px rgba(2,6,12,.04);
}
#soon .card h3{ margin:0 0 6px; }
#soon .card .text-xs{ color:var(--muted); }

/* --- Updates form card polish --- */
#updates .card{
  border:1px solid #eef2f7; border-radius:12px; padding:16px; background:#fff;
  box-shadow:0 1px 2px rgba(2,6,12,.04);
}

/* Hide honeypot without inline styles */
#updates input[name="bot-field"]{
  position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden;
}

/* Unified pill on ≥640px, stacked on mobile */
#updates .updates-row{
  display:flex; align-items:stretch; gap:0;
}
#updates .input-pill{
  flex:1; min-width:240px;
  padding:14px 16px;
  border:1px solid #d2d6db;
  border-right:0;                  /* seamless join with the button */
  border-radius:999px 0 0 999px;
}
#updates .updates-row .btn{
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:14px 20px;
  border-radius:0 999px 999px 0;
  min-width:140px;
}

/* Focus states */
#updates .input-pill:focus-visible{
  outline:3px solid var(--green); outline-offset:2px;
}
#updates .updates-row .btn:focus-visible{
  outline:3px solid var(--green); outline-offset:2px;
}

/* Mobile: stack full width */
@media (max-width: 640px){
  #updates .updates-row{ flex-direction:column; gap:8px; }
  #updates .input-pill{
    border:1px solid #d2d6db;            /* restore right border */
    border-radius:999px;
  }
  #updates .updates-row .btn{
    border-radius:999px;
    width:100%;
  }
}

/* Footer breathing room on short pages */
#site-footer{ margin-top: 36px; }

/* Demo preview inside the aside */
.demo-preview{ margin-top:14px; }
.demo-frame{
  width:100%;
  height:420px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
  box-shadow:0 1px 2px rgba(2,6,12,.04);
}

/* Hide the live preview on small screens; keep QR + button only */
@media (max-width: 960px){
  .demo-frame{ display:none; }
}

.card-head { display:flex; justify-content:space-between; align-items:center; width:100%; }