/* Section 3: upright editorial cards with unaltered product captures. */
.feedback{
  --card-blue-idle:#2b5e98;--card-blue-hover:var(--card-blue-idle);--card-blue-active:#15365f;--card-blue-ink:#fff;
  --card-purple-idle:var(--card-blue-idle);--card-purple-hover:var(--card-blue-hover);--card-purple-active:var(--card-blue-active);--card-purple-ink:var(--card-blue-ink);
  --card-warm-idle:var(--card-blue-idle);--card-warm-hover:var(--card-blue-hover);--card-warm-active:var(--card-blue-active);--card-warm-ink:var(--card-blue-ink);
  color:var(--body);font-family:Inter,Arial,sans-serif;line-height:1.65
}
/* All cards share one blue; only the expanded card uses a deeper shade. */
.feedback .fb-panel{--ink:#fff;--body:#fff}
.feedback .fb-panel.fb-active{--ink:#fff;--body:#fff;--accent:#fff;border-color:transparent}
.feedback .fb-product-capture{--ink:#112e63;--body:#344b70;--accent:#1261df;color:var(--body)}
.feedback .fb-panel.fb-active .fb-toggle-symbol{background:#fff;border-color:#fff;color:var(--scene)}
.feedback .fb-panel .fb-cover-bottom,.feedback .fb-active .fb-status-guide,.feedback .fb-active .fb-unlock{border-top-color:#ffffff40}
.feedback .fb-panel .fb-stage-visual{background:#ffffff1f}
.feedback header{text-align:center;margin-bottom:40px}
.feedback .fb-heading{font-size:40px;line-height:1.18;font-weight:700;letter-spacing:-.025em}
.feedback .fb-heading br{display:none}
.feedback header p{font-size:18px;line-height:1.65;max-width:760px;margin:16px auto 0}
.feedback .fb-gallery{display:flex;gap:16px;align-items:stretch}
.feedback .fb-panel{--idle:#e0e9f2;--hover:#cdddeb;--scene:#b8cce1;--accent:#203f61;display:flex;flex-direction:column;position:relative;min-width:0;flex:1 1 0;min-height:460px;background:var(--idle);border:1px solid transparent;border-radius:18px;overflow:hidden;cursor:pointer;transition:flex-grow .5s cubic-bezier(.22,1,.36,1),background .3s,border-color .3s}
.feedback .fb-practice{--idle:#e7e3f0;--hover:#d8d1e6;--scene:#c8bedc;--accent:#382650}
.feedback .fb-rewards{--idle:#f0e2e8;--hover:#e6d1db;--scene:#dcbcca;--accent:#54253b}
.feedback .fb-panel.fb-active{flex-grow:2.8;background:var(--scene);cursor:default}
.feedback .fb-panel:not(.fb-active):hover{background:var(--hover)}
.feedback .fb-panel-toggle{position:relative;display:flex;flex-direction:column;gap:32px;width:100%;padding:28px 28px 0;text-align:left;border:0;background:transparent;font:inherit;color:var(--ink);cursor:pointer}
.feedback .fb-category{font-size:13px;font-weight:500;line-height:1.5;color:var(--accent);padding-right:28px}
.feedback .fb-panel-title{font-size:28px;line-height:1.22;letter-spacing:-.025em;font-weight:700;max-width:230px;text-wrap:balance}
.feedback .fb-active .fb-panel-title{max-width:none}
.feedback .fb-toggle-symbol{position:absolute;top:24px;right:24px;width:28px;height:28px;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;color:var(--accent);font-size:20px;line-height:1;font-weight:400}
.feedback .fb-active .fb-toggle-symbol{background:var(--accent);border-color:var(--accent);color:white}
.feedback .fb-cover{display:flex;flex-direction:column;flex:1;padding:20px 28px 28px;min-height:240px}
.feedback .fb-active .fb-cover{display:none}
.feedback .fb-cover-description{font-size:18px;line-height:1.6;margin:0;max-width:240px}
.feedback .fb-cover-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:20px;border-top:1px solid #233c5526;color:var(--accent);font-size:13px;line-height:1.5}
.feedback .fb-cover-bottom b{font-size:20px;font-weight:400}
.feedback .fb-detail{padding:24px 28px 28px;animation:fb-reveal .35s both}
.feedback .fb-detail[hidden]{display:none}
.feedback .fb-stage-visual{padding:16px;background:#ffffff70;border-radius:12px}
.feedback .fb-product-capture{margin:0;background:white;border-radius:6px;overflow:hidden;box-shadow:0 3px 12px #1839540a}
.feedback .fb-image-button{display:block;width:100%;padding:12px;border:0;background:white;cursor:zoom-in}
.feedback .fb-image-button img{display:block;width:100%;height:auto;max-height:300px;object-fit:contain}
.feedback .fb-product-capture figcaption{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid #edf0f2;padding:8px 12px;font-size:13px;line-height:1.5}
.feedback .fb-enlarge{border:0;background:transparent;color:var(--accent);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:4px 0}
.feedback .fb-stage-copy{margin-top:20px}
.feedback .fb-stage-copy h3,.feedback .fb-reward-copy>strong{display:none}
.feedback .fb-stage-copy p{font-size:18px;line-height:1.65;margin:0}
.feedback .fb-status-guide,.feedback .fb-unlock{margin-top:16px;padding-top:14px;border-top:1px solid #233c5526}
.feedback .fb-status-guide summary{font-size:13px;font-weight:600;cursor:pointer;color:var(--accent)}
.feedback .fb-status-guide p,.feedback .fb-unlock p,.feedback .fb-stage-copy .fb-reward-note{font-size:13px;line-height:1.6}
.feedback .fb-status-guide p{margin-top:10px}
.feedback .fb-status-guide ol{display:flex;flex-wrap:wrap;gap:8px 16px;padding:0;list-style-position:inside;font-size:13px;margin:10px 0}
.feedback .fb-unlock strong{display:block;margin-bottom:4px}
.feedback .fb-stage-copy .fb-reward-note{margin-top:16px}
.feedback button:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.feedback-viewer{width:min(1200px,94vw);max-height:92vh;padding:24px;border:0;border-radius:16px;color:var(--body);font-family:Inter,Arial,sans-serif}
.feedback-viewer::backdrop{background:#10263acc}
.feedback-viewer-bar{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:16px}
.feedback-viewer-bar h2{font-size:28px;line-height:1.25}
.feedback-viewer-close{border:1px solid transparent;border-radius:8px;background:var(--orange);padding:10px 16px;color:#fff;font:600 16px Inter,Arial,sans-serif;cursor:pointer}
.feedback-viewer-close:hover{background:var(--orange-hover,var(--orange))}
.feedback-viewer img{display:block;width:100%;height:auto}
.fb-progress-crop{display:block;position:relative;overflow:hidden;aspect-ratio:840/396;background:white}
.feedback .fb-progress-crop img,.feedback-viewer .fb-progress-crop img{position:absolute;width:154.762%;max-width:none;max-height:none;height:auto;left:-40.9524%;top:-22.4747%}
.feedback-viewer p{font-size:13px;line-height:1.5;margin-top:16px}
@keyframes fb-reveal{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1100px){.feedback .fb-panel-toggle{padding:24px 20px 0}.feedback .fb-cover{padding:20px}.feedback .fb-detail{padding:24px 20px}.feedback .fb-panel-title{font-size:25px}.feedback .fb-stage-visual{padding:10px}}
@media(max-width:850px){.feedback .fb-gallery{display:block}.feedback .fb-panel{min-height:0;margin-bottom:16px}.feedback .fb-panel-toggle{gap:16px;padding-bottom:20px}.feedback .fb-panel-title{max-width:none;font-size:28px}.feedback .fb-cover{min-height:170px;padding-top:0}.feedback .fb-detail{padding-top:0}.feedback .fb-heading{font-size:34px}}
@media(prefers-reduced-motion:reduce){.feedback *{animation:none!important;transition:none!important}}
/* Barry rests on the top edge; its hit-free stage keeps controls reachable. */
.feedback header{margin-bottom:112px}
.feedback .fb-panel{overflow:visible}
.feedback .fb-detail{min-width:0;overflow:hidden;border-radius:0 0 18px 18px}
.feedback .fb-barry{--edge:94px;position:absolute;z-index:2;top:calc(-1 * var(--edge));left:50%;width:164px;height:119px;transform:translateX(-50%);overflow:hidden;pointer-events:none;user-select:none}
.feedback .fb-barry-rig{position:absolute;inset:0;opacity:0;transform:translateY(115px);transform-origin:50% 85%}
/* The occluding edge stays fixed while Barry moves behind it. One pixel of
   overlap avoids a subpixel seam; the lower head has extra hidden depth. */
.feedback .fb-barry-face-window{position:absolute;inset:0 0 auto;height:calc(var(--edge) + 1px);overflow:hidden}
.feedback .fb-barry-head{position:absolute;width:116px;height:91px;left:24px;top:18px;transform-origin:50% 92%}
.feedback .fb-barry-left,.feedback .fb-barry-right{position:absolute;width:33px;height:25px;top:calc(var(--edge) - 5px);opacity:0;transform:translateY(24px);transform-origin:50% 20%;filter:drop-shadow(0 1px 0 #603b3520)}
.feedback .fb-barry-left{left:16px}
.feedback .fb-barry-right{right:16px}
.feedback .fb-barry svg{width:100%;height:100%;display:block;overflow:hidden}
.feedback .fb-party-popper{position:absolute;z-index:-1;left:13px;top:-36px;width:36px;height:54px;opacity:0;transform:rotate(32deg) scale(.8);transform-origin:50% 90%}
.feedback .fb-party-popper svg{overflow:visible}
.feedback .fb-barry{overflow:visible;clip-path:inset(-70px -100px 0)}
.feedback .fb-confetti{position:absolute;z-index:4;width:6px;height:10px;opacity:0;pointer-events:none;user-select:none}
@media(max-width:850px){.feedback header{margin-bottom:104px}.feedback .fb-panel+.fb-panel{margin-top:108px}}

.feedback .fb-heading .fb-heading-accent { color: var(--blue); }