/* Reviews — light section that continues the globe's dawn gradient into the FAQ */
.reviews { background: linear-gradient(180deg, var(--sky-200) 0%, var(--sky-50) 28%, #fff 100%); padding-bottom: calc(var(--section-y) + 40px); }
.reviews__grid { display: grid; gap: var(--space-7); align-items: start; }
@media (min-width: 960px) { .reviews__grid { grid-template-columns: 1fr 1.05fr; gap: var(--space-8); } }
.reviews__head { max-width: 34rem; }
.reviews__summary { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; margin-top: var(--space-3); }
.reviews__summary[hidden] { display: none; }
.reviews__avg { font: 800 var(--fs-3xl)/1 var(--font-display); color: var(--navy-800); }
.reviews__count { color: var(--ink-soft); font-size: var(--fs-sm); }
.reviews__stars svg, .rcard__stars svg { width: 20px; height: 20px; fill: var(--gold); stroke: var(--gold-deep); stroke-width: 0.5; }
.reviews__stars svg.off, .rcard__stars svg.off { fill: transparent; stroke: var(--line-strong); stroke-width: 1.5; }

.reviews-form { padding: clamp(1.25rem, 3vw, 2rem); display: grid; gap: var(--space-4); box-shadow: var(--shadow-md); position: relative; }
.reviews-form__title { font-size: var(--fs-xl); color: var(--navy-800); }
.reviews-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.reviews-form legend, .reviews-form label { font-weight: 600; font-size: var(--fs-sm); color: var(--navy-800); }
.reviews-form .opt { color: var(--ink-mute); font-weight: 400; }
.reviews-form__row { display: grid; gap: var(--space-4); }
@media (min-width: 560px) { .reviews-form__row { grid-template-columns: 1.3fr 1fr; } }
.field { display: grid; gap: 6px; }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 0.75rem 1rem; border-radius: var(--r-sm); border: 1.5px solid var(--line-strong); background: #fff; font-size: 1rem; color: var(--ink); transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 4px rgba(31, 122, 232, 0.2); }
.reviews-form__help { font-size: var(--fs-xs); color: var(--ink-mute); }
.reviews-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.reviews-form__error { color: var(--rot-dark); font-weight: 600; font-size: var(--fs-sm); }
.reviews-form__thanks { display: flex; gap: 0.6rem; align-items: flex-start; color: #0a6b34; font-weight: 600; }
.reviews-form__thanks .icon { color: #12a150; margin-top: 3px; }
.reviews-form [hidden] { display: none; }
.reviews-form [aria-invalid="true"] { border-color: var(--rot); }

/* star picker: DOM order 5→1, reversed visually so sibling selectors fill leftwards */
.starpick { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; margin-top: 6px; position: relative; }
.starpick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.starpick label { cursor: pointer; padding: 4px; line-height: 0; }
.starpick svg { width: 38px; height: 38px; fill: transparent; stroke: var(--line-strong); stroke-width: 1.5; transition: transform var(--dur-base) var(--ease-spring), fill var(--dur-fast), stroke var(--dur-fast); }
.starpick label:hover svg, .starpick label:hover ~ label svg, .starpick input:checked ~ label svg { fill: var(--gold); stroke: var(--gold-deep); }
.starpick label:hover svg { transform: scale(1.15) rotate(-6deg); }
.starpick input:focus-visible + label { outline: 3px solid var(--blue-400); outline-offset: 2px; border-radius: 8px; }

.reviews__wall { margin-top: var(--space-8); columns: 1; column-gap: var(--space-5); }
@media (min-width: 700px) { .reviews__wall { columns: 2; } }
@media (min-width: 1040px) { .reviews__wall { columns: 3; } }
.reviews__empty { column-span: all; text-align: center; color: var(--ink-soft); font-size: var(--fs-lg); padding: var(--space-6); border: 2px dashed var(--line-strong); border-radius: var(--r-lg); }
.reviews__empty[hidden] { display: none; }
.rcard { break-inside: avoid; margin: 0 0 var(--space-5); padding: var(--space-5); background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base); }
.rcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.rcard__text { margin: var(--space-3) 0 var(--space-4); color: var(--ink); line-height: 1.6; overflow-wrap: anywhere; }
.rcard__foot { display: flex; align-items: center; gap: 0.75rem; }
.rcard__avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 800 1rem var(--font-display); color: #fff; background: var(--grad-blue); flex: none; }
.rcard__name { font-weight: 700; color: var(--navy-800); display: block; line-height: 1.2; }
.rcard__meta { font-size: var(--fs-xs); color: var(--ink-mute); }