/* === Amaretto Style: Daily Inspiration App – Thank-you page === */

/* ---------- Global ---------------------------------------------------- */
:root{
  --sage:#668780;
  --cream:#f1e6de;
  --share-btn-bg:#ffffff;
  --share-btn-text:#668780;
}
*{box-sizing:border-box}
body{
  font-family:'Crimson Pro',serif;
  background:var(--cream);
  color:#070707;
  text-align:center;
  padding:40px 20px;
  margin:0;
}

/* ---------- Headings & copy ------------------------------------------ */
h1{
  font-family:'Ethic Serif Light',serif;
  font-size:32px;
  margin:0 0 20px;
  color:var(--sage);
}
p{
  font-size:1.1rem;
  max-width:600px;
  margin:0 auto 1.5rem;
  color:#333;
}

/* ---------- HERO ------------------------------------------------------ */
.top-banner,
.banner-image{
  width:100%;
  height:auto;
  max-height:260px;
  object-fit:cover;
  display:block;
  margin:0 auto 24px;
}

/* ---------- Sophie head-shot ----------------------------------------- */
.sophie-photo{
  width:200px;
  max-width:90vw;
  height:auto;
  border-radius:12px;
  display:block;
  margin:0 auto 20px;
  box-shadow:0 4px 12px rgba(0,0,0,.1);
}

/* ---------- Buttons --------------------------------------------------- */
.cta-button{
  display:inline-block;
  margin-top:20px;
  background:var(--sage);
  color:#fff;
  font-family:'Overpass',sans-serif;
  font-size:14px;
  padding:12px 24px;
  border:none;
  border-radius:8px;
  cursor:pointer;
  text-decoration:none;
  transition:background .3s ease;
}
.cta-button:hover{background:#4c6b66}

/* white share-button */
#shareBtn{
  background:var(--share-btn-bg);
  color:var(--share-btn-text);
  border:2px solid var(--share-btn-text);
  margin-top:-20px;                        /* nudge upward if desired */
}
#shareBtn:hover{background:var(--share-btn-text);color:#fff}

/* ---------- Streak pill ---------------------------------------------- */
#streak{
  display:inline-block;
  background:var(--sage);
  color:#fff;
  font:600 1rem/1 'Overpass',sans-serif;
  padding:6px 14px;
  border-radius:20px;
  margin:-4px auto 16px;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.manage-wrap a{
  padding:8px 16px;
  font-size:.8rem;
}

/* phones */
@media (max-width:480px){
  h1{font-size:1.9rem}
  .manage-wrap{
    width:90%;
    margin-bottom:120px;         /* extra clearance on tiny screens */
  }
}

/* desktop: hide install banner */
@media (min-width:768px){
  .install-banner{display:none!important;}
  .mobile-only{display:none;}
}

/* ---------- Icon grid etc. (unchanged) ------------------------------- */
.icon-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:1.2rem;
  margin:2rem auto 0;
  max-width:800px;
}
.icon-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  font-size:.9rem;
  color:#333;
}
/* Make Sophie paragraph links the sage green, even when visited */
.sophie-welcome a,
.sophie-welcome a:visited {
  color: var(--sage) !important;
  text-decoration: underline;
}
.icon-item img{width:48px;margin-bottom:8px}