:root{
  --text:#171717;
  --muted:#6f6f6f;
  --bg:#ffffff;

  /* Greens */
  --mint: rgba(196,232,208,.65);       /* invite */
  --mint-soft-top: rgba(196,232,208,.16);  /* pricing gradient top */
  --mint-soft-bot: rgba(196,232,208,.28);  /* pricing gradient bottom */

  /* Layout */
  --wrap: 980px;
  --content: 980px;

  /* Type */
  --h1: 34px;
  --sub: 14px;
  --h2: 16px;
  --p: 14px;

  /* Form */
  --fine: #A6A6A6;
  --inputBorder: #A6A6A6;
  --placeholder: #7F7F7F;

  /* CTA */
  --cta: #1f4d3a;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.6;
}

/* Page frame */
.wrap{
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 44px 24px 70px;
}

/* Header */
.top{
  max-width: var(--content);
  margin: 0 auto;
  text-align:left;
}

.h1{
  margin:0;
  font-size: var(--h1);
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.05;
}

.sub{
  margin: 2px 0 0;
  font-size: var(--sub);
  color: var(--muted);
  line-height:1.25;
}

/* Hero */
.hero{
  max-width: var(--wrap);
  margin: 18px auto 22px;
  height: 360px;
  position: relative;
  overflow: hidden;
}

.hero-image{
  position:absolute;
  inset:0;
  background:
    /* warm, soft gold overlay */
    linear-gradient(rgba(255,225,170,0.18), rgba(255,225,170,0.18)),
    url("hero.png");
  background-size: cover;
  background-position: center;
}

/* Content */
.content{
  max-width: var(--content);
  margin: 0 auto;
  text-align:left;
}

/* Text rhythm */
.p{
  margin: 0 0 8px;
  font-size: var(--p);
  line-height: 1.6;
}

.strong{ font-weight:600; }
.muted{ color: var(--muted); }

.h2{
  margin: 0 0 12px;
  font-size: var(--h2);
  font-weight:700;
  line-height:1.35;
}

/* Spacing helpers */
.space-10{ height:10px; }
.space-16{ height:16px; }

/* Sections */
.intro{ margin: 0 0 22px; }
.section{ margin: 0 0 26px; }

/* Lists */
.list{
  margin: 0 0 10px 18px;
  padding: 0;
  font-size: var(--p);
}
.list li{ margin: 2px 0; }

/* Cards */
.card{
  padding: 34px 26px;
  margin: 24px auto 26px;
  max-width: var(--wrap);
}

/* Invite */
.card-invite{
  background: var(--mint);
  padding: 44px 32px;
}

.card-invite .p:last-child{
  margin-bottom: 0;
}


.invite{
  margin:0;
  font-size: 15px;
  font-weight:700;
  line-height:1.45;
  letter-spacing:0.2px;
}

.invite-lines{
  margin: 0 0 6px;
}

/* Two col */
.two-col{
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 50px;
  align-items: start;
  margin: 0 0 28px;
}

.two-img{
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
  padding-top: 6px;
}

.bench{
  width: 210px;
  border-radius: 18px;
  display:block;
}

/* Outcome block */
.outcome .strong{
  font-size: 15px;
}

/* Pricing */
.card-pricing{
  background: linear-gradient(180deg, var(--mint-soft-top) 0%, var(--mint-soft-bot) 100%);
  margin-top: 30px;
  margin-bottom: 22px;
  padding: 34px 26px;
}

.price-group .p{ margin-bottom: 6px; }

.join-title{ margin-top: 10px; }

/* Form */
.hidden{ display:none; }

.form{
  margin-top: 10px;
  max-width: 520px;
}

.fields{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 10px;
}

.form input{
  width:100%;
  padding: 10px 12px;
  border: 1.5px solid var(--inputBorder);
  border-radius: 4px;
  background: rgba(255,255,255,.35);
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  outline: none;
}

.form input::placeholder{ color: var(--placeholder); }

.form input:focus{
  background: rgba(255,255,255,.55);
  border-color: var(--inputBorder);
}

/* CTA */
.cta{
  appearance:none;
  background:transparent;
  border:0;
  padding:0;
  margin-top: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--cta);
  text-decoration: underline;
  cursor: pointer;
  transition: opacity .2s ease;
}
.cta:hover{ opacity:.72; }

.fineprint{
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--fine);
  line-height: 1.4;
}

/* Footer */
.footer{
  margin-top: 14px;
}

.footer-text{
  margin: 0 0 20px;
}

.sig{
  width: 90px;
  height: auto;
  display:block;
}

/* Global safety */
img{ max-width: 100%; height: auto; }
.wrap{ overflow-x: hidden; }

/* Responsive */
@media (max-width: 920px){
  .hero{ height: 320px; }

  .two-col{
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .two-img{
    align-items: center;    
    padding-top: 0;
  }

  .bench{ width: 170px; }

  .fields{
    grid-template-columns: 1fr;
  }
}
.outcome{
  margin-top: 20px;
}
/* Default spacing for paragraphs */
.p{ margin: 0 0 10px; line-height: 1.6; }

/* Tighten spacing inside a pair */
.p.group{ margin-top: -4px; }     /* zet regel 2 dichter bij regel 1 */

/* Make the final line land a bit more (bridge to outcome) */
.p.bridge{ margin-top: 6px; margin-bottom: 18px; }

/* Outcome sits closer but still distinct */
.outcome{ margin-top: 0; }