/* ==========================================================================
   Cardinal Star Healing — page-specific styles (public content pages)
   --------------------------------------------------------------------------
   Only what the individual pages need on top of assets/css/site.css. Every
   color, radius and font comes from the theme variables, never hard-coded.
   Loaded after site.css and before the theme <style>, so :root is never
   redefined here.

   Contents: 1 shared bits (service cards, newsletter block)  2 home  3 about
             4 services  5 learn  6 reviews  7 contact  8 policies  9 unsubscribe
             10 2.1 offers (payment note, callouts, workshops, course steps, policy rules)
             11 2.2 reviews (home testimonials band, "Share your experience" panel,
                the shared review form, the private invitation page /review/{token})
   ========================================================================== */

/* 1. Shared: service cards, newsletter block
   -------------------------------------------------------------------------- */
.service-card { gap: .9rem; }
.service-card .service-head { display: flex; flex-direction: column; gap: .25rem; }
.service-card .card-title { margin: 0; }
.service-card .card-tagline { margin: 0; }
.service-link { color: inherit; text-decoration: none; }
.service-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.service-link:hover { color: var(--primary-strong); }
.service-card .card-foot .btn, .service-card .meta a { position: relative; z-index: 1; }
.service-card .meta { font-size: .92rem; }
.service-card .meta .icon { color: var(--primary); }
.service-card .card-foot { border-top: 1px solid var(--line); padding-top: 1rem; }
.service-card .price { color: var(--ink); }
.service-kicker {
  display: inline-flex; align-items: center; gap: .5rem; margin: 0;
  font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.service-kicker .card-dot { width: .6rem; height: .6rem; }
.service-desc-short { color: var(--muted); font-size: .97rem; }
.service-desc { font-size: .97rem; color: var(--muted); }
.service-desc p { margin: 0 0 .75em; }
.service-desc p:last-child { margin-bottom: 0; }
.service-desc .list-stars { margin: 0 0 .75em; }
.service-desc .list-stars li { margin-bottom: .35rem; }
.service-desc .list-stars:last-child { margin-bottom: 0; }
.service-note { display: flex; gap: .45rem; align-items: flex-start; margin-top: .75rem; padding-top: .75rem; border-top: 1px dashed var(--line); color: var(--muted); }
.service-note .icon { flex: none; margin-top: .2rem; color: var(--secondary-strong); }

/* The newsletter block: portrait cut-out beside the heading and the sign-up form.
   The portrait PNG ends in a straight cut at the torso, so it is pulled down through the band's
   bottom padding and sits on the band's edge, which hides the cut (as on the live site); the band
   clips the overhang. Below 900px it stacks last, under the form, flush with the same edge. */
.newsletter { overflow: hidden; }
.newsletter-in { display: grid; gap: 2rem; align-items: center; text-align: center; }
.newsletter-portrait { display: flex; justify-content: center; align-items: flex-end; order: 2; margin-bottom: calc(-1 * var(--section-y)); }
.newsletter-portrait .cutout { max-height: 18rem; }
.newsletter-portrait .img-fallback { width: 12rem; min-height: 15rem; border-radius: 50% 50% var(--radius-card) var(--radius-card); }
.newsletter-body .lead { margin: 0 auto 1.5rem; max-width: 32rem; }
.newsletter-body .eyebrow { margin-bottom: .75rem; }
.newsletter-body h2, .newsletter-body .newsletter-title { margin-bottom: .4em; }
.newsletter-form { max-width: 32rem; margin: 0 auto; }
.newsletter-form .input-group { gap: .6rem; }
.newsletter-form .form-note { text-align: left; }
.newsletter-dark .newsletter-portrait .cutout { filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .45)); }
.newsletter-dark .lead { color: var(--on-dark-muted); }
.newsletter-tint .newsletter-portrait .cutout { filter: drop-shadow(0 18px 30px rgba(var(--dark-rgb), .28)); }
.newsletter-tint .lead { color: var(--on-tint); opacity: .8; }
.newsletter-tint .form-note.is-ok { color: var(--success); }
.newsletter .input-group .btn { white-space: nowrap; }

@media (min-width: 900px) {
  .newsletter-in { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); text-align: left; }
  .newsletter-portrait { order: 0; align-self: end; }
  .newsletter-portrait .cutout { max-height: 22rem; }
  .newsletter-body .lead { margin-left: 0; }
  .newsletter-form { margin-left: 0; }
  .newsletter-body .eyebrow { justify-content: flex-start; }
}

/* 2. Home
   -------------------------------------------------------------------------- */
.home-intro-text h2 { margin-bottom: .5em; }
.home-lockup { display: flex; justify-content: center; align-items: center; order: -1; }
.home-lockup .lockup { max-width: min(100%, 15rem); }
.home-lockup .img-fallback { width: 15rem; min-height: 15rem; border-radius: 50%; }
.home-tiles .tile { aspect-ratio: 3 / 2; }
.home-services .section-head .lead { max-width: 36rem; margin-left: auto; margin-right: auto; }
.home-review .quote-lg { padding-left: 0; }
.home-review .quote-lg .eyebrow { margin-bottom: 1.25rem; }
.home-review .quote-mark { color: var(--accent); opacity: .5; }
.home-review .quote-text { color: var(--on-dark); }
.home-review .quote-cite { color: var(--on-dark-muted); }

@media (min-width: 900px) {
  .home-lockup { order: 0; }
  .home-lockup .lockup { max-width: min(100%, 22rem); }
  .home-tiles .tile { aspect-ratio: 4 / 5; }
}

/* 3. About
   -------------------------------------------------------------------------- */
.about-plate {
  position: relative; overflow: hidden; margin: 0 0 2rem;
  padding: clamp(1.75rem, 5vw, 3rem) clamp(1.5rem, 5vw, 2.75rem);
  background: var(--tint); color: var(--on-tint); border-radius: var(--radius-card);
}
.about-plate-decor { position: absolute; inset: 0; pointer-events: none; display: none; }
.about-plate-decor .star { position: absolute; color: var(--accent); opacity: .35; }
.about-plate-decor .star:nth-child(1) { right: 1.25rem; top: 1rem; width: 1.3rem; height: 1.3rem; }
.about-plate-decor .star:nth-child(2) { right: 3rem; top: 2.6rem; width: .6rem; height: .6rem; }
[data-decor="stars"] .about-plate-decor { display: block; }
.about-heading { margin: 0; font-size: clamp(2rem, 1.6rem + 2vw, 3rem); line-height: 1.15; position: relative; }
.about-body p { margin-bottom: 1.2em; }
.about-body p.first-big::first-letter { font-family: var(--font-display); font-size: 2.6em; line-height: .8; float: left; padding: .12em .12em 0 0; color: var(--primary-strong); }
.about-media { max-width: 30rem; margin: 0 auto; width: 100%; }
.about-portrait .img-portrait { aspect-ratio: 4 / 5; }
.about-portrait .img-fallback { aspect-ratio: 4 / 5; min-height: 0; }
.about-photo img { aspect-ratio: 4 / 3; object-fit: cover; }
.about-photo .img-fallback { aspect-ratio: 4 / 3; min-height: 0; }
.about-cta .lead { margin-left: auto; margin-right: auto; max-width: 34rem; }

@media (min-width: 900px) {
  .about-cols { align-items: start; }
  .about-media { margin: 0 0 0 auto; }
  .about-text { padding-top: .25rem; }
}

/* 4. Services
   -------------------------------------------------------------------------- */
.service-jump { padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.service-jump .pill { text-decoration: none; color: var(--ink); transition: border-color .15s var(--ease), color .15s var(--ease), transform .15s var(--ease); }
.service-jump .pill:hover { border-color: var(--primary); color: var(--primary-strong); transform: translateY(-1px); }
.service-jump .pill .muted { font-weight: 400; }
.service-group { scroll-margin-top: calc(var(--head-h) + 1rem); }
.service-group .section-head { max-width: 40rem; }
/* Exactly four services (the readings) sit two by two, so no card is left alone on a second row. */
.service-grid-4 > .card { min-height: 100%; }
/* A group with a single service: one wide card, the details on the left and the price + button
   as a side panel, instead of a lone half-width card in an otherwise empty two-column grid. */
.service-grid-1 { display: grid; }
@media (min-width: 640px) {
  .service-grid-1 > .service-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr; column-gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
  .service-grid-1 > .service-card > .service-head, .service-grid-1 > .service-card > .meta, .service-grid-1 > .service-card > .card-body, .service-grid-1 > .service-card > .offer-callout { grid-column: 1; }
  .service-grid-1 > .service-card > .card-foot { grid-row: 1 / 5; }
  .service-grid-1 > li > .service-card { display: flex; }
  .service-grid-1 > .service-card > .card-foot {
    grid-column: 2; grid-row: 1 / 4; align-self: stretch; flex-direction: column; align-items: flex-end; justify-content: center; gap: 1rem;
    margin: 0; padding: 0 0 0 clamp(1.5rem, 4vw, 3rem); border-top: 0; border-left: 1px solid var(--line);
  }
  .service-grid-1 > .service-card > .card-foot .price { font-size: 1.9rem; }
}
.service-policy .divider { margin-top: 0; }
.service-policy .accordion-body p { margin-bottom: 1em; }

/* 5. Learn
   -------------------------------------------------------------------------- */
.learn-hero .hero-eyebrow { gap: .6rem; }
.learn-hero .hero-eyebrow span { display: inline-flex; align-items: center; padding: .35rem .9rem; border-radius: var(--radius-sm); background: var(--accent); color: var(--on-accent); font-size: .74rem; letter-spacing: .12em; }
.learn-hero .hero-eyebrow .star { display: none; }
.learn-point-list { counter-reset: learn; }
.learn-point {
  display: flex; gap: 1rem; align-items: flex-start; margin: 0;
  padding: 1.25rem 1.35rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.learn-point:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--primary-soft); }
.learn-point p { margin: 0; font-size: 1.02rem; line-height: 1.55; }
.learn-point-n { display: inline-flex; flex-direction: column; align-items: center; gap: .15rem; flex: none; min-width: 2.2rem; font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; color: var(--primary-strong); line-height: 1; margin-top: .05rem; }
.learn-point-n .star { width: 1rem; height: 1rem; }
.learn-option-grid { max-width: 56rem; margin-left: auto; margin-right: auto; }
.learn-faq .accordion-group { box-shadow: var(--shadow-card); }
.learn-cta .lead { color: var(--on-dark-muted); max-width: 34rem; margin-left: auto; margin-right: auto; }

/* 6. Reviews
   -------------------------------------------------------------------------- */
.reviews-hero .hero-title-1 { font-size: 1em; }
.reviews-hero .hero-title-1::first-letter { font-size: 1.35em; line-height: .8; }
.reviews-hero .hero-title-2 { font-size: .58em; letter-spacing: .02em; margin-top: .4em; font-weight: 400; }
.reviews-note-band { border-bottom: 1px solid var(--line); }
.reviews-note { margin: 0; padding: 1.1rem 0; text-align: center; font-family: var(--font-display); font-style: italic; font-size: .95rem; color: var(--muted); }
.reviews-grid { display: grid; gap: 1.5rem; max-width: 52rem; margin: 0 auto; }
.review-card { padding: clamp(1.5rem, 4vw, 2.5rem); }
.review-card.is-featured { border-top: 4px solid var(--accent); }
.review-card .quote-card { padding-left: 0; }
.review-card .quote-mark { color: var(--accent); opacity: .45; }
.review-card .quote-text { font-size: clamp(1.02rem, .98rem + .3vw, 1.18rem); }
.review-card .quote-cite { margin-top: 1.25rem; }
.review-card .quote-cite .star { color: var(--accent); }
.reviews-share-intro .small { display: flex; gap: .4rem; align-items: flex-start; }
.reviews-share-intro .small .icon { flex: none; margin-top: .2rem; }
.review-form .form-grid-2 { gap: 0 1rem; }
.form-card .form-actions { margin-top: .25rem; }
.form-card .form-note { margin-top: 1rem; }
.form-card .form-note:empty { display: none; }

/* 7. Contact
   -------------------------------------------------------------------------- */
.contact-intro h1 { font-size: clamp(2.2rem, 1.8rem + 2vw, 3.25rem); }
.contact-email-label { margin: 0 0 .35rem; font-size: .76rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.social-contact { margin-top: 1.5rem; }
.social-contact a { border-color: var(--line-strong); }
/* 2.4: the "Email me" card in place of the old contact form. */
.contact-card { position: relative; padding: clamp(1.5rem, 4vw, 2.5rem); border-top: 3px solid var(--primary); }
.contact-card-mark {
  display: inline-flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; margin-bottom: 1.1rem;
  border-radius: 50%; background: var(--primary-soft); color: var(--primary-strong);
}
.contact-card-title { margin: 0 0 .6rem; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); }
.contact-card-text { margin: 0 0 1.5rem; max-width: 34rem; color: var(--muted); font-size: 1.02rem; }
.contact-email-row { margin: 0 0 .25rem; }
.contact-card-clients {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem;
  margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px dashed var(--line-strong);
}
.contact-card-clients p { display: flex; gap: .5rem; align-items: flex-start; margin: 0; flex: 1 1 16rem; color: var(--muted); font-size: .95rem; }
.contact-card-clients p .icon { flex: none; margin-top: .15rem; color: var(--secondary-strong); }
.gone-email { display: flex; justify-content: center; margin: 1.25rem 0 0; }
.contact-details { display: grid; gap: 1.25rem; margin: 0; }
.contact-detail { display: grid; gap: .5rem; padding: 1.25rem 1.35rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.contact-detail dt { display: flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.contact-detail dt .icon { color: var(--primary); }
.contact-detail dd { margin: 0; }
.contact-detail dd p { margin: 0 0 .4em; }
.contact-detail dd p:last-child { margin-bottom: 0; }

@media (min-width: 640px) {
  .contact-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-detail:nth-child(2) { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .contact-details { grid-template-columns: 1fr; }
  .contact-detail:nth-child(2) { grid-column: auto; }
}
@media (min-width: 1200px) {
  .contact-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-detail:nth-child(2) { grid-column: 1 / -1; }
}

/* 8. Policies
   -------------------------------------------------------------------------- */
.policies-hero .hero-in { text-align: left; }
.policies-hero .hero-eyebrow { justify-content: flex-start; }
.policies-hero .hero-lead { margin-left: 0; }
.policies-hero .hero-decor .star { color: var(--accent); }
/* This hero is left-aligned and only as tall as its text, so the stars keep to the padding bands
   above and below the copy (fixed offsets) instead of the percentage spots, which land on the eyebrow. */
.policies-hero .hero-decor .star:nth-child(1) { left: 7%; top: 1.1rem; }
.policies-hero .hero-decor .star:nth-child(2) { right: 8%; top: 1.5rem; }
.policies-hero .hero-decor .star:nth-child(3) { left: 14%; top: auto; bottom: 1rem; }
@media (min-width: 900px) {
  .policies-hero .hero-decor .star:nth-child(1) { left: 10%; top: 1.9rem; }
  .policies-hero .hero-decor .star:nth-child(2) { right: 12%; top: 2.5rem; }
  .policies-hero .hero-decor .star:nth-child(3) { left: 18%; bottom: 1.75rem; }
}
.policies-toc { margin: 0 0 2.5rem; }
.policies-toc .pill { text-decoration: none; color: var(--ink); transition: border-color .15s var(--ease), color .15s var(--ease); }
.policies-toc .pill:hover { border-color: var(--primary); color: var(--primary-strong); }
.policy-section { scroll-margin-top: calc(var(--head-h) + 1rem); max-width: none; }
.policy-section h2 { font-size: clamp(1.6rem, 1.4rem + 1vw, 2.1rem); }
.policy-section p { font-size: 1.05rem; }
.policy-section .small { display: flex; gap: .4rem; align-items: flex-start; font-size: .92rem; }
.policy-section .small .icon { flex: none; margin-top: .2rem; }
.policy-term { font-family: var(--font-display); font-weight: 600; }
.policies .divider { margin: 2.75rem 0; }
.policies-foot { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--line); }

/* 9. Unsubscribe (api/unsubscribe.php) and 2.4 the newsletter confirmation page (/newsletter/confirm/{token})
   -------------------------------------------------------------------------- */
.unsubscribe .lead { max-width: 34rem; margin-left: auto; margin-right: auto; }
.unsubscribe .form-actions { justify-content: center; }
.nl-confirm { min-height: 60vh; display: flex; align-items: center; }
.nl-confirm > .wrap { width: 100%; }
.nl-confirm-card { position: relative; max-width: 38rem; margin: 0 auto; padding: clamp(2rem, 5vw, 3.25rem) clamp(1.25rem, 4vw, 3rem); }
.nl-confirm-mark {
  display: flex; align-items: center; justify-content: center; width: 3.75rem; height: 3.75rem; margin: 0 auto 1rem;
  border-radius: 50%; background: var(--primary-soft); color: var(--primary-strong);
}
.nl-confirm-confirmed .nl-confirm-mark, .nl-confirm-already .nl-confirm-mark { background: var(--success-soft); color: var(--success); }
.nl-confirm-card .eyebrow { justify-content: center; }
.nl-confirm-card h1 { font-size: clamp(2rem, 1.6rem + 1.8vw, 2.8rem); margin-bottom: .4em; }
.nl-confirm-card .lead { max-width: 32rem; margin-left: auto; margin-right: auto; }
.nl-confirm-card .form-actions { justify-content: center; }
.nl-confirm-email { overflow-wrap: anywhere; color: var(--ink); }

/* 10. 2.1 offers: payment note, course / check-in callouts, workshops, course steps, policy rules
   -------------------------------------------------------------------------- */
.offer-pay-band { padding: 1.25rem 0 0; }
.offer-pay-note { margin: 0; }
.offer-pay-note a { white-space: nowrap; }
.offer-callout {
  display: flex; gap: .65rem; align-items: flex-start; margin: 0;
  padding: .85rem 1rem; border-radius: var(--radius-input);
  background: var(--accent-soft); border-left: 4px solid var(--accent); color: var(--ink);
}
.offer-callout > .icon { flex: none; margin-top: .15rem; color: var(--accent); }
.offer-callout p { margin: 0; }
.offer-callout p + p { margin-top: .3rem; }
.offer-callout-title { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.offer-callout-sm { padding: .6rem .8rem; font-size: .92rem; border-left-width: 3px; }
.offer-callout-sm > .icon { margin-top: .2rem; }
.workshop-list > li { display: flex; min-width: 0; }
.workshop-list > li > .card { flex: 1; min-width: 0; }
.workshop-seats { font-weight: 600; }
.workshop-card.is-full { opacity: .85; }
.workshop-card .service-kicker time { letter-spacing: inherit; }
.learn-pay-note { max-width: 56rem; margin: 2rem auto 0; }
.learn-course-steps { display: grid; gap: 1rem; margin: 0; counter-reset: none; }
.learn-course-step {
  display: flex; gap: 1rem; align-items: flex-start; margin: 0;
  padding: 1.1rem 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
}
.learn-course-step p { margin: 0; line-height: 1.55; }
.learn-course-n {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem;
  border-radius: 50%; background: var(--primary-soft); color: var(--primary-strong); font-family: var(--font-display); font-weight: 600;
}
.policy-rules-lead { margin-bottom: .75rem; }
.policy-rules { display: grid; gap: .75rem; margin: 0 0 1.5rem; }
.policy-rule {
  display: flex; gap: .85rem; align-items: flex-start; margin: 0;
  padding: 1rem 1.15rem; border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--radius-input); background: var(--surface);
}
.policy-rule p { margin: 0; }
.policy-rule-mark { flex: none; display: inline-flex; margin-top: .2rem; }
.policy-rule-free { border-left-color: var(--success); }
.policy-rule-free .policy-rule-mark { color: var(--success); }
.policy-rule-late { border-left-color: var(--warn); }
.policy-rule-late .policy-rule-mark { color: var(--warn); }
.policy-rule-locked { border-left-color: var(--primary); }
.policy-rule-locked .policy-rule-mark { color: var(--primary); }

/* 11. 2.2 reviews: home testimonials band, the "Share your experience" panel, the shared form,
   the invitation page. No stars, no ratings: only words and names.
   -------------------------------------------------------------------------- */
.home-review-head { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.home-review-head .eyebrow { justify-content: center; margin: 0; }
.home-review-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin: 0 auto; padding: 0; list-style: none; max-width: 68rem; }
.home-review-grid > li { display: flex; min-width: 0; margin: 0; }
.home-quote {
  flex: 1; margin: 0; padding: clamp(1.25rem, 3vw, 1.75rem);
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius-card);
}
.home-quote .quote-mark { color: var(--accent); opacity: .55; }
.home-quote .quote-text { font-size: clamp(1rem, .96rem + .25vw, 1.12rem); color: var(--on-dark); }
.home-quote .quote-cite { color: var(--on-dark-muted); }
.home-review-none { max-width: 34rem; margin: 0 auto; }
.home-review-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: .75rem 1rem; margin-top: clamp(2rem, 4vw, 3rem); }
.home-review .btn-outline { color: var(--on-dark); border-color: rgba(255, 255, 255, .7); }
.home-review .btn-outline:hover { background: #fff; border-color: #fff; color: #1D1E20; }
.home-review-share { text-align: center; }
.home-review-share[open] { flex: 1 1 100%; }
.home-review-toggle { list-style: none; display: inline-flex; }
.home-review-toggle::-webkit-details-marker { display: none; }
.home-review-toggle::marker { content: ""; }
.home-review-share[open] > .home-review-toggle { box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); }
.home-review-panel { max-width: 42rem; margin: 1.5rem auto 0; text-align: left; }
.home-review-panel .form-card { color: var(--ink); }
.home-review-panel .form-card :is(p, h3, label, span) { color: inherit; }
.home-review-panel .form-card .hint, .home-review-panel .form-card .review-form-consent { color: var(--muted); }
.home-review-panel .form-card .field-error { color: var(--danger); }
/* Inside the light card the fields look as they do on a light page (the dark band makes them borderless white). */
.home-review-panel .form-card .input { background: var(--input-bg); color: var(--ink); border-color: var(--input-border); }
.home-review-panel .form-card .input:focus { border-color: var(--primary); background: var(--surface); }
.home-review-panel .form-card .input[aria-invalid="true"] { border-color: var(--danger); }
.home-review-panel .form-card .form-note.is-ok { color: var(--success); }
.home-review-panel .form-card .form-note.is-error { color: var(--danger); }
.home-review-panel .btn-ghost { color: var(--link); }
.home-review-intro { text-align: center; margin: 0 auto 1.25rem; max-width: 36rem; }
.home-review .home-review-intro p { color: var(--on-dark-muted); margin: 0; }

/* 2.4: reviews come from Amy's clients (the public forms are gone). */
.home-review-actions { align-items: center; flex-direction: column; }
.home-review-clients { max-width: 34rem; margin: 0; font-family: var(--font-prose, var(--font-display)); font-style: italic; color: var(--on-dark-muted); text-align: center; text-wrap: balance; }
.home-review-clients .star { display: inline-block; width: .85rem; height: .85rem; margin-right: .45rem; vertical-align: -.05em; color: var(--accent); }
.reviews-clients-card { max-width: 40rem; margin: 0 auto; padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.25rem, 4vw, 2.75rem); text-align: center; }
.reviews-clients-card .eyebrow { justify-content: center; }
.reviews-clients-card .lead { max-width: 32rem; margin-left: auto; margin-right: auto; }
.reviews-clients-portal { display: inline-flex; gap: .5rem; align-items: flex-start; margin: 0 auto; max-width: 32rem; color: var(--muted); text-align: left; }
.reviews-clients-portal .icon { flex: none; margin-top: .2rem; color: var(--secondary-strong); }
.policies-ask, .not-found-ask { line-height: 1.9; }
.not-found-ask { margin-top: 2rem; }

.review-form-fields[hidden] { display: none; }
.review-form-consent { display: flex; gap: .45rem; align-items: flex-start; margin: 0 0 1rem; color: var(--muted); }
.review-form-consent .icon { flex: none; margin-top: .2rem; color: var(--primary); }
.review-form.is-sent .form-note { margin-top: 0; font-size: 1.05rem; }
.review-form .form-note:focus { outline: none; }
.review-form .form-note:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.review-thanks { text-align: center; }
.review-thanks:focus { outline: none; }
.review-thanks-mark { margin: 0 0 .5rem; color: var(--accent); }
.review-thanks-mark .star { width: 1.4rem; height: 1.4rem; }
.review-thanks-text { margin: 0; font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); }

.review-invite-head { margin-bottom: 1.75rem; }
.review-invite-head .eyebrow { justify-content: center; }
.review-invite-head .lead { max-width: 34rem; margin-left: auto; margin-right: auto; }
.review-invite-note { display: inline-flex; gap: .4rem; align-items: flex-start; text-align: left; max-width: 34rem; margin: .5rem auto 0; }
.review-invite-note .icon { flex: none; margin-top: .2rem; }
.review-invite-form { max-width: 38rem; margin: 0 auto; }
.review-invite-done .lead { max-width: 34rem; margin-left: auto; margin-right: auto; }

@media (min-width: 768px) {
  .home-review-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 52rem; }
  .home-review-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-review-grid-3 > li:last-child { grid-column: 1 / -1; max-width: 34rem; justify-self: center; width: 100%; }
}
@media (min-width: 1024px) {
  .home-review-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-review-grid-3 > li:last-child { grid-column: auto; max-width: none; }
}

/* Reduced motion: nothing here animates on its own; hover lifts are harmless. */
@media (prefers-reduced-motion: reduce) {
  .learn-point:hover, .service-jump .pill:hover { transform: none; }
  .home-review-toggle:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   2.5: gift cards (/gift, the services band, the card art)
   -------------------------------------------------------------------------- */
.gift-layout { display: grid; gap: 1.5rem; align-items: start; }
.gift-form { padding: clamp(1.1rem, 4vw, 2rem); min-width: 0; }
.gift-fieldset { border: 0; margin: 0 0 1.5rem; padding: 0; min-width: 0; }
.gift-legend { display: flex; gap: .65rem; align-items: center; font-family: var(--font-display); font-size: 1.3rem; font-weight: var(--heading-weight); margin: 0 0 1rem; padding: 0; }
.gift-step { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--primary-soft); color: var(--primary-strong); font-family: var(--font-body); font-size: .95rem; font-weight: 700; flex: none; }
.gift-amounts { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: .6rem; margin: 0 0 .5rem; }
.gift-amount { position: relative; display: block; cursor: pointer; }
.gift-amount input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.gift-amount span { display: flex; align-items: center; justify-content: center; min-height: 3rem; padding: .55rem .75rem; border: 1.5px solid var(--line-strong); border-radius: var(--radius-input); background: var(--surface); font-weight: 600; text-align: center; transition: border-color .15s, background .15s, box-shadow .15s; }
.gift-amount-wide { grid-column: span 2; }
.gift-amount input:checked + span { border-color: var(--primary); background: var(--primary-soft); color: var(--ink); box-shadow: 0 0 0 1px var(--primary) inset; }
.gift-amount input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.gift-amount:hover span { border-color: var(--primary); }
.gift-money { display: flex; align-items: center; gap: .4rem; max-width: 12rem; }
.gift-money > span { font-weight: 600; color: var(--muted); }
.gift-when { border: 0; padding: 0; margin: 0 0 1rem; }
.gift-terms { display: flex; gap: .5rem; align-items: flex-start; }
.gift-terms .icon { flex: none; margin-top: .15rem; }
.gift-aside { display: flex; flex-direction: column; gap: 1.25rem; }
.gift-points { margin: 0; }

/* The card art: the same look as the gift email (dark to primary, with the star). */
.gift-card-art {
  position: relative; display: flex; flex-direction: column; gap: .35rem; aspect-ratio: 1.586; max-width: 26rem; width: 100%;
  padding: clamp(1rem, 4vw, 1.4rem); border-radius: 18px; color: #FFFFFF; overflow: hidden;
  background: linear-gradient(135deg, var(--dark) 0%, var(--dark-3, var(--dark)) 45%, var(--primary) 100%);
  box-shadow: var(--shadow-hover);
}
.gift-card-art::after { content: ''; position: absolute; inset: auto -20% -45% auto; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .18), transparent 65%); pointer-events: none; }
.gift-card-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.gift-card-brand { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; opacity: .9; }
.gift-card-star { width: 1.4rem; height: 1.4rem; color: #FFFFFF; flex: none; }
.gift-card-amount { font-family: var(--font-display); font-size: clamp(1.8rem, 6vw, 2.6rem); line-height: 1.1; margin: auto 0 0; color: #FFFFFF; overflow-wrap: anywhere; }
.gift-card-to { display: flex; flex-wrap: wrap; gap: 0 .4rem; margin: 0; font-size: .95rem; opacity: .95; color: #FFFFFF; }
.gift-card-from { opacity: .85; }
.gift-card-code { margin: .25rem 0 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; font-size: .85rem; opacity: .7; color: #FFFFFF; }

.gift-promo { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; padding: clamp(1.1rem, 4vw, 1.75rem); }
.gift-promo-mark { display: inline-flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--primary-soft); color: var(--primary-strong); flex: none; }
.gift-promo-body h2 { margin: 0 0 .35rem; }
@media (min-width: 760px) {
  .gift-promo { flex-direction: row; align-items: center; }
  .gift-promo-body { flex: 1; }
}
@media (min-width: 900px) {
  .gift-layout { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 2rem; }
  .gift-aside { position: sticky; top: calc(var(--head-h) + 1.5rem); }
}