/* ==========================================================================
   Huntingdonshire Business Directory - WHY-ADVERTISE PAGE
   ========================================================================== */

/* Page head (light banner - sits clear of the navy nav) */
.page-head { background: linear-gradient(180deg, var(--accent), var(--accent-dark)); color: #fff; text-align: center; padding-block: clamp(2.4rem, 6vw, 4.2rem); }
.page-head h1 { color: #fff; font-size: clamp(1.9rem, 4.4vw, 3rem); margin-bottom: .5rem; }
.page-head p { color: rgba(255,255,255,.92); font-size: clamp(1.02rem, 2vw, 1.2rem); max-width: 660px; margin: 0 auto; }
.page-head .eyebrow { color: var(--accent-2); }

/* Why advertise: tiers */
.why-intro { max-width: 760px; margin: 0 auto clamp(2.4rem, 4vw, 3.4rem); text-align: center; }
.why-intro::before { content: ""; display: block; width: 56px; height: 4px; background: var(--accent); border-radius: 2px; margin: 0 auto 1.5rem; }
.why-intro p { color: var(--brand); font-size: clamp(1.2rem, 2.5vw, 1.5rem); font-weight: 500; line-height: 1.55; margin: 0; }
.why-intro strong { color: var(--accent-dark); font-weight: 700; }
.tier-compare { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: stretch; }
.tier { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--grey-line); border-radius: var(--radius-lg); padding: 2rem 1.8rem; position: relative; }
.tier--top { border: 2px solid var(--accent); box-shadow: var(--shadow-md); }
.tier__badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; padding: .35rem .9rem; border-radius: 999px; white-space: nowrap; }
.tier h3 { font-size: 1.4rem; margin-bottom: .15rem; }
.tier__tag { color: var(--muted); font-size: .95rem; margin: 0 0 1.1rem; }
.tier__stars { display: flex; gap: .25rem; margin-bottom: 1.1rem; color: var(--accent-2); font-size: 1rem; }
.tier__stars .off { color: var(--grey-line); }
.tier__stars .none { color: var(--muted); font-family: var(--font-head); font-size: .82rem; font-weight: 600; letter-spacing: .02em; }
.tier__feats { list-style: none; margin: 0 0 1.8rem; padding: 0; display: grid; gap: .8rem; font-size: .98rem; flex: 1 0 auto; align-content: start; }
.tier__feats li { display: flex; gap: .6rem; align-items: flex-start; line-height: 1.45; color: var(--ink); }
.tier__feats i { color: var(--accent-dark); margin-top: .2rem; flex: 0 0 auto; }
.tier__feats li.muted { color: var(--muted); }
.tier__feats li.muted i { color: var(--muted); }
.tier .btn { margin-top: auto; }
.why-note { max-width: 820px; margin: clamp(2.2rem,4vw,3rem) auto 0; text-align: center; color: var(--muted); font-size: 1rem; }
.why-note strong { color: var(--brand); }
.why-note a { color: var(--accent-dark); font-weight: 600; }
@media (max-width: 900px) { .tier-compare { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } }

/* Second intro paragraph (digital-presence message) */
.why-intro p + p { margin-top: 1.1rem; font-size: clamp(1.02rem, 2vw, 1.18rem); color: var(--ink); font-weight: 400; }

/* Banner advertising callout box */
.banner-cta { scroll-margin-top: 6rem; display: flex; gap: 1.2rem; align-items: flex-start; max-width: 820px; margin: clamp(2.4rem, 4vw, 3.4rem) auto 0; background: var(--grey); border: 1px solid var(--grey-line); border-left: 4px solid var(--accent-2); border-radius: var(--radius-lg); padding: 1.6rem 1.8rem; text-align: left; }
.banner-cta__icon { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 12px; background: rgba(195,154,69,.16); color: var(--accent-2); display: grid; place-items: center; font-size: 1.4rem; }
.banner-cta__body h3 { font-size: 1.2rem; color: var(--brand); margin: 0 0 .4rem; }
.banner-cta__body p { color: var(--muted); margin: 0; line-height: 1.6; }
.banner-cta__body .btn { margin-top: 1.1rem; }
.banner-cta__body .email-inline { color: var(--accent-dark); }
@media (max-width: 560px) { .banner-cta { flex-direction: column; gap: .9rem; } }

/* Tier prices */
.tier__price { font-family: var(--font-head); font-weight: 800; color: var(--brand); font-size: 2.2rem; line-height: 1; margin: .1rem 0 .2rem; }
.tier__price span { display: block; font-size: .78rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-top: .45rem; }
.tier__save { display: inline-flex; align-items: center; gap: .4rem; background: rgba(47,125,85,.1); color: var(--accent-dark); font-size: .8rem; font-weight: 700; padding: .3rem .65rem; border-radius: 999px; margin: 0 0 1rem; }
.tier__save i { color: var(--accent); }
.tier__feats li.req { color: var(--muted); }
.tier__feats li.req i { color: var(--muted); }
.tier-note { max-width: 900px; margin: 1.8rem auto 0; text-align: center; color: var(--muted); font-size: .95rem; line-height: 1.65; }

/* Listing-types showcase */
.showcase-wrap { margin-top: clamp(3rem, 6vw, 4.5rem); background: linear-gradient(150deg, var(--brand), var(--brand-deep)); border: 0; border-radius: var(--radius-lg); padding: clamp(2rem, 4vw, 3.2rem); }
.showcase-head { text-align: center; margin-bottom: 2rem; }
.showcase-head .eyebrow, .showcase-head .rule-gold { color: var(--accent-2); }
.showcase-head .rule-gold::before, .showcase-head .rule-gold::after { background: var(--accent-2); }
.showcase-head h2 { font-size: clamp(1.5rem, 3vw, 2rem); color: #fff; margin-bottom: .3rem; }
.showcase-head p { color: rgba(255,255,255,.9); margin: 0; }
.showcase { display: grid; gap: 1.7rem; max-width: 720px; margin-inline: auto; }
.showcase__tag { display: inline-block; font-family: var(--font-head); font-weight: 700; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,.18); padding: .3rem .75rem; border-radius: 999px; margin-bottom: .75rem; }
.tier-note strong { color: var(--accent-dark); }

.demo { background: #fff; border: 1px solid var(--grey-line); border-radius: var(--radius); padding: 1.1rem 1.3rem; position: relative; }
.demo__logo { width: 54px; height: 54px; border-radius: 10px; background: var(--grey); border: 1px solid var(--grey-line); display: grid; place-items: center; color: var(--muted); font-size: 1.3rem; flex: 0 0 auto; }
.demo__logo--sm { width: 40px; height: 40px; font-size: 1rem; }
.demo__head { min-width: 0; }
.demo__name { display: block; font-family: var(--font-head); font-weight: 700; color: var(--brand); font-size: 1.05rem; line-height: 1.2; }
.demo__type { display: block; color: var(--muted); font-size: .88rem; }
.demo__desc { color: var(--ink); font-size: .95rem; line-height: 1.55; margin: .8rem 0 0; }
.demo__row { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin-top: .8rem; font-size: .9rem; color: var(--ink); }
.demo__row span { display: inline-flex; align-items: center; gap: .4rem; }
.demo__row i { color: var(--accent-dark); }

.demo--free { display: flex; align-items: center; gap: .9rem; }
.demo--free .demo__head { flex: 1 1 auto; }
.demo__mini { display: inline-flex; gap: .7rem; color: var(--accent-dark); font-size: .95rem; flex: 0 0 auto; }

.demo--plus { border-left: 4px solid var(--accent-2); }
.demo__top { display: flex; align-items: center; gap: .9rem; }

.demo--superstar { border: 2px solid var(--accent); box-shadow: var(--shadow-md); margin-top: .4rem; padding-top: 1.9rem; }
.demo--superstar .demo__stars { margin-top: .35rem; }
.demo__badge { position: absolute; top: -11px; left: 1.2rem; background: var(--accent); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; padding: .25rem .7rem; border-radius: 999px; }
.demo__stars { display: inline-flex; align-items: center; gap: .12rem; color: var(--accent-2); font-size: .85rem; margin-top: .25rem; }
.demo__stars b { color: var(--muted); font-family: var(--font-head); font-size: .8rem; margin-left: .35rem; }
.demo__photos { display: flex; gap: .5rem; margin-top: .8rem; }
.demo__photos span { width: 68px; height: 48px; border-radius: 6px; background: var(--grey); border: 1px solid var(--grey-line); }

@media (max-width: 560px) {
    .demo--free { flex-wrap: wrap; }
    .demo__photos span { flex: 1 1 auto; }
}

/* "Why it works" section (its own section below the showcase) */
.advertise-why { background: linear-gradient(150deg, var(--accent), var(--accent-dark)); display: flex; flex-direction: column; justify-content: center; min-height: clamp(420px, 50vh, 560px); padding-top: calc(var(--section-y) + 0.3rem); padding-bottom: calc(var(--section-y) - 0.3rem); }
.advertise-why__panel { max-width: 940px; margin-inline: auto; text-align: center; }
.advertise-why__icon { width: 62px; height: 62px; border-radius: 16px; background: rgba(255,255,255,.16); color: #fff; display: grid; place-items: center; font-size: 1.5rem; margin: 0 auto 1.3rem; }
.advertise-why__panel .eyebrow { color: var(--accent-2); }
.advertise-why__panel h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); color: #fff; margin-bottom: 1rem; }
.advertise-why__panel p { color: rgba(255,255,255,.9); font-size: clamp(1.05rem, 2vw, 1.18rem); line-height: 1.65; margin: 0 auto; max-width: 800px; }
.advertise-why__panel p + p { margin-top: 1rem; }
.advertise-why__panel strong { color: #fff; }
.advertise-why .banner-cta { margin-top: clamp(2.4rem, 4vw, 3.4rem); }