:root{
  --green:#b7e21a;
  --brand:#4ca31d;
  --ink:#fff;
  --soil:#0e160e;
  --radius:22px;
  --shadow:0 14px 36px rgba(0,0,0,.25);
}

/* Reset */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font:16px/1.45 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Inter,Roboto,Arial;
  color:var(--ink);
  background:var(--soil);
}

/* Page background (striped lawn photo) */
.page-bg{
  position:fixed; inset:0; z-index:-2;
  background: url("/img/stripedlawn.png") center/cover no-repeat;
  filter: saturate(108%) contrast(102%);
}

/* DigiCard container uses Flowerbed image */
.card{
  width:min(720px, 92vw);
  margin: clamp(10px, 3vh, 18px) auto;
  padding: 0 0 24px;  /* generous bottom padding */
  position:relative;
  background: url("/img/Flowerbed.png") center/100% 100% no-repeat;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display:grid; gap:.30rem;
  justify-items:center; text-align:center;
}

/* Readability veil */
.card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:0;
  background: linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.24));
}
.card > *{ position: relative; z-index: 1; }

/* Header / Logo / Name — adjusted spacing */

.logo {
  width: 275px;
  margin-top: 50px;        /* push logo up */
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.35));
}

.name {
  margin: 1rem 0 .5rem;   /* reduced gap under logo */
  line-height: 1.1;
  font-size: clamp(1.5rem, 4.8vw, 2.3rem);
  font-weight: 900;
  color: var(--brand);
  text-shadow: 0 2px 0 rgba(0,0,0,.35);
}

.role {
  margin: .75rem 0 .5rem;
  font-size: clamp(1.05rem, 3.2vw, 1.2rem);
  font-weight: 800;
  color: #eaf6d2;
}

@media (max-width:640px){
   .name {margin: 0.5rem 0 .4rem;  /* even closer on small screens */
  }
  .role{ margin: 1px 0 .24rem; }
}


/* Contact */
.contact{
  display:grid; gap:.16rem; justify-items:center;
  margin:-6px 0 .22rem;
}
.link{ color:#fff; font-weight:800; text-decoration:none; text-shadow:0 1px 0 rgba(0,0,0,.35); }
.link:hover{ text-decoration:underline; }

/* Stacked links */
.stack-links{ display:grid; gap:.22rem; margin-top:.24rem; }
.text-link{ color:inherit; text-decoration:underline; font-weight:800; }

/* Actions */
.card-actions{
  display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; justify-content:center;
  margin:.02rem 0 .48rem;
}
.btn{
  appearance:none; border:0; border-radius:10px;
  padding:.7rem 1rem; font-weight:800; cursor:pointer;
}
.btn-primary{ background: var(--brand); color:#fff; }
.btn-outline{ background: rgba(0,0,0,.35); color:#fff; border:1px solid rgba(255,255,255,.18); }

/* Footnote */
.footnote{
  text-align:center; margin:.44rem 0 .54rem; opacity:.92; font-size:.85rem; font-weight:700;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}
.footnote a.no-color-change{ color: inherit; text-decoration: underline; }

/* Payment Modal */
.modal{ border: none; border-radius: 14px; padding: 0; width: min(480px, 92vw); }
.modal::backdrop{ background: rgba(0,0,0,.55); }
.modal-card{ display: flex; flex-direction: column; background: #fff; border-radius: 14px; overflow: hidden; }
.modal-card header{ display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.2rem; border-bottom: 1px solid #ddd; background: color-mix(in srgb, #4ca31d 6%, #ffffff); }
.modal-card h3{ margin: 0; color: #000; }
.modal-close{ background: transparent; border: none; font-size: 1.4rem; cursor: pointer; }
.modal-body{ display: grid; gap: 1rem; padding: 1rem 1.2rem; color: #000; text-align: center; justify-items: center; }
.modal-actions{ display: flex; justify-content: flex-end; padding: 1rem 1.2rem; border-top: 1px solid #ddd; background: #f6f6f6; }

/* Mobile tuning */
@media (max-width: 640px){
  .card-actions{
    flex-direction: column;
    align-items: stretch;
    gap:.38rem;
    width: 150px;
    margin:.02rem auto .5rem;
  }
  .card-actions .btn{ width:100%; padding:.85rem 1rem; }
  /* Footnote: remove "|" and break line on mobile */
  .footnote .sep {
    display: block;    /* forces line break */
    visibility: hidden; /* hides the "|" character itself */
    line-height: 0;    /* collapse its height */
  }
}