.feedback-page { --feedback-ink: #203b35; --feedback-muted: #667a75; --feedback-green: #78b90d; color: var(--feedback-ink); font-family: "Open Sans", sans-serif; }
.feedback-page h1, .feedback-page h2, .feedback-page h3 { font-family: "Raleway", sans-serif; }
.feedback-wrap { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }
.feedback-main { padding-top: 76px; }
.feedback-hero { position: relative; overflow: hidden; padding: 26px 0 68px; background: linear-gradient(118deg, #f5f8ed 0%, #fff9ed 58%, #eef7fb 100%); }
.feedback-breadcrumb { display: flex; gap: 10px; margin: 0 0 42px; padding: 0; color: #788780; font-size: .82rem; list-style: none; }
.feedback-breadcrumb li + li::before { padding-right: 10px; color: #aab4ae; content: "/"; }
.feedback-breadcrumb a { color: #527d12; text-decoration: none; }
.feedback-breadcrumb a:hover { text-decoration: underline; }
.feedback-hero-content { position: relative; z-index: 1; max-width: 720px; }
.feedback-eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; color: #a9761e; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.feedback-eyebrow span { width: 22px; height: 2px; background: #e9b533; }
.feedback-hero h1 { max-width: 720px; margin: 0 0 17px; color: var(--feedback-ink); font-size: clamp(2.4rem, 5vw, 4.2rem); font-weight: 800; letter-spacing: -.05em; line-height: 1.07; }
.feedback-hero-content > p:not(.feedback-eyebrow) { max-width: 620px; margin: 0 0 25px; color: var(--feedback-muted); font-size: 1rem; line-height: 1.8; }
.feedback-primary { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 10px; padding: 12px 20px; border: 1px solid #6eaa0b; border-radius: 999px; background: var(--feedback-green); color: #fff; font-size: .88rem; font-weight: 700; text-decoration: none; transition: transform 160ms ease, background 160ms ease; }
.feedback-primary:hover, .feedback-primary:focus-visible { transform: translateY(-2px); background: #639c05; color: #fff; }
.feedback-hero-mark { position: absolute; top: 50%; right: max(3%, calc((100vw - 1250px) / 2)); width: 230px; height: 230px; transform: translateY(-40%); }
.feedback-hero-mark > span:first-child { position: absolute; inset: 20px; display: grid; place-items: center; border: 1px solid rgba(105, 157, 53, .2); border-radius: 50%; background: rgba(255,255,255,.66); color: #70a91b; font-size: 5rem; box-shadow: 0 20px 50px rgba(34, 58, 49, .08); }
.feedback-mark-star { position: absolute; top: 0; right: 28px; color: #efb72b; font-size: 2.6rem; }
.feedback-mark-book { position: absolute; bottom: 3px; left: 15px; display: grid; width: 64px; height: 64px; place-items: center; border: 5px solid #fff; border-radius: 18px; background: #203b35; color: #9ad540; font-size: 1.8rem; box-shadow: 0 10px 24px rgba(28, 58, 46, .18); }
.feedback-topics { padding: 72px 0 78px; background: #fff; }
.feedback-heading { max-width: 690px; margin: 0 auto 30px; text-align: center; }
.feedback-heading .feedback-eyebrow { justify-content: center; }
.feedback-heading h2, .feedback-cta h2 { margin: 0 0 12px; color: var(--feedback-ink); font-size: clamp(1.8rem, 3.2vw, 2.55rem); font-weight: 800; letter-spacing: -.035em; }
.feedback-heading > p:last-child { margin: 0; color: var(--feedback-muted); font-size: .93rem; line-height: 1.7; }
.feedback-topic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feedback-topic-card { min-height: 220px; padding: 27px; border: 1px solid #e6ece3; border-radius: 17px; background: #fff; box-shadow: 0 8px 24px rgba(31, 61, 49, .05); transition: transform 180ms ease, box-shadow 180ms ease; }
.feedback-topic-card:hover { transform: translateY(-4px); box-shadow: 0 15px 32px rgba(31, 61, 49, .1); }
.feedback-topic-icon { display: grid; width: 48px; height: 48px; margin-bottom: 20px; place-items: center; border-radius: 14px; font-size: 1.2rem; }
.topic-green { background: #eff7e6; color: #70a91b; }.topic-gold { background: #fff6df; color: #d59614; }.topic-blue { background: #e9f6fc; color: #289bd0; }
.feedback-topic-card h3 { margin: 0 0 9px; color: var(--feedback-ink); font-size: 1.14rem; font-weight: 750; }
.feedback-topic-card p { margin: 0; color: var(--feedback-muted); font-size: .87rem; line-height: 1.7; }
.feedback-cta { padding: 36px 0; background: #f5f8ef; }
.feedback-cta > .feedback-wrap { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.feedback-cta h2 { max-width: 700px; margin-bottom: 8px; font-size: clamp(1.45rem, 2.5vw, 2rem); }
.feedback-cta p:last-child { max-width: 760px; margin: 0; color: var(--feedback-muted); font-size: .87rem; line-height: 1.65; }

.feedback-testimonials { padding: 66px 0 72px; background: linear-gradient(180deg, #f7faf4, #fff); }
.feedback-testimonial-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.feedback-testimonial-heading h2 { margin: 0 0 8px; color: var(--feedback-ink); font-family: "Raleway", sans-serif; font-size: clamp(1.7rem, 3vw, 2.35rem); font-weight: 800; letter-spacing: -.035em; }
.feedback-testimonial-heading .feedback-eyebrow { margin-bottom: 9px; }
.feedback-sample-note { margin: 0; color: var(--feedback-muted); font-size: .82rem; line-height: 1.5; }
.feedback-slider-controls { display: flex; gap: 10px; flex: 0 0 auto; }
.feedback-slider-controls button { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid #dbe6d5; border-radius: 50%; background: #fff; color: var(--feedback-ink); cursor: pointer; transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 160ms ease; }
.feedback-slider-controls button:hover { transform: translateY(-2px); border-color: var(--feedback-green); background: var(--feedback-green); color: #fff; }
.feedback-slider-controls button:focus-visible, .feedback-slider-dots button:focus-visible { outline: 3px solid rgba(120, 185, 13, .4); outline-offset: 3px; }
.feedback-slider { position: relative; display: grid; grid-auto-columns: calc((100% - 40px) / 3); grid-auto-flow: column; gap: 20px; overflow-x: auto; padding: 4px 2px 18px; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; }
.feedback-slider::-webkit-scrollbar { display: none; }
.feedback-quote-card { position: relative; display: flex; min-height: 240px; flex-direction: column; padding: 27px; border: 1px solid #e6ece3; border-radius: 18px; background: #fff; box-shadow: 0 10px 28px rgba(31, 61, 49, .07); scroll-snap-align: start; }
.feedback-quote-mark { height: 34px; color: #83bd20; font-family: Georgia, serif; font-size: 3.4rem; line-height: 1; }
.feedback-quote-card > p { flex: 1; margin: 12px 0 24px; color: #405a53; font-size: .96rem; line-height: 1.75; }
.feedback-quote-author { display: flex; align-items: center; gap: 12px; }
.feedback-avatar { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 50%; background: #edf6df; color: #5d9410; font-weight: 800; }
.avatar-gold { background: #fff3d5; color: #bc8517; }.avatar-blue { background: #e5f3fa; color: #2688b3; }
.feedback-quote-author strong, .feedback-quote-author small { display: block; }
.feedback-quote-author strong { color: var(--feedback-ink); font-size: .86rem; }
.feedback-quote-author small { margin-top: 3px; color: #84918b; font-size: .75rem; }
.feedback-slider-dots { display: flex; justify-content: center; gap: 8px; padding-top: 8px; }
.feedback-slider-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; background: #d5ded1; cursor: pointer; transition: width 180ms ease, background 180ms ease; }
.feedback-slider-dots button[aria-current="true"] { width: 26px; background: var(--feedback-green); }

@media (max-width: 767.98px) {
  .feedback-wrap { width: min(100% - 32px, 560px); }
  .feedback-main { padding-top: 64px; }
  .feedback-hero { padding: 20px 0 42px; }
  .feedback-breadcrumb { margin-bottom: 30px; }
  .feedback-hero h1 { max-width: 15ch; font-size: clamp(2.2rem, 10vw, 3rem); }
  .feedback-hero-mark { top: auto; right: 0; bottom: 0; width: 110px; height: 110px; opacity: .65; transform: none; }
  .feedback-hero-mark > span:first-child { inset: 18px; font-size: 2.5rem; }
  .feedback-mark-star { top: 0; right: 5px; font-size: 1.5rem; }
  .feedback-mark-book { bottom: 0; left: 0; width: 42px; height: 42px; border-width: 3px; border-radius: 12px; font-size: 1.1rem; }
  .feedback-topics { padding: 50px 0; }
  .feedback-topic-grid { grid-template-columns: 1fr; gap: 13px; }
  .feedback-topic-card { min-height: auto; padding: 22px; }
  .feedback-topic-icon { margin-bottom: 14px; }
  .feedback-cta > .feedback-wrap { align-items: flex-start; flex-direction: column; gap: 18px; }
  .feedback-cta .feedback-primary { width: 100%; }
  .feedback-testimonials { padding: 48px 0 54px; }
  .feedback-testimonial-heading { align-items: flex-start; }
  .feedback-testimonial-heading .feedback-eyebrow { margin-top: 0; }
  .feedback-slider { grid-auto-columns: min(88%, 360px); gap: 14px; margin-right: -2px; touch-action: pan-x pan-y; }
  .feedback-quote-card { min-height: 225px; padding: 22px; }
  .feedback-topic-card, .feedback-quote-card { min-width: 0; }
  .feedback-slider-controls button { width: 46px; height: 46px; }
  .feedback-slider-dots button { min-width: 12px; min-height: 12px; }
}

@media (max-width: 480px) {
  .feedback-wrap { width: calc(100% - 28px); }
  .feedback-main { padding-top: 56px; }
  .feedback-hero { padding: 17px 0 34px; }
  .feedback-breadcrumb { margin-bottom: 24px; font-size: .78rem; }
  .feedback-hero h1 { max-width: 13ch; font-size: clamp(2rem, 10vw, 2.65rem); }
  .feedback-hero-content > p:not(.feedback-eyebrow) { max-width: 34ch; font-size: .94rem; line-height: 1.7; }
  .feedback-hero-mark { right: -22px; bottom: -4px; opacity: .35; }
  .feedback-testimonial-heading { flex-direction: column; gap: 14px; }
  .feedback-testimonial-heading h2 { max-width: 14ch; font-size: 1.75rem; }
  .feedback-sample-note { font-size: .78rem; }
  .feedback-slider { grid-auto-columns: calc(100% - 20px); gap: 12px; }
  .feedback-quote-card { min-height: 218px; padding: 20px; }
  .feedback-quote-card > p { font-size: .92rem; }
  .feedback-topic-grid { gap: 12px; }
  .feedback-cta { padding: 30px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .feedback-slider { scroll-behavior: auto; }
  .feedback-topic-card, .feedback-primary, .feedback-slider-controls button, .feedback-slider-dots button { transition: none; }
}