/* ==========================================================================
   Kootenay Connection: page stylesheet
   --------------------------------------------------------------------------
   Layer 2 of 2. Loads after core.css and owns blocks that belong to one page
   or one family of pages. Shared components live in core.css.

   Sections:
     1. Marketing page blocks (about, customer, gift, 404)
     2. Directory shell (page hero, content sections, town groups)
     3. Weekend + community surfaces
     4. Cards and chips carried over from the old directory markup
     5. Testimonial quotes on community pages
     6. Affiliate + fundraise funnel (ported wholesale, see the banner below)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Marketing page blocks
   -------------------------------------------------------------------------- */

/* Two-up text + image, stacking under 820px. (about) */
.kc-split {
    display: grid;
    gap: var(--kc-space-6);
    grid-template-columns: 1fr 1fr;
    align-items: center;
}
.kc-split__media {
    border-radius: var(--kc-radius);
    box-shadow: var(--kc-shadow);
    width: 100%;
    height: auto;
}
@media (max-width: 820px) {
    .kc-split { grid-template-columns: 1fr; }
}

/* Founder cards (about) */
.kc-founder__head {
    display: flex;
    align-items: center;
    gap: var(--kc-space-4);
    margin-bottom: var(--kc-space-4);
}
.kc-founder__avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: var(--kc-evergreen);
    color: var(--kc-gold);
    font-family: var(--kc-font-display);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: 0.02em;
}
.kc-founder h3 { font-size: var(--kc-text-lg); }
.kc-founder h3 small { font-weight: 400; color: var(--kc-slate-soft); font-size: 0.8em; }
.kc-founder__role {
    margin: 0;
    font-size: var(--kc-text-sm);
    color: var(--kc-teal);
    font-weight: 600;
}

/* Pull quote (about) */
.kc-pullquote {
    margin: var(--kc-space-6) 0;
    padding: var(--kc-space-4) var(--kc-space-5);
    border-left: 4px solid var(--kc-gold);
    background: var(--kc-gold-soft);
    border-radius: 0 var(--kc-radius) var(--kc-radius) 0;
    font-size: var(--kc-text-lg);
    font-style: italic;
    color: var(--kc-evergreen);
}

/* Icon list (about) */
.kc-discover {
    list-style: none;
    margin: var(--kc-space-4) 0 0;
    padding: 0;
    display: grid;
    gap: var(--kc-space-2);
}
.kc-discover li {
    display: flex;
    align-items: center;
    gap: var(--kc-space-3);
    padding: var(--kc-space-3) var(--kc-space-4);
    background: var(--kc-surface);
    border: 1px solid var(--kc-line);
    border-radius: var(--kc-radius-sm);
}
.kc-discover svg { flex: none; color: var(--kc-teal); }

/* Free / VIP tier panels (customer) */
.kc-tier { display: flex; flex-direction: column; }
.kc-tier__price {
    font-family: var(--kc-font-display);
    font-size: var(--kc-text-3xl);
    font-weight: 700;
    color: var(--kc-evergreen);
    margin: var(--kc-space-3) 0 var(--kc-space-4);
    line-height: 1;
}
.kc-tier__price span {
    font-family: var(--kc-font-ui);
    font-size: var(--kc-text-sm);
    font-weight: 500;
    color: var(--kc-slate-soft);
}
.kc-tier .kc-ticks { flex: 1; }
.kc-tier--featured { border-width: 2px; box-shadow: var(--kc-shadow); }

/* Numbered mini steps inside a panel (gift) */
.kc-ministeps {
    counter-reset: kc-mini;
    list-style: none;
    margin: var(--kc-space-4) 0 0;
    padding: 0;
}
.kc-ministeps li {
    position: relative;
    padding-left: 2.25rem;
    margin-bottom: var(--kc-space-3);
    font-size: var(--kc-text-sm);
}
.kc-ministeps li::before {
    counter-increment: kc-mini;
    content: counter(kc-mini);
    position: absolute;
    left: 0;
    top: 0.05rem;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--kc-teal);
    color: #fff;
    font-size: var(--kc-text-xs);
    font-weight: 700;
}

/* Long-form numbered guide (gift pages) */
.kc-guide {
    counter-reset: kc-guide;
    list-style: none;
    margin: 0;
    padding: 0;
}
.kc-guide__step {
    position: relative;
    padding: 0 0 var(--kc-space-6) var(--kc-space-8);
    border-left: 2px solid var(--kc-line);
    margin-left: 22px;
}
.kc-guide__step:last-child { border-left-color: transparent; padding-bottom: 0; }
.kc-guide__step::before {
    counter-increment: kc-guide;
    content: counter(kc-guide);
    position: absolute;
    left: -23px;
    top: 0;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--kc-gold);
    color: var(--kc-evergreen);
    font-weight: 700;
    font-size: var(--kc-text-lg);
}
.kc-guide__step h3 { font-size: var(--kc-text-lg); margin-bottom: var(--kc-space-3); padding-top: 0.5rem; }

@media (max-width: 560px) {
    .kc-guide__step { padding-left: var(--kc-space-6); margin-left: 18px; }
    .kc-guide__step::before { width: 36px; height: 36px; left: -19px; font-size: var(--kc-text-base); }
}

/* Sample code block (gift redeem) */
.kc-code-example {
    padding: var(--kc-space-4);
    background: var(--kc-paper-deep);
    border: 1px dashed var(--kc-line-strong);
    border-radius: var(--kc-radius-sm);
    text-align: center;
}
.kc-code {
    margin: var(--kc-space-2) 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--kc-text-2xl);
    font-weight: 700;
    letter-spacing: 0.28em;
    color: var(--kc-evergreen);
}

/* 404 */
.kc-404-code {
    font-family: var(--kc-font-display);
    font-size: clamp(3.5rem, 2rem + 8vw, 7rem);
    font-weight: 700;
    line-height: 1;
    color: var(--kc-gold);
    margin: 0 0 var(--kc-space-3);
}

/* Steps that read as a vertical list rather than a row of cards. */
.kc-steps--stacked { grid-template-columns: 1fr; gap: var(--kc-space-6); }
.kc-steps--stacked .kc-step { text-align: left; padding-top: var(--kc-space-6); }
.kc-steps--stacked .kc-step::before { left: var(--kc-space-4); transform: none; }

/* --------------------------------------------------------------------------
   2. Directory shell
   -------------------------------------------------------------------------- */

/* The hero the directory templates render. .has-image sets --hero-img. */
.page-hero {
    position: relative;
    padding: var(--kc-space-8) 0;
    background: var(--kc-paper);
    text-align: center;
    isolation: isolate;
}
.page-hero .hero-content { max-width: 46rem; margin: 0 auto; }
.page-hero h1 {
    font-size: var(--kc-text-3xl);
    margin-bottom: var(--kc-space-3);
}
.page-hero .hero-subtitle {
    font-size: var(--kc-text-lg);
    color: var(--kc-slate-soft);
    margin: 0;
}
.page-hero .hero-icon {
    font-size: 2.75rem;
    line-height: 1;
    margin-bottom: var(--kc-space-3);
}

/* Photo variant: a dark evergreen wash keeps white text legible over any
   location photo. */
.page-hero.has-image,
.community-hero.has-image {
    background-image: linear-gradient(150deg, rgba(22, 50, 39, 0.9) 0%, rgba(33, 85, 97, 0.82) 100%), var(--hero-img);
    background-size: cover;
    background-position: center;
    color: rgba(255, 255, 255, 0.9);
}
.page-hero.has-image h1,
.community-hero.has-image h1 { color: #fff; }
.page-hero.has-image .hero-subtitle,
.community-hero.has-image .hero-subtitle { color: rgba(255, 255, 255, 0.88); }

.community-hero {
    padding: var(--kc-space-8) 0;
    background: var(--kc-paper);
    text-align: center;
}
.community-hero .hero-content { max-width: 46rem; margin: 0 auto; }
.community-hero h1 { font-size: var(--kc-text-3xl); margin-bottom: var(--kc-space-3); }
.community-hero .hero-subtitle { font-size: var(--kc-text-lg); margin: 0; }

.content-section { padding: var(--kc-space-8) 0; }

/* Section titles used by the weekend + community surfaces. */
.kc-section-title,
.weekend-heading {
    font-size: var(--kc-text-2xl);
    text-align: center;
    margin: 0 auto var(--kc-space-2);
}
.weekend-subline {
    text-align: center;
    color: var(--kc-slate-soft);
    max-width: 44rem;
    margin: 0 auto var(--kc-space-6);
}

/* Alternating grounds so the long surfaces keep a rhythm. */
.weekend-featured,
.weekend-towns,
.community-intro,
.community-index-intro,
.community-businesses,
.community-faq { background: var(--kc-surface); }

.weekend-spots,
.community-featured,
.community-nearby { background: var(--kc-paper); }

/* Grouped business lists (community + offers hub). */
.kc-biz-group,
.kc-town-group { margin-bottom: var(--kc-space-7); }
.kc-biz-group-title,
.kc-town-group__title {
    display: flex;
    align-items: baseline;
    gap: var(--kc-space-3);
    font-size: var(--kc-text-xl);
    padding-bottom: var(--kc-space-2);
    margin-bottom: var(--kc-space-4);
    border-bottom: 2px solid var(--kc-gold);
}
.kc-biz-group-count,
.kc-town-group__count {
    font-size: var(--kc-text-sm);
    font-weight: 500;
    color: var(--kc-slate-soft);
}
.kc-biz-group[hidden],
.weekend-offer-card[hidden] { display: none !important; }

/* Prev / next month links under the monthly events pages. */
.kc-month-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--kc-space-3);
    margin-top: var(--kc-space-6);
}

/* --------------------------------------------------------------------------
   3. Weekend + community surfaces
   -------------------------------------------------------------------------- */

.weekend-offer-grid {
    display: grid;
    gap: var(--kc-space-4);
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}
.weekend-offer-card {
    /* The 30-day events hub renders 500+ cards. content-visibility lets the
       browser skip layout and paint for the ones off screen, which is the
       difference between a usable and an unusable scroll on a phone. The
       intrinsic size keeps the scrollbar honest before a card is rendered. */
    content-visibility: auto;
    contain-intrinsic-size: auto 340px;
    background: var(--kc-surface);
    border: 1px solid var(--kc-line);
    border-radius: var(--kc-radius);
    overflow: hidden;
    transition: transform var(--kc-medium) var(--kc-ease), box-shadow var(--kc-medium) var(--kc-ease);
}
.weekend-offer-card:hover { transform: translateY(-3px); box-shadow: var(--kc-shadow); }
.weekend-offer-card > a {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}
.weekend-offer-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    background: var(--kc-paper-deep);
}
.weekend-offer-body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: var(--kc-space-4);
    flex: 1;
}
.weekend-vip-badge {
    display: inline-block;
    align-self: flex-start;
    margin-bottom: var(--kc-space-1);
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    background: var(--kc-gold);
    color: var(--kc-evergreen);
    font-size: var(--kc-text-xs);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.weekend-offer-name {
    display: block;
    font-size: var(--kc-text-lg);
    font-weight: 700;
    color: var(--kc-evergreen);
    line-height: 1.3;
    transition: color var(--kc-fast) var(--kc-ease);
}
.weekend-offer-card:hover .weekend-offer-name { color: var(--kc-teal); }
.weekend-offer-biz {
    display: block;
    margin-top: auto;
    padding-top: var(--kc-space-2);
    font-size: var(--kc-text-sm);
    color: var(--kc-slate-soft);
}

.weekend-spot-grid {
    display: grid;
    gap: var(--kc-space-4);
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}
.weekend-spot-card {
    content-visibility: auto;
    contain-intrinsic-size: auto 150px;
    position: relative;
    background: var(--kc-surface);
    border: 1px solid var(--kc-line);
    border-radius: var(--kc-radius);
    overflow: hidden;
    transition: transform var(--kc-medium) var(--kc-ease), box-shadow var(--kc-medium) var(--kc-ease);
}
.weekend-spot-card:hover { transform: translateY(-3px); box-shadow: var(--kc-shadow); }
.weekend-spot-card > a {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-height: 44px;
    padding: var(--kc-space-4);
    text-decoration: none;
    color: inherit;
}
.weekend-spot-name {
    font-size: var(--kc-text-lg);
    font-weight: 700;
    color: var(--kc-evergreen);
    line-height: 1.3;
}
.weekend-spot-card:hover .weekend-spot-name { color: var(--kc-teal); }
.weekend-spot-city { font-size: var(--kc-text-sm); color: var(--kc-slate-soft); }
.weekend-spot-offers { font-size: var(--kc-text-sm); font-weight: 600; color: var(--kc-teal); margin-top: auto; padding-top: var(--kc-space-2); }
.weekend-more { text-align: center; margin-top: var(--kc-space-6); }
/* Standalone "see all ..." links are navigation, not prose, so they need a
   real touch target. */
.weekend-more a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--kc-space-3);
    font-weight: 600;
}

/* Town chips */
.weekend-town-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kc-space-2);
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}
.weekend-town-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.45rem 0.95rem;
    border: 1px solid var(--kc-line);
    border-radius: var(--kc-radius-pill);
    background: var(--kc-surface);
    color: var(--kc-evergreen);
    font-size: var(--kc-text-sm);
    font-weight: 500;
    text-decoration: none;
    transition: background var(--kc-fast) var(--kc-ease),
                border-color var(--kc-fast) var(--kc-ease),
                color var(--kc-fast) var(--kc-ease);
}
.weekend-town-chip:hover,
.weekend-town-chip.is-active {
    background: var(--kc-evergreen);
    border-color: var(--kc-evergreen);
    color: #fff;
}
.weekend-town-count {
    padding: 0.05rem 0.4rem;
    border-radius: var(--kc-radius-pill);
    background: var(--kc-paper-deep);
    color: var(--kc-slate-soft);
    font-size: var(--kc-text-xs);
    font-weight: 700;
}
.weekend-town-chip:hover .weekend-town-count,
.weekend-town-chip.is-active .weekend-town-count {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* Closing CTA band */
.weekend-cta-band,
.community-cta-band {
    background: linear-gradient(160deg, var(--kc-evergreen) 0%, var(--kc-teal) 100%);
    color: rgba(255, 255, 255, 0.9);
}
.weekend-cta-inner { text-align: center; max-width: 44rem; margin: 0 auto; }
.weekend-cta-inner h2 { color: #fff; font-size: var(--kc-text-2xl); margin-bottom: var(--kc-space-3); }
.weekend-cta-inner p { color: rgba(255, 255, 255, 0.88); }
.weekend-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kc-space-3);
    justify-content: center;
    margin-top: var(--kc-space-5);
}
.weekend-cta-band .btn-outline,
.community-cta-band .btn-outline {
    border-color: rgba(255, 255, 255, 0.7);
    color: #fff;
}
.weekend-cta-band .btn-outline:hover,
.community-cta-band .btn-outline:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

/* Community editorial bits */
.community-intro-text { max-width: 46rem; margin: 0 auto; }
.community-quote-section { background: var(--kc-paper-deep); }

/* Community grid, shared by the community index and the town pages. */
.community-grid {
    display: grid;
    gap: var(--kc-space-4);
    grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}
.community-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: var(--kc-space-5) var(--kc-space-4);
    background: var(--kc-surface);
    border: 1px solid var(--kc-line);
    border-radius: var(--kc-radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform var(--kc-medium) var(--kc-ease), box-shadow var(--kc-medium) var(--kc-ease);
}
.community-card:hover { transform: translateY(-3px); box-shadow: var(--kc-shadow); color: inherit; }
/* Keep card text above the photo watermark. */
.community-card > *:not(.kc-logo-watermark) { position: relative; z-index: 1; }
.community-card-name {
    font-family: var(--kc-font-display);
    font-size: var(--kc-text-lg);
    font-weight: 700;
    color: var(--kc-evergreen);
}
.community-card-region {
    font-size: var(--kc-text-xs);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--kc-teal);
    margin-bottom: var(--kc-space-2);
}
.community-card-blurb { font-size: var(--kc-text-sm); color: var(--kc-slate); line-height: 1.55; }
.community-card-meta { font-size: var(--kc-text-sm); color: var(--kc-slate-soft); margin-top: var(--kc-space-2); }
.community-card-cta {
    margin-top: auto;
    padding-top: var(--kc-space-3);
    font-size: var(--kc-text-sm);
    font-weight: 600;
    color: var(--kc-teal);
}
.explore-communities-cta { text-align: center; margin-top: var(--kc-space-6); }

/* --------------------------------------------------------------------------
   4. Cards and chips carried over from the old directory markup
   -------------------------------------------------------------------------- */

.kc-card-grid,
.kc-grid--plain {
    list-style: none;
    margin: 0;
    padding: 0;
}
.kc-card-grid {
    display: grid;
    gap: var(--kc-space-4);
    grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr));
}

/* Templates written before core.css use the single-dash names. */
.kc-faq-item {
    background: var(--kc-surface);
    border: 1px solid var(--kc-line);
    border-radius: var(--kc-radius);
    padding: var(--kc-space-4);
    margin-bottom: var(--kc-space-3);
}
.kc-faq-item h3 { font-size: var(--kc-text-lg); margin-bottom: var(--kc-space-2); }
.kc-faq-item p { margin: 0; }

.kc-chip--community { background: var(--kc-teal-soft); border-color: #C8DFE3; }

/* --------------------------------------------------------------------------
   5. Testimonial quotes on community pages
   -------------------------------------------------------------------------- */

.testimonial-quote {
    max-width: 40rem;
    margin: 0 auto;
    text-align: center;
}
.testimonial-quote blockquote {
    position: relative;
    margin: 0 0 var(--kc-space-2);
    padding-top: var(--kc-space-5);
    font-size: var(--kc-text-lg);
    line-height: 1.5;
    color: var(--kc-slate);
}
.testimonial-quote blockquote::before {
    content: '\201C';
    position: absolute;
    top: -0.3em;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--kc-font-display);
    font-size: 3rem;
    line-height: 1;
    color: var(--kc-teal);
    opacity: 0.45;
}
.testimonial-cite {
    font-size: var(--kc-text-sm);
    font-weight: 600;
    color: var(--kc-evergreen);
}
.testimonial-source { font-weight: 400; color: var(--kc-slate-soft); }
.testimonial-quote--feature {
    padding: var(--kc-space-6);
    background: var(--kc-surface);
    border: 1px solid var(--kc-line);
    border-radius: var(--kc-radius);
}

/* --------------------------------------------------------------------------
   6. Affiliate + fundraise funnel
   --------------------------------------------------------------------------
   Ported from the previous stylesheet. These blocks were already written
   against the brand variables, which core.css keeps aliased, so they pick up
   the new palette without change. The apply form, live share-link preview and
   success animation are unchanged behaviour.
   -------------------------------------------------------------------------- */
/* ============================================================
   Affiliate page (/affiliate/)
   Namespaced .aff-* so nothing leaks to other pages.
   ============================================================ */

/* The funnel heroes ride on .kc-hero--photo, which supplies the dark overlay
   and the white type; this only names the photograph behind it. */
.aff-hero {
    background-image: url('/images/hero/creston-valley-hero.jpg');
    background-size: cover;
    background-position: center;
}
.aff-hero .kc-hero__inner {
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.22);
}
.aff-hero .kc-hero__icon {
    text-shadow: none;
    margin-bottom: var(--kc-space-4);
}
.aff-hero .kc-hero__lead {
    max-width: 44rem;
    margin: 0 auto var(--kc-space-6);
}

.aff-hero-cta {
    margin-top: 0.5rem;
}

/* Shared intro copy under section headings. */
.aff-section-intro {
    text-align: center;
    color: var(--mountain-slate);
    max-width: 760px;
    margin: 0 auto 3rem;
    font-size: 1.05rem;
    line-height: 1.7;
}

/* ---------- Benefits section ---------- */
.aff-benefits-section {
    padding: 72px 0;
    background: white;
}

.aff-benefits-section h2 {
    color: var(--evergreen);
    font-size: 2.25rem;
    text-align: center;
    margin-bottom: 0.75rem;
    font-family: 'Merriweather', serif;
}

.aff-benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 1.75rem;
}

.aff-benefit-card {
    background: var(--alpine-white);
    padding: 1.75rem 1.75rem 1.5rem;
    border-radius: var(--radius);
    border-left: 4px solid var(--golden-sun);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.aff-benefit-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.aff-benefit-card h3 {
    color: var(--evergreen);
    font-size: 1.2rem;
    margin-bottom: 0.6rem;
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    line-height: 1.35;
}

.aff-benefit-icon {
    font-size: 1.75rem;
    line-height: 1;
    flex-shrink: 0;
}

.aff-benefit-card p {
    color: var(--mountain-slate);
    line-height: 1.7;
    font-size: 0.98rem;
}

/* ---------- How-it-works flow (Feature H) ---------- */
.aff-flow-section {
    padding: 72px 0;
    background: linear-gradient(180deg, var(--alpine-white) 0%, white 100%);
}

.aff-flow-section h2 {
    color: var(--evergreen);
    font-size: 2.25rem;
    text-align: center;
    margin-bottom: 0.75rem;
    font-family: 'Merriweather', serif;
}

.aff-flow {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0.5rem;
    max-width: 1080px;
    margin: 0 auto;
    padding: 2.5rem 1rem;
    background: white;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    flex-wrap: nowrap;
}

.aff-flow-station {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 96px;
    max-width: 140px;
}

.aff-flow-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--evergreen) 0%, var(--river-blue) 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: var(--shadow-md);
    margin-bottom: 0.75rem;
    transition: transform 0.3s ease;
}

.aff-flow-station:hover .aff-flow-icon {
    transform: scale(1.08);
}

.aff-flow-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--mountain-slate);
    line-height: 1.35;
}

.aff-flow-connector {
    flex: 1 1 32px;
    min-width: 32px;
    max-width: 80px;
    height: 4px;
    margin-top: 32px;
    border-radius: 2px;
    background-image: repeating-linear-gradient(
        90deg,
        var(--golden-sun) 0 10px,
        transparent 10px 20px
    );
    background-size: 20px 4px;
    background-repeat: repeat-x;
    animation: aff-dashflow 1.6s linear infinite;
}

@keyframes aff-dashflow {
    from { background-position: 0 0; }
    to   { background-position: 20px 0; }
}

@media (prefers-reduced-motion: reduce) {
    .aff-flow-connector { animation: none; }
}

/* ---------- Audience chips ---------- */
.aff-audience-section {
    padding: 72px 0;
    background: var(--alpine-white);
}

.aff-audience-section h2 {
    color: var(--evergreen);
    font-size: 2.25rem;
    text-align: center;
    margin-bottom: 0.75rem;
    font-family: 'Merriweather', serif;
}

.aff-audience-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    max-width: 960px;
    margin: 0 auto 2rem;
}

.aff-audience-chip {
    background: white;
    border: 1px solid rgba(31, 70, 54, 0.12);
    color: var(--evergreen);
    padding: 0.6rem 1.05rem;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.aff-audience-chip:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--golden-sun);
}

.aff-audience-chip span {
    font-size: 1.1rem;
    line-height: 1;
}

.aff-audience-note {
    text-align: center;
    max-width: 780px;
    margin: 0 auto;
    color: var(--mountain-slate);
    line-height: 1.7;
    font-style: italic;
}

/* ---------- "What to expect" step journey ---------- */
.aff-expect-section {
    padding: 72px 0;
    background: white;
}

.aff-expect-section h2 {
    color: var(--evergreen);
    font-size: 2.25rem;
    text-align: center;
    margin-bottom: 0.75rem;
    font-family: 'Merriweather', serif;
}

.aff-expect-section .aff-section-intro {
    margin-bottom: 2.5rem;
}

/* ---------- Apply form ---------- */
.aff-apply-section {
    padding: 72px 0 96px;
    background: linear-gradient(180deg, var(--alpine-white) 0%, #edf2ee 100%);
}

.aff-apply-card {
    max-width: 720px;
    margin: 0 auto;
    background: white;
    border-radius: 16px;
    padding: 3rem 2.5rem;
    box-shadow: var(--shadow-lg);
}

.aff-apply-header {
    text-align: center;
    margin-bottom: 2rem;
}

.aff-apply-header h2 {
    color: var(--evergreen);
    font-size: 2rem;
    margin-bottom: 0.5rem;
    font-family: 'Merriweather', serif;
}

.aff-apply-intro {
    color: var(--mountain-slate);
    line-height: 1.65;
}

.aff-form {
    display: block;
}

.aff-form-message {
    display: none;
    padding: 0.95rem 1.1rem;
    border-radius: 8px;
    margin-bottom: 1.25rem;
    font-size: 0.95rem;
    font-weight: 500;
}

.aff-form-message--success {
    display: block;
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.aff-form-message--error {
    display: block;
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.aff-form-group {
    margin-bottom: 1.4rem;
}

.aff-form-group label {
    display: block;
    color: var(--evergreen);
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 0.98rem;
}

.aff-field-hint {
    display: block;
    color: var(--mountain-slate);
    font-weight: 400;
    font-size: 0.82rem;
    margin-top: 0.2rem;
    opacity: 0.8;
}

.aff-required {
    color: #c0392b;
    margin-left: 0.15rem;
}

.aff-form-group input,
.aff-form-group select,
.aff-form-group textarea {
    width: 100%;
    padding: 0.8rem 0.95rem;
    border: 1px solid #d8ddd5;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    color: var(--mountain-slate);
    background: white;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.aff-form-group input:focus,
.aff-form-group select:focus,
.aff-form-group textarea:focus {
    outline: none;
    border-color: var(--river-blue);
    box-shadow: 0 0 0 3px rgba(45, 111, 126, 0.15);
}

.aff-form-group select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231F4636' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 10px 7px;
    padding-right: 2.5rem;
    cursor: pointer;
}

.aff-form-group textarea {
    min-height: 130px;
    resize: vertical;
    line-height: 1.55;
}

.aff-code-input {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

/* Code rule chips (replaces the bulleted rules list) */
.aff-code-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.aff-chip {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 500;
    background: rgba(45, 111, 126, 0.08);
    color: var(--river-blue);
    border: 1px solid rgba(45, 111, 126, 0.18);
}

.aff-chip--muted {
    background: rgba(59, 75, 84, 0.06);
    color: var(--mountain-slate);
    border-color: rgba(59, 75, 84, 0.15);
}

.aff-code-hint {
    margin-top: 0.75rem;
    font-size: 0.88rem;
    color: var(--mountain-slate);
    line-height: 1.55;
}

.aff-code-hint strong {
    color: var(--evergreen);
    background: rgba(242, 182, 50, 0.2);
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    font-weight: 600;
}

/* Live share-link + QR preview (Feature A) */
.aff-preview {
    margin: 0 0 1.75rem;
    padding: 1.25rem;
    border: 1px solid rgba(45, 111, 126, 0.25);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(242, 182, 50, 0.07) 0%, rgba(45, 111, 126, 0.07) 100%);
    animation: aff-preview-in 0.35s ease-out;
}

@keyframes aff-preview-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.aff-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
    flex-wrap: wrap;
}

.aff-preview-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--river-blue);
}

.aff-preview-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: rgba(45, 111, 126, 0.12);
    color: var(--river-blue);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.aff-preview-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--river-blue);
    box-shadow: 0 0 0 0 rgba(45, 111, 126, 0.6);
    animation: aff-pulse 1.6s ease-out infinite;
}

@keyframes aff-pulse {
    0% { box-shadow: 0 0 0 0 rgba(45, 111, 126, 0.55); }
    70% { box-shadow: 0 0 0 10px rgba(45, 111, 126, 0); }
    100% { box-shadow: 0 0 0 0 rgba(45, 111, 126, 0); }
}

.aff-preview-body {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.aff-preview-text {
    flex: 1 1 auto;
    min-width: 0;
}

.aff-preview-url {
    background: white;
    color: var(--evergreen);
    border: 1px solid rgba(31, 70, 54, 0.15);
    border-radius: 8px;
    padding: 0.55rem 0.85rem;
    font-family: 'Poppins', monospace;
    font-size: 0.92rem;
    font-weight: 600;
    word-break: break-all;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

.aff-preview-note {
    margin: 0.7rem 0 0;
    font-size: 0.82rem;
    color: var(--mountain-slate);
    line-height: 1.55;
}

.aff-preview-qr {
    flex: 0 0 auto;
    width: 104px;
    height: 104px;
    padding: 6px;
    background: white;
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.aff-preview-qr canvas,
.aff-preview-qr img {
    width: 100% !important;
    height: 100% !important;
    display: block;
    border-radius: 4px;
}

.aff-submit {
    width: 100%;
    background: linear-gradient(135deg, var(--evergreen) 0%, var(--river-blue) 100%);
    color: white;
    padding: 1rem 2rem;
    font-size: 1.05rem;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}

.aff-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(31, 70, 54, 0.25);
    color: white;
}

.aff-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.aff-recaptcha-notice {
    margin-top: 1rem;
    text-align: center;
    font-size: 0.78rem;
    color: var(--mountain-slate);
    opacity: 0.75;
    line-height: 1.5;
}

.aff-recaptcha-notice a {
    color: var(--river-blue);
}

/* ---------- Success state (Feature F) ---------- */
.aff-success {
    text-align: center;
    padding: 1rem 0.5rem 0.5rem;
}

.aff-success h3 {
    color: var(--evergreen);
    font-family: 'Merriweather', serif;
    font-size: 1.75rem;
    margin: 0.5rem 0 0.75rem;
}

.aff-success-body {
    color: var(--mountain-slate);
    line-height: 1.7;
    max-width: 520px;
    margin: 0 auto 1.75rem;
}

.aff-success-cta {
    margin-top: 0.25rem;
}

.aff-success-check {
    width: 104px;
    height: 104px;
    display: block;
    margin: 0.5rem auto 0.25rem;
}

.aff-check-circle,
.aff-check-mark {
    stroke: var(--evergreen);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.aff-check-circle {
    stroke: var(--river-blue);
    stroke-dasharray: 239;
    stroke-dashoffset: 239;
}

.aff-check-mark {
    stroke-dasharray: 80;
    stroke-dashoffset: 80;
}

.aff-success.is-visible .aff-check-circle {
    animation: aff-draw-circle 0.55s ease-out forwards;
}

.aff-success.is-visible .aff-check-mark {
    animation: aff-draw-check 0.4s 0.45s ease-out forwards;
}

@keyframes aff-draw-circle {
    to { stroke-dashoffset: 0; }
}

@keyframes aff-draw-check {
    to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .aff-success.is-visible .aff-check-circle,
    .aff-success.is-visible .aff-check-mark {
        animation: none;
        stroke-dashoffset: 0;
    }
    .aff-preview { animation: none; }
    .aff-preview-badge::before { animation: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .aff-flow {
        flex-direction: column;
        align-items: center;
        gap: 0;
        padding: 2rem 1rem;
    }
    .aff-flow-station {
        max-width: 280px;
    }
    .aff-flow-connector {
        width: 4px;
        height: 36px;
        margin: 0;
        background-image: repeating-linear-gradient(
            0deg,
            var(--golden-sun) 0 10px,
            transparent 10px 20px
        );
        background-size: 4px 20px;
        background-repeat: repeat-y;
        animation: aff-dashflow-v 1.6s linear infinite;
    }
    @keyframes aff-dashflow-v {
        from { background-position: 0 0; }
        to   { background-position: 0 20px; }
    }
}

@media (max-width: 640px) {
    .aff-hero {
        padding-block: var(--kc-space-7) var(--kc-space-6);
    }
    .aff-hero .kc-hero__title {
        font-size: var(--kc-text-3xl);
    }
    .aff-hero .kc-hero__lead {
        font-size: var(--kc-text-base);
    }
    .aff-hero .kc-hero__icon {
        width: 56px;
        height: 56px;
        font-size: 1.6rem;
    }
    .aff-benefits-section,
    .aff-flow-section,
    .aff-audience-section,
    .aff-expect-section {
        padding: 56px 0;
    }
    .aff-benefits-section h2,
    .aff-flow-section h2,
    .aff-audience-section h2,
    .aff-expect-section h2,
    .aff-apply-header h2 {
        font-size: 1.75rem;
    }
    .aff-apply-card {
        padding: 2rem 1.4rem;
        border-radius: 12px;
    }
    .aff-preview-body {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    .aff-preview-qr {
        align-self: center;
    }
    .aff-preview-url {
        font-size: 0.85rem;
    }
    .aff-audience-chip {
        font-size: 0.88rem;
        padding: 0.5rem 0.85rem;
    }
}



/* --------------------------------------------------------------------------
   7. Detail pages (business, offer, event)
   --------------------------------------------------------------------------
   The three detail templates share one layout: a main column with the body
   copy and a sidebar with the practical details. Below 860px the sidebar
   drops under the article.
   -------------------------------------------------------------------------- */

.kc-detail {
    display: grid;
    gap: var(--kc-space-6);
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: start;
}
@media (max-width: 860px) {
    .kc-detail { grid-template-columns: 1fr; }
}

.kc-detail__media {
    width: 100%;
    height: auto;
    border-radius: var(--kc-radius);
    margin-bottom: var(--kc-space-5);
}
.kc-detail h2 { margin-top: var(--kc-space-6); margin-bottom: var(--kc-space-3); }
.kc-detail > article > :first-child { margin-top: 0; }

/* Sidebar blocks */
.kc-aside {
    background: var(--kc-paper);
    border: 1px solid var(--kc-line);
    border-radius: var(--kc-radius);
    padding: var(--kc-space-4);
}
.kc-aside + .kc-aside { margin-top: var(--kc-space-4); }
.kc-aside h3 { font-size: var(--kc-text-base); margin-bottom: var(--kc-space-3); }
.kc-aside p { margin-bottom: var(--kc-space-2); }
.kc-aside p:last-child { margin-bottom: 0; }

.kc-hours {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--kc-space-1) var(--kc-space-3);
    margin: 0;
}
.kc-hours dt { text-transform: capitalize; color: var(--kc-slate-soft); }
.kc-hours dd { margin: 0; }

/* Offer list on a business page */
.kc-offer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--kc-space-3);
}
.kc-offer-list li {
    padding: var(--kc-space-4);
    background: var(--kc-surface);
    border: 1px solid var(--kc-line);
    border-radius: var(--kc-radius);
    transition: border-color var(--kc-fast) var(--kc-ease), box-shadow var(--kc-fast) var(--kc-ease);
}
.kc-offer-list li:hover { border-color: var(--kc-teal-light); box-shadow: var(--kc-shadow-sm); }
.kc-offer-list h3 { font-size: var(--kc-text-lg); margin-bottom: var(--kc-space-2); }
.kc-offer-list h3 a { color: var(--kc-evergreen); text-decoration: none; }
.kc-offer-list h3 a:hover { color: var(--kc-teal); }
.kc-offer-list .kc-card__meta { margin-bottom: var(--kc-space-2); }

/* Small inline app prompt that closes a detail page. */
.kc-app-nudge {
    margin-top: var(--kc-space-6);
    padding: var(--kc-space-5);
    border-radius: var(--kc-radius);
    background: linear-gradient(160deg, var(--kc-evergreen) 0%, var(--kc-teal) 100%);
    color: rgba(255, 255, 255, 0.92);
    text-align: center;
}
.kc-app-nudge p { margin-bottom: var(--kc-space-4); }

/* Business name in an offer-page hero, and the collapsible fine print. */
.kc-hero__biz {
    color: var(--kc-teal);
    font-weight: 600;
    text-decoration: none;
}
.kc-hero__biz:hover { text-decoration: underline; }

.kc-fineprint { margin-top: var(--kc-space-4); }
.kc-fineprint summary {
    cursor: pointer;
    color: var(--kc-teal);
    font-weight: 600;
}
.kc-fineprint p { margin-top: var(--kc-space-2); }

/* .kc-app-nudge normally has top margin; this kills it where the block is
   already the first thing in its section. */
.kc-app-nudge.kc-mt-0 { margin-top: 0; }

/* "When / Where / More info" lines on an event page. */
.kc-factline {
    color: var(--kc-slate-soft);
    margin-bottom: var(--kc-space-3);
}
.kc-factline strong { color: var(--kc-slate); }

/* --------------------------------------------------------------------------
   8. Press kit
   -------------------------------------------------------------------------- */

.kc-press-row { margin: var(--kc-space-4) 0; }
.kc-press-head .kc-btn { min-height: 44px; }
.kc-press-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--kc-space-3);
    margin-bottom: var(--kc-space-2);
}
.kc-press-label { font-size: var(--kc-text-base); color: var(--kc-evergreen); margin: 0; font-weight: 700; }
.kc-press-key   { font-weight: 600; color: var(--kc-slate-soft); }
.kc-press-quote { font-style: italic; margin: 0; }
.kc-press-avatar {
    width: 128px;
    height: 128px;
    object-fit: cover;
    border-radius: 50%;
}
.kc-plain-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--kc-space-4);
}
.kc-plain-list--tight { gap: var(--kc-space-2); }
.kc-deflist {
    display: grid;
    grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
    gap: var(--kc-space-2) var(--kc-space-5);
    margin: 0;
}
.kc-deflist dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.kc-deflist dt { min-width: 0; }
@media (max-width: 560px) {
    .kc-deflist { grid-template-columns: 1fr; gap: 0; }
    .kc-deflist dt { color: var(--kc-slate-soft); font-size: var(--kc-text-sm); }
    .kc-deflist dd { margin-bottom: var(--kc-space-3); }
}

.kc-press-bio {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--kc-space-5);
    align-items: start;
}
@media (max-width: 640px) {
    .kc-press-bio { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}

/* Small explanatory note tucked under a form field on /events/submit/. */
.evs-note {
    margin: calc(-1 * var(--kc-space-2)) 0 var(--kc-space-5);
    font-size: var(--kc-text-sm);
    color: var(--kc-slate-soft);
}