/* Haven Property Management Group — brand kit
   Matched from the live site (deep teal sections, translucent cards,
   bold geometric headings, white line-icons in rounded pills). */

:root {
  --teal-900: #0c5447;   /* deepest */
  --teal-800: #115e50;
  --teal-700: #14695a;   /* primary section background */
  --teal-600: #1c7867;
  --teal-card: rgba(255, 255, 255, 0.055);
  --teal-card-hi: rgba(255, 255, 255, 0.09);
  --hairline: rgba(255, 255, 255, 0.16);
  --hairline-soft: rgba(255, 255, 255, 0.10);
  --ink: #ffffff;
  --ink-soft: rgba(255, 255, 255, 0.82);
  --ink-mute: rgba(255, 255, 255, 0.62);
  --cream: #faf8f2;          /* inverted premium card */
  --cream-mute: #5d6b66;
  --gold: #e3b977;           /* single warm accent, premium only */
  --gold-deep: #b98a3e;
}

/* Each embeddable section is scoped under .haven so the styles never
   leak into the surrounding GoDaddy page. */
.haven * { box-sizing: border-box; margin: 0; padding: 0; }

.haven {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--teal-700);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  width: 100%;
}

.haven-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 84px 48px;
}

/* ---- section header ---- */
.haven-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 18px;
}
.haven-h2 {
  font-size: 50px;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.haven-sub {
  font-size: 19px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 620px;
  margin-top: 18px;
}
.haven-center { text-align: center; }
.haven-center .haven-sub { margin-left: auto; margin-right: auto; }

/* ---- card base ---- */
.haven-card {
  background: var(--teal-card);
  border: 1px solid var(--hairline-soft);
  border-radius: 20px;
  padding: 36px;
}

/* ---- icon pill (matches site) ---- */
.haven-pill {
  width: 46px; height: 58px;
  border-radius: 999px;
  background: var(--teal-card-hi);
  border: 1px solid var(--hairline-soft);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.haven-pill svg { width: 22px; height: 22px; stroke: var(--ink); stroke-width: 1.8; fill: none; }

/* ---- buttons ---- */
.haven-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: inherit; font-size: 16px; font-weight: 600;
  padding: 16px 30px; border-radius: 999px;
  border: 0; cursor: pointer; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.haven-btn-primary { background: var(--cream); color: var(--teal-800); }
.haven-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.22); }
.haven-btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--hairline); }
.haven-btn-ghost:hover { background: var(--teal-card-hi); }

/* ---- price typography ---- */
.haven-price { font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.haven-price .num { font-size: 64px; }
.haven-price .pct { font-size: 30px; font-weight: 600; }
.haven-price .of { font-size: 15px; font-weight: 500; color: var(--ink-mute); }

/* ---- feature list ---- */
.haven-feats { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.haven-feats li { display: flex; gap: 12px; font-size: 15.5px; line-height: 1.4; color: var(--ink-soft); }
.haven-feats li.off { color: var(--ink-mute); opacity: 0.55; }
.haven-check { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; }
.haven-check svg { width: 20px; height: 20px; }

/* ---- premium / recommended treatment ---- */
.haven-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--teal-800); background: var(--gold);
  padding: 7px 15px; border-radius: 999px; white-space: nowrap;
}
.haven-card.premium {
  background: var(--cream);
  border-color: transparent;
  color: var(--teal-800);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.4);
}
.haven-card.premium .haven-pill { background: rgba(20,105,90,.08); border-color: rgba(20,105,90,.18); }
.haven-card.premium .haven-pill svg { stroke: var(--teal-700); }
.haven-card.premium .haven-feats li { color: var(--cream-mute); }
.haven-card.premium .haven-price .of { color: var(--cream-mute); }

/* small helpers */
.haven-tier-name { font-size: 22px; font-weight: 600; }
.haven-tier-desc { font-size: 15px; color: var(--ink-soft); line-height: 1.5; }
.haven-divider { height: 1px; background: var(--hairline-soft); border: 0; }

/* =====================================================================
   PRICING SECTION  (.havenp) — light theme, three-tier packages.
   Matches the navy + teal package mockup. Self-contained scope.
   ===================================================================== */
.havenp {
  --p-navy: #16243f;
  --p-navy-2: #223456;
  --p-teal: #1bbf9f;       /* accent: prices, silver button, ribbon */
  --p-teal-deep: #149a80;
  --p-ink: #16243f;
  --p-mute: #6a7589;
  --p-line: #e8ebf1;
  --p-line-on-dark: rgba(255,255,255,0.13);
  --p-line-on-teal: rgba(255,255,255,0.22);
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #ffffff;
  color: var(--p-ink);
  -webkit-font-smoothing: antialiased;
  width: 100%;
}
.havenp * { box-sizing: border-box; margin: 0; padding: 0; }
.havenp-inner { max-width: 1180px; margin: 0 auto; padding: 80px 40px; }

.havenp-eyebrow { display:inline-block; font-size:13px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--p-mute); }
.havenp-h2 { font-size:46px; font-weight:700; line-height:1.05; letter-spacing:-0.015em; color:var(--p-ink); }
.havenp-sub { font-size:18px; line-height:1.55; color:var(--p-mute); max-width:600px; }

/* card grid */
.havenp-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }

.havenp-card {
  position: relative; display:flex; flex-direction:column;
  border-radius: 22px; padding: 38px 34px 34px;
  background:#fff; border:1px solid var(--p-line);
}
.havenp-card.is-navy { background: linear-gradient(165deg, #223456 0%, #16243f 62%); border-color: transparent; color:#fff; box-shadow: 0 34px 70px -28px rgba(22,36,63,.55); overflow:hidden; }
.havenp-card.is-teal { background: linear-gradient(165deg, #2bb89c 0%, #149a80 100%); border-color: transparent; color:#fff; box-shadow: 0 34px 70px -30px rgba(20,154,128,.5); }

.havenp-kicker { font-size:12.5px; font-weight:700; letter-spacing:0.11em; text-transform:uppercase; color:var(--p-mute); }
.havenp-card.is-navy .havenp-kicker { color: var(--p-teal); }
.havenp-card.is-teal .havenp-kicker { color: rgba(255,255,255,0.82); }

.havenp-name { font-size:30px; font-weight:700; letter-spacing:-0.02em; line-height:1.05; margin-top:10px; }

.havenp-price { margin-top:22px; }
.havenp-price .amt { font-size:58px; font-weight:700; letter-spacing:-0.02em; line-height:1; color:var(--p-teal); }
.havenp-card.is-navy .havenp-price .amt { color: var(--p-teal); }
.havenp-card.is-teal .havenp-price .amt { color:#fff; }
.havenp-price .unit { display:block; margin-top:12px; font-size:15.5px; font-weight:400; color:var(--p-mute); }
.havenp-card.is-navy .havenp-price .unit, .havenp-card.is-teal .havenp-price .unit { color: rgba(255,255,255,0.72); }

.havenp-feats { list-style:none; margin-top:30px; }
.havenp-feats li { display:flex; align-items:center; gap:14px; padding:14px 0; font-size:16px; line-height:1.35; border-bottom:1px solid var(--p-line); }
.havenp-feats li:first-child { padding-top:0; }
.havenp-card.is-navy .havenp-feats li { border-color: var(--p-line-on-dark); color: rgba(255,255,255,0.92); }
.havenp-card.is-teal .havenp-feats li { border-color: var(--p-line-on-teal); color:#fff; }

/* check chip */
.havenp-chk { flex:0 0 auto; width:24px; height:24px; border-radius:999px; display:flex; align-items:center; justify-content:center; background: rgba(27,191,159,.14); }
.havenp-chk svg { width:13px; height:13px; stroke:var(--p-teal); stroke-width:3; fill:none; }
.havenp-card.is-navy .havenp-chk { background: rgba(27,191,159,.20); }
.havenp-card.is-teal .havenp-chk { background: rgba(255,255,255,.22); }
.havenp-card.is-teal .havenp-chk svg { stroke:#fff; }

/* buttons */
.havenp-btn { margin-top:auto; display:flex; align-items:center; justify-content:center; text-decoration:none;
  font-family:inherit; font-size:17px; font-weight:600; padding:18px; border-radius:14px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.havenp-btn:hover { transform: translateY(-2px); }
.havenp-btn.ghost { background:#fff; color:var(--p-navy); border:1.5px solid var(--p-navy); }
.havenp-btn.ghost:hover { background:var(--p-navy); color:#fff; }
.havenp-btn.teal { background:var(--p-teal); color:#fff; box-shadow:0 14px 30px -10px rgba(27,191,159,.6); }
.havenp-btn.white { background:#fff; color:var(--p-teal-deep); }

/* most-popular corner ribbon */
.havenp-ribbon { position:absolute; top:24px; right:-46px; transform: rotate(45deg); background:var(--p-teal);
  color:#fff; font-size:11.5px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  padding:8px 56px; box-shadow:0 6px 16px rgba(0,0,0,.18); }

.havenp-foot { margin-top:30px; text-align:center; font-size:14.5px; color:var(--p-mute); }