/* Feedback page (v2). Tokens only. */

/* page head: headline + Rena's note on her photo */
.fb-head-grid{display:grid;gap:clamp(36px,5vw,72px);align-items:center}
@media(min-width:960px){.fb-head-grid{grid-template-columns:1fr 1fr}}
.fb-head h1{max-width:10ch}
.fb-head .annot-circle .annot-svg{left:-6%;width:112%}
.fb-note-wrap{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:end;max-width:560px;justify-self:end;width:100%}
@media(max-width:959px){.fb-note-wrap{justify-self:start}}
.fb-photo{grid-column:1;grid-row:1;margin:0;aspect-ratio:4/5;border-radius:var(--radius-l);overflow:hidden;box-shadow:var(--shadow);rotate:-3deg}
.fb-photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
.fb-note{grid-column:2;grid-row:1;position:relative;z-index:2;margin:0 0 -18px -28px;padding:26px 26px 22px;border-radius:6px 22px 22px 22px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);rotate:2deg}

.fb-note::before{content:"";position:absolute;top:-10px;left:28px;width:64px;height:22px;border-radius:3px;background:var(--tint-strong);rotate:-4deg}
.fb-note p{font-family:var(--font-display);font-size:clamp(1rem,.95rem + .3vw,1.15rem);line-height:1.55;color:var(--text)}
.fb-note p+p{margin-top:.7em;color:var(--text-muted)}
.fb-sign{display:block;margin-top:10px;font-family:var(--font-script);font-size:2.2rem;line-height:1;color:var(--accent-text);rotate:-4deg;transform-origin:left}
@media(max-width:560px){.fb-note-wrap{grid-template-columns:1fr;max-width:420px}.fb-photo{grid-column:1;grid-row:1;width:62%;rotate:-3deg}.fb-note{grid-column:1;grid-row:2;margin:-56px 0 0 18%;rotate:1.5deg}}

/* layout */
.fb-section{padding-top:clamp(48px,7vw,96px)}
.fb-grid{display:grid;gap:clamp(40px,5vw,72px);align-items:start}
@media(min-width:1000px){.fb-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}.fb-aside{position:sticky;top:calc(var(--nav-h) + 24px)}}
.fb-main{min-width:0}

/* stars */
.fb-rate{margin-bottom:26px}
.fb-stars-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-top:4px}
.fx .star-rating{gap:2px;margin-left:-6px}
.fx .star-btn{width:52px;height:52px;display:grid;place-items:center;border-radius:50%;color:var(--text-faint);opacity:.55;cursor:pointer;transition:transform .45s var(--ease-spring),opacity var(--dur-2),color var(--dur-2),background-color var(--dur-2)}
.fx .star-btn svg{width:34px;height:34px;fill:currentColor;stroke:currentColor;stroke-width:1;stroke-linejoin:round;overflow:visible;transition:filter var(--dur-2)}
.fx .star-btn:hover{background:var(--tint)}
.fx .star-btn:focus-visible{outline:2px solid var(--accent-strong);outline-offset:1px}
/* preview beats script.js inline styles while hovering */
.fx .star-rating.is-previewing .star-btn{opacity:.4!important;color:var(--text-faint)!important;transform:scale(1)!important}
.fx .star-rating.is-previewing .star-btn.is-preview{opacity:1!important;color:var(--gold)!important;transform:scale(1.12)!important}
.fx .star-btn[style*="opacity: 1"] svg,.fx .star-btn.is-preview svg{filter:drop-shadow(0 4px 10px rgba(212,168,83,.45))}
[data-theme="light"] .fx .star-btn[style*="opacity: 1"] svg,[data-theme="light"] .fx .star-btn.is-preview svg{stroke:color-mix(in srgb,var(--gold) 72%,var(--aubergine))}
.fx .star-btn.pop{animation:starPop .6s var(--ease-spring) both;animation-delay:calc(var(--k,0) * 60ms)}
@keyframes starPop{0%{transform:scale(.7) rotate(-12deg)}55%{transform:scale(1.38) rotate(6deg)}100%{transform:scale(1.1) rotate(0)}}
.star-word{min-height:1.4em;font-family:var(--font-display);font-style:italic;font-size:var(--fs-h4);color:var(--text-faint);transition:color var(--dur-2)}
.star-word.is-set{color:var(--accent-text)}

/* testimonial deck */
.fb-aside-title{font-size:clamp(1.8rem,1.4rem + 1.4vw,2.6rem);line-height:1.05;letter-spacing:-.02em;margin-bottom:28px}
.fb-deck{display:grid;gap:0}
.fb-card{position:relative;margin:0;padding:24px 24px 20px;border-radius:22px;background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow);transition:transform .7s var(--ease-settle),box-shadow .5s}
[data-theme="light"] .fb-card{box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 22px 44px -30px rgba(74,32,96,.5)}
.fb-card:nth-child(1){rotate:-2deg;z-index:1}
.fb-card:nth-child(2){rotate:1.6deg;margin:-14px 0 0 22px;z-index:2;background:var(--surface-2)}
.fb-card:nth-child(3){rotate:-1deg;margin:-14px 10px 0 6px;z-index:3}
.fb-card:hover{transform:translateY(-6px) rotate(0deg);z-index:4}
.fb-card-stars{color:var(--gold);letter-spacing:.14em;font-size:.95rem}
.fb-card blockquote{margin-top:10px;font-family:var(--font-display);font-size:clamp(1.1rem,1rem + .4vw,1.3rem);line-height:1.4;color:var(--text);overflow-wrap:anywhere}
.fb-card figcaption{margin-top:12px;font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
.fb-card:nth-child(3){background:radial-gradient(120% 90% at 85% 0%,var(--ink-bg-2) 0%,transparent 60%),var(--ink-bg);border-color:var(--ink-border)}
.fb-card:nth-child(3) blockquote{color:var(--ink-text);font-style:italic}
.fb-card:nth-child(3) figcaption{color:var(--ink-muted)}
.fb-more{margin-top:26px;min-height:44px}
@media(max-width:999px){.fb-aside{max-width:560px}}
.fb-head .annot-circle .annot-svg{top:-4%;height:112%}