*{box-sizing:border-box}
body{margin:0;background:#f8f5ed;color:#153f4c;font:16px/1.55 system-ui,sans-serif}
.wrap{width:min(1120px,calc(100% - 36px));margin-inline:auto}
.mast{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.mast img{display:block;width:185px;max-width:43vw}
a{color:inherit;text-underline-offset:3px}
.hero{background:#153f4c;color:#fff;padding:clamp(44px,8vw,96px) 0}
.hero p:not(.eyebrow){max-width:550px;font-size:1.1rem}
h1,h2{font:500 clamp(30px,5vw,52px)/1.1 Georgia,serif;margin:.2em 0 .45em}
h1{max-width:690px;font-size:clamp(43px,8vw,84px)}
.eyebrow{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;font-weight:750}
.hero .eyebrow{color:#f4c575}
.button{display:inline-flex;min-height:46px;align-items:center;padding:10px 18px;background:#153f4c;color:white;border:0;border-radius:6px;font:inherit;font-weight:700;cursor:pointer;text-decoration:none}
.hero .button{background:#e8a437;color:#15313d}
.section{padding-block:clamp(25px,5vw,58px)}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
.plans article,form{padding:clamp(15px,3vw,25px);background:white;border:1px solid #dce3dd;border-radius:12px}
.plans h3{margin:.2em 0}
.recommended{border:2px solid #a87724!important}
.recommended .eyebrow{color:#704a11;margin:0 0 8px}
.price{font-size:1.65rem;font-weight:750;margin:.35em 0}
.price small{display:block;font-size:.86rem;font-weight:600}
.signup{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);gap:26px;border-top:1px solid #dce3dd}
form>label{display:block;margin-bottom:12px;font-weight:650}
input:not([type=checkbox]),select{display:block;width:100%;min-height:44px;margin-top:4px;padding:8px;font:inherit;border:1px solid #829898;border-radius:5px;background:white}
fieldset{min-width:0;border:1px solid #cbd8d4;border-radius:6px;margin:0 0 12px}
.choice{display:flex;align-items:baseline;gap:8px;padding:4px 0}
.error{color:#9c241d}
footer{display:flex;gap:15px;flex-wrap:wrap;border-top:1px solid #dce3dd}
@media(max-width:740px){.plans,.signup{grid-template-columns:1fr}}

.hero {
  background: linear-gradient(90deg, #102c37 5%, #102c37ee 42%, #102c3766 100%),
    url('../img/petoskey-hero-sunset.jpg') center 55% / cover;
}
.plans article { display: flex; flex-direction: column; }
.plans article > .eyebrow { margin: 0 0 8px; }
.plan-note { font-size: .9rem; }
.plan-action {
  display: flex;
  align-items: center;
  gap: .35rem;
  min-height: 44px;
  margin-top: auto;
  font-weight: 750;
}
#plan-total {
  display: block;
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: 6px;
  background: #edf3ef;
  font-weight: 750;
}
#plan-total[hidden] { display: none; }
:focus-visible { outline: 3px solid #a87724; outline-offset: 3px; }
#signup { scroll-margin-top: 1rem; }
@media (max-width: 740px) {
  .hero {
    background-image: linear-gradient(#102c37e8, #102c37ba),
      url('../img/petoskey-hero-sunset.jpg');
  }
}

.example-link { font-weight: 700; margin-top: auto; }
.example-link + .plan-action { margin-top: 0; }
.placement-examples { border-top: 1px solid #dce3dd; }
.placement-examples details { margin-top: 12px; border: 1px solid #dce3dd; border-radius: 12px; background: white; }
.placement-examples summary { padding: 15px 18px; font-weight: 750; cursor: pointer; }
.placement-examples summary small { margin-left: 8px; color: #526c71; font-weight: 500; }
.demo-frame { margin: 0 12px 12px; padding: clamp(10px, 3vw, 24px); border-radius: 9px; background: #edf3ef; }
.demo-page-label { border-bottom: 1px solid #cbd8d4; padding-bottom: 10px; margin-bottom: 14px; font-weight: 750; }
.demo-page-label span { color: #526c71; font-weight: 500; }
.demo-logo { display: block; width: fit-content; margin-bottom: 9px; padding: 5px 10px; border-radius: 6px; background: #ffcb6e; color: #232454; font: 900 12px/1.3 system-ui; letter-spacing: .06em; }
.demo-logo > span { font-size: 16px; }
.demo-logo small { display: block; text-align: right; font-size: 8px; }
.demo-banner-logo { position: absolute; bottom: 6px; right: 10px; }
.demo-action { display: inline-block; padding: 9px 13px; border-radius: 7px; background: #ecc487; color: #221b15; font-size: 13px; font-weight: 700; }
.demo-next { font-weight: 750; margin-bottom: 0; }
.demo-phone { max-width: 450px; margin-inline: auto; }
.demo-phone > h3 { font: 500 26px Georgia, serif; }
.demo-after-connect, .demo-signin { padding: 12px; border-radius: 8px; background: #e1ebe5; }
.demo-phone .pg-ad-splash { margin: 10px 0; }
.demo-phone .pg-ad-copy > .demo-logo { margin: 0 0 8px; font-size: 12px; }
.demo-phone .pg-ad-body { align-items: start; }
.demo-signin .demo-action { display: block; width: fit-content; margin-top: 8px; background: #173f4c; color: white; }
@media (max-width: 740px) {
  .placement-examples summary small { display: block; margin-left: 17px; }
  .demo-frame .pg-featured-listing { grid-template-columns: 1fr; }
}


.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.hero-actions > a:not(.button) { padding-block: 10px; font-weight: 650; }
.sales-case { border-bottom: 1px solid #dce3dd; }
.sales-intro { max-width: 720px; }
.sales-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-block: 25px; }
.sales-benefits > div { border-top: 2px solid #bc8a3f; padding: 12px 0 0; }
.sales-case h3 { margin: 0; font-size: 1.1rem; }
.sales-benefits p, .sales-measurement p { margin: 6px 0 0; }
.sales-measurement { padding: 18px clamp(14px, 3vw, 26px); background: #e6efeb; border-radius: 9px; }
@media (max-width: 650px) {
  .sales-benefits { grid-template-columns: 1fr; gap: 15px; }
}

.plan-preview-link { display: block; color: inherit; text-decoration: none; }
.plan-preview-link > span { display: inline-block; color: #215e6f; font-size: .9rem; text-decoration: underline; }
.plan-preview-link:hover h3 { color: #215e6f; }
.placement-examples { margin-block: 25px; padding-top: 22px; }
.placement-examples details { scroll-margin-top: 16px; }
.placement-detail { margin: 0 18px 15px; max-width: 68ch; }

.mast-login {
  padding: 8px 13px;
  border: 1px solid #9aaba8;
  border-radius: 99px;
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
}
.mast-login:hover { background: #e6efeb; }

.hero {
  background: linear-gradient(105deg, #0d2835 15%, #0d2835dd 55%, #0d28359c),
    url('../img/petoskey-hero-sunset.jpg') center 55% / cover;
}
.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .85fr);
  align-items: center;
  gap: clamp(24px, 5vw, 70px);
}
.hero h1 {
  font-size: clamp(52px, 7vw, 103px);
  letter-spacing: -.055em;
  line-height: .98;
}
.hero h1 em { color: #f5cc8a; }
.hero .button { gap: .75rem; background: #f5cc8a; }
.hero .button:hover { background: #ffe0a9; }
.hero-actions .example-link { margin-top: 0; }

.hero-preview {
  display: grid;
  overflow: hidden;
  align-self: center;
  margin: 0;
  border: 1px solid #f5cc8a88;
  border-radius: 15px;
  background: #102e3b;
  color: white;
  text-decoration: none;
  box-shadow: 0 20px 48px #081c28a6;
}
.hero-preview img { display: block; width: 100%; height: clamp(140px, 20vw, 270px); object-fit: cover; }
.hero-preview-copy { padding: clamp(14px, 2.4vw, 25px); }
.hero-preview-copy > .eyebrow { margin: 0 0 6px; }
.hero-preview-copy > strong { display: block; font: 500 clamp(23px, 3vw, 39px)/1.1 Georgia, serif; }
.hero-preview-copy > span { display: block; margin-top: 9px; font-size: .88rem; text-decoration: underline; }
.hero-preview:hover { border-color: #ffdfab; }

.sales-case h2, #plans > h2, .signup h2 { letter-spacing: -.035em; }
.plans article {
  padding: clamp(18px, 3vw, 30px);
  box-shadow: 0 12px 28px #133a4310;
}
.plans h3 { font: 500 clamp(24px, 3.2vw, 33px)/1.08 Georgia, serif; }
.plans .recommended { background: #163d49; color: #fff; }
.plans .recommended .eyebrow { color: #f5cc8a; }
.plans .recommended .plan-preview-link > span,
.plans .recommended .plan-preview-link:hover h3 { color: #ffe0a9; }
.plans .price { font-size: clamp(25px, 3vw, 34px); }
.plans .plan-action {
  justify-content: space-between;
  margin-top: auto;
  padding: 8px 12px;
  border: 1px solid #77918f;
  border-radius: 6px;
  text-decoration: none;
}
.plans .plan-action:hover { background: #e6efeb; }
.plans .recommended .plan-action { background: #f5cc8a; color: #102e3b; border-color: #f5cc8a; }
.plans .recommended .plan-action:hover { background: #ffe0a9; }

@media (max-width: 740px) {
  .hero-layout { grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(45px, 10vw, 70px); }
  .hero-preview { max-width: 440px; }
}