/*
 * Reviews (route "reviews", 29 Sep 2026): this page's own components, after site.css (PA_Seo::open page_css).
 * 1 the hero's rating stage (the score, the prism's lanes into the rating bars)  2 the review wall
 * 3 the wide record card  4 the review form. Mobile first; kit tokens only; no figures (PHP prints them).
 */

/* 1 Rating stage ---------------------------------------------------------------------------- */
.pa-rate { position: relative; isolation: isolate; display: grid; gap: 26px; margin-top: 30px; }
.pa-rate::before { content: ""; position: absolute; z-index: -1; inset: -30px -8% -20px; pointer-events: none; background: radial-gradient(38% 60% at 62% 55%, rgba(106, 162, 255, .12), transparent 72%), radial-gradient(30% 50% at 12% 45%, rgba(60, 211, 238, .06), transparent 70%); }
.pa-rate__score { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 20px; }
.pa-rate__score > .pa-stat__label { grid-column: 1 / -1; }
.pa-rate__n { display: flex; align-items: flex-start; font: 700 clamp(5rem, 2.4rem + 8.4vw, 9.5rem)/.84 var(--pa-font); letter-spacing: -.045em; color: var(--pa-text); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.pa-rate__of { margin: .1em 0 0 .06em; font-size: .3em; font-weight: 600; line-height: 1; letter-spacing: 0; color: var(--pa-text-3); }
.pa-rate__meta { display: grid; gap: 8px; justify-items: start; }
.pa-rate__stars { width: clamp(130px, 14vw, 196px); fill: var(--pa-text); filter: drop-shadow(0 0 10px rgba(238, 243, 250, .28)); }
.pa-rate__stars .is-off { fill: none; stroke: var(--pa-text-3); stroke-width: 1.2; }
.pa-rate__txt { max-width: 36ch; font-size: var(--pa-fs-sm); color: var(--pa-text-2); }
.pa-rate__dist { display: grid; grid-template-columns: 84px minmax(0, 1fr); }
.pa-rate__fan { position: relative; }
.pa-rate__fan svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pa-rate__fan path { fill: none; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pa-rate__beam { stroke: rgba(238, 243, 250, .85); filter: drop-shadow(0 0 3px rgba(238, 243, 250, .7)); }
.pa-rate__l { stroke: var(--c); filter: drop-shadow(0 0 3px var(--c)); opacity: .9; }
.pa-rate__glass { position: absolute; z-index: 1; left: 46%; top: 50%; width: 48px; transform: translate(-50%, -58%); filter: drop-shadow(0 0 14px rgba(106, 162, 255, .5)); }
/* the lanes and bars: the spectrum, 5 stars at the top (light only, never amber) */
.pa-rate__l:nth-of-type(2), .pa-rate__bars li:nth-child(1) { --c: #b6e35a; }
.pa-rate__l:nth-of-type(3), .pa-rate__bars li:nth-child(2) { --c: var(--pa-go); }
.pa-rate__l:nth-of-type(4), .pa-rate__bars li:nth-child(3) { --c: var(--pa-fx); }
.pa-rate__l:nth-of-type(5), .pa-rate__bars li:nth-child(4) { --c: #6aa2ff; }
.pa-rate__l:nth-of-type(6), .pa-rate__bars li:nth-child(5) { --c: #a98bff; }
.pa-rate__bars { display: grid; grid-template-rows: repeat(5, 28px); gap: 10px; margin: 0; padding: 0; list-style: none; }
.pa-rate__bars li { display: grid; grid-template-columns: 52px minmax(0, 1fr) 22px; align-items: center; gap: 10px; }
.pa-rate__k { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 28px; border: 1px solid var(--c); border-radius: 999px; background: var(--pa-ink-1); box-shadow: 0 0 14px -6px var(--c); font: 650 var(--pa-fs-xs)/1 var(--pa-font); color: var(--pa-text); }
.pa-rate__k svg { width: 12px; fill: var(--c); }
.pa-rate__bar { position: relative; height: 6px; border-radius: 3px; background: rgba(148, 178, 230, .12); }
.pa-rate__bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--w, 0) * 100%); border-radius: inherit; background: var(--c); box-shadow: 0 0 12px var(--c); transform-origin: left center; }
.pa-rate__bars b { font-size: var(--pa-fs-sm); font-weight: 600; text-align: right; color: var(--pa-text); }
/* a rating nobody gave: its count stays printed, its lane and chip go dark (the light lands on the ratings given) */
.pa-rate__bars li.is-zero { --c: var(--pa-line-strong); }
.pa-rate__bars li.is-zero .pa-rate__k { box-shadow: none; color: var(--pa-text-3); }
.pa-rate__bars li.is-zero b { color: var(--pa-text-3); }
.pa-rate__l.is-zero { opacity: .3; filter: none; }
.pa-rate__meta .pa-ver { text-wrap: balance; }
.pa-rate-fallback { margin-top: 28px; max-width: 820px; }
@media (min-width: 600px) { .pa-rate__dist { grid-template-columns: 150px minmax(0, 1fr); } .pa-rate__glass { width: 60px; } }
@media (min-width: 1024px) {
	.pa-rate { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 56px; margin-top: 44px; }
	.pa-rate__score { grid-template-columns: minmax(0, 1fr); }
	.pa-rate__meta { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 18px; }
	.pa-rate__meta .pa-ver { grid-column: 1 / -1; }
	.pa-rate__dist { grid-template-columns: 250px minmax(0, 1fr); }
	.pa-rate__glass { width: 92px; }
	.pa-rate__bars li { grid-template-columns: 58px minmax(0, 1fr) 26px; gap: 14px; }
}

/* 2 Review wall: two featured, then four across (phones: one column, the whole text) ---------- */
.pa-rwall { display: grid; gap: 14px; }
.pa-rwall > .pa-rev:nth-child(-n+2) { padding: clamp(20px, 2.6vw, 30px); }
.pa-rwall > .pa-rev:nth-child(-n+2) .pa-rev__q { font-size: var(--pa-fs-lg); line-height: 1.5; letter-spacing: -.01em; }
.pa-rwall > .pa-rev:nth-child(-n+2) .pa-rev__q::before { content: "\201C"; display: block; height: .42em; margin: -4px 0 6px; font: 700 3.5rem/1 var(--pa-font); color: var(--pa-fx); }
.pa-rwall__note { margin-top: 18px !important; }
@media (min-width: 768px) { .pa-rwall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1100px) { .pa-rwall { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pa-rwall > .pa-rev:nth-child(-n+2) { grid-column: span 2; } }

/* 3 The wide record card -------------------------------------------------------------------- */
.pa-rrec { gap: 22px; padding: clamp(20px, 3vw, 36px); }
.pa-rrec__body { display: grid; gap: 20px; }
.pa-rrec .pa-stat__value { font-family: var(--pa-font); font-weight: 700; letter-spacing: -.04em; }
.pa-rrec .pa-proof__figs { align-items: end; }
.pa-rrec .pa-proof__figs .pa-stat__value { font-size: min(4.5rem, 10.5cqi); }
.pa-rrec .pa-spark { height: clamp(84px, 11vw, 136px); }
.pa-rrec .pa-spark-line { filter: drop-shadow(0 0 5px rgba(60, 211, 238, .45)); }
/* the fitted drawing: true proportions (dots stay round); as on the home, the floor's value sits above its line at the
   right end and 0% under the baseline (the margin makes room for it) */
.pa-rrec__plot { position: relative; margin-bottom: 20px; }
.pa-rrec .pa-rrec__spark { display: block; height: auto; aspect-ratio: 480 / 150; }
.pa-rrec__spark .pa-spark-line { stroke: url(#pa-rrec-line); stroke-width: 2.4; }
.pa-rrec__grid { fill: none; stroke: var(--pa-line); stroke-width: 1; }
.pa-rrec__rise { fill: none; stroke: var(--pa-text); stroke-width: 1.4; stroke-dasharray: 3 4; opacity: .7; }
.pa-rrec__start { fill: var(--pa-ink-0); stroke: var(--pa-text-2); stroke-width: 1.4; }
.pa-rrec__end { fill: var(--pa-text); stroke: var(--pa-fx); stroke-width: 2.2; filter: drop-shadow(0 0 6px rgba(60, 211, 238, .7)); }
.pa-rrec__ax { right: 0; transform: translateY(calc(-100% - 4px)); }
.pa-rrec__ax--0 { transform: translateY(4px); }
.pa-rrec__links { display: flex; flex-wrap: wrap; gap: 0 22px; }
@media (min-width: 900px) { .pa-rrec__body { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px; align-items: end; } }

/* 4 The review form: the kit's steps rail, then one wide card (a grid from 1024 px: nothing left empty) --- */
.pa-rform .pa-steps { margin-bottom: clamp(32px, 4.4vw, 52px); }
@media (min-width: 900px) { .pa-rform .pa-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pa-rform .pa-steps h3 { min-height: 0; } }
.pa-review-form-wrap { display: grid; gap: 16px; }
.pa-review-form.pa-rule { gap: 0; padding: clamp(18px, 3vw, 32px); border-radius: var(--pa-r-3); }
/* the stack beats the kit's p { margin: 0 } and the fieldset reset below */
.pa-review-form.pa-stack > * + * { margin-top: 22px; }
.pa-review-form.pa-stack > .pa-review-form__disclaimer { margin-top: 12px; }
.pa-review-form__grid { display: grid; gap: 18px; }
@media (min-width: 600px) { .pa-review-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; } .pa-review-form__grid > label:last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* from 1024 px every field sits on one 3-column grid (the inner grid's labels join it):
   name | email | order;  country | plan | rating;  title;  review;  consent + disclaimer | submit */
@media (min-width: 1024px) {
	.pa-review-form.pa-rule { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 24px 20px; }
	.pa-review-form.pa-stack > * + * { margin-top: 0; }
	.pa-review-form__grid { display: contents; }
	.pa-review-form__grid > label:last-child:nth-child(odd) { grid-column: auto; }
	.pa-review-form > .pa-rf__f { grid-column: 1 / -1; }
	.pa-review-form > :is(.pa-review-form__consent, .pa-review-form__disclaimer) { grid-column: 1 / span 2; }
	.pa-review-form.pa-stack > .pa-review-form__disclaimer { margin-top: -12px; }
	.pa-review-form > .pa-review-form__submit { grid-column: 3; grid-row: span 2; align-self: center; }
	.pa-review-form textarea.pa-rf__in { height: 120px; }
}
.pa-rf__f { display: flex; flex-direction: column; gap: 6px; font-size: var(--pa-fs-sm); font-weight: 600; color: var(--pa-text); }
.pa-rf__help { font-size: var(--pa-fs-xs); font-weight: 400; color: var(--pa-text-3); }
.pa-rf__f > .pa-rf__in { margin-top: auto; }
.pa-rf__in { display: block; width: 100%; min-height: 48px; padding: 11px 16px; border: 1px solid var(--pa-line-strong); border-radius: 12px; background: var(--pa-ink-1); color: var(--pa-text); font: 400 var(--pa-fs-base)/1.4 var(--pa-font); transition: border-color .2s, box-shadow .2s; }
.pa-rf__in:hover { border-color: var(--pa-text-3); }
.pa-rf__in:focus { border-color: var(--pa-fx); box-shadow: 0 0 0 3px rgba(60, 211, 238, .2); }
.pa-rf__in:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px var(--pa-ink-1) inset; -webkit-text-fill-color: var(--pa-text); }
select.pa-rf__in { cursor: pointer; }
textarea.pa-rf__in { height: 150px; min-height: 120px; line-height: 1.6; resize: vertical; }
/* the rating reads like the labels beside it: legend, helper line, then the buttons (the floated legend is an ordinary
   flex item, so the same 6 px gaps apply; it still names the fieldset) */
.pa-review-form__rating { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.pa-review-form__rating legend { float: left; margin: 0; padding: 0; font-size: var(--pa-fs-sm); font-weight: 600; color: var(--pa-text); }
.pa-review-form__star-input { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: auto; }
.pa-rf__star { position: relative; display: flex; align-items: center; justify-content: center; min-height: 48px; border: 1px solid var(--pa-line-strong); border-radius: 12px; background: var(--pa-ink-1); cursor: pointer; transition: border-color .2s, background-color .2s; }
.pa-rf__star input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pa-rf__n { display: inline-flex; align-items: center; gap: 5px; font: 600 var(--pa-fs-base)/1 var(--pa-font); color: var(--pa-text); }
.pa-rf__n svg { width: 15px; fill: var(--pa-text-2); }
.pa-rf__star:hover { border-color: var(--pa-text-2); background: var(--pa-ink-3); }
.pa-rf__star:has(input:checked) { border-color: var(--pa-fx); background: var(--pa-ink-3); box-shadow: inset 0 -2px 0 var(--pa-fx), 0 0 18px -8px var(--pa-fx); }
.pa-rf__star:has(input:checked) svg { fill: var(--pa-fx); }
.pa-rf__star:has(input:focus-visible) { outline: 2px solid var(--pa-focus); outline-offset: 3px; }
/* without :has(): the chosen value and the keyboard focus still show, on the digit and star */
.pa-rf__star input:checked + .pa-rf__n { color: var(--pa-fx); }
.pa-rf__star input:checked + .pa-rf__n svg { fill: var(--pa-fx); }
.pa-rf__star input:focus-visible + .pa-rf__n { outline: 2px solid var(--pa-focus); outline-offset: 4px; border-radius: 6px; }
.pa-rf__star:has(input:focus-visible) .pa-rf__n { outline: 0; }
.pa-review-form__consent { display: flex; align-items: flex-start; gap: 12px; font-size: var(--pa-fs-xs); line-height: 1.55; color: var(--pa-text-2); cursor: pointer; }
.pa-review-form__consent input { -webkit-appearance: none; appearance: none; flex: none; display: grid; place-content: center; width: 22px; height: 22px; margin: 0; border: 1.5px solid var(--pa-line-strong); border-radius: 6px; background: var(--pa-ink-1); cursor: pointer; }
.pa-review-form__consent input::before { content: ""; width: 10px; height: 5px; margin-top: -3px; border-left: 2px solid var(--pa-go-ink); border-bottom: 2px solid var(--pa-go-ink); transform: rotate(-45deg) scale(0); }
.pa-review-form__consent input:checked { border-color: var(--pa-go); background: var(--pa-go); }
.pa-review-form__consent input:checked::before { transform: rotate(-45deg); }
.pa-review-form__consent a { color: var(--pa-text); text-decoration-color: var(--pa-go); text-underline-offset: 3px; }

/* Motion: the bars fill once, from the prism outwards (transform only; off under reduced motion) */
@media (prefers-reduced-motion: no-preference) {
	.pa-js .pa-rate__bar::before { animation: pa-rate-fill .9s var(--pa-ease) .2s both; }
	.pa-js .pa-rate__bars li:nth-child(2) .pa-rate__bar::before { animation-delay: .3s; }
	.pa-js .pa-rate__bars li:nth-child(n+3) .pa-rate__bar::before { animation-delay: .4s; }
}
@keyframes pa-rate-fill { from { transform: scaleX(0); } }