/* Step-by-step Class Selection Survey (js/survey.js) */
.survey-tagline { margin: 0.35rem 0 0; color: #c9b48a; font-size: 0.95rem; letter-spacing: 0.06em; }
.svq { width: min(1000px, 94vw); margin: 2rem 0 3rem calc(50% - min(500px, 47vw)); box-sizing: border-box; }
.svq-top { display: flex; align-items: center; justify-content: space-between; min-height: 2.4rem; margin-bottom: 0.75rem; gap: 1rem; }
.svq-back {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.95rem; border-radius: 999px;
  border: 1px solid rgba(178, 141, 85, 0.6); background: rgba(12, 12, 14, 0.7); color: #e3c27a;
  font: inherit; font-size: 0.85rem; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease;
}
.svq-back:hover { background: rgba(178, 141, 85, 0.18); border-color: #e3c27a; }
.svq-back:focus-visible, .svq-card:focus-visible, .svq-rate:focus-visible { outline: 2px solid #e3c27a; outline-offset: 3px; }
.svq-back[hidden] { display: none; }
.svq-stage { position: relative; display: grid; }
.svq-pane { grid-area: 1 / 1; transition: opacity 0.3s ease, transform 0.3s ease; }
.svq-pane.is-enter-right { opacity: 0; transform: translateX(36px); }
.svq-pane.is-enter-left { opacity: 0; transform: translateX(-36px); }
.svq-pane.is-leaving-left { opacity: 0; transform: translateX(-36px); pointer-events: none; }
.svq-pane.is-leaving-right { opacity: 0; transform: translateX(36px); pointer-events: none; }
.svq-q-num { margin: 0 0 0.25rem; text-align: center; color: #b28d55; font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; }
.svq-q-title { margin: 0 0 1.5rem; text-align: center; font-family: "Cinzel", serif; font-size: clamp(1.15rem, 2.4vw, 1.6rem); color: #f2efe8; font-weight: 600; outline: none; }
.svq-note { text-align: center; color: rgba(242, 239, 232, 0.7); max-width: 560px; margin: 0 auto; }
.svq-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.svq-card {
  position: relative; overflow: hidden; aspect-ratio: 3 / 4; padding: 0; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(178, 141, 85, 0.45); background: #0c0c0e; color: #f2efe8; font: inherit;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45); transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.svq-card:hover { transform: translateY(-3px); border-color: #e3c27a; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(227, 194, 122, 0.25); }
.svq-card.is-selected { border-color: #e3c27a; box-shadow: 0 0 0 2px #e3c27a, 0 0 24px rgba(227, 194, 122, 0.35); }
.svq-art { position: absolute; inset: 0; background-size: cover; background-position: 62% 30%; transition: transform 0.4s ease; }
.svq-card:hover .svq-art { transform: scale(1.04); }
/* "Both": diagonal split bottom-left -> top-right */
/* clip polygons are set inline per card from the same numbers as the seam line (see splitArt in survey.js) */
.svq-divider { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; filter: drop-shadow(0 0 3px rgba(227, 194, 122, 0.75)); }
.svq-divider line { stroke: #edd08c; stroke-width: 2px; stroke-linecap: square; }
.svq-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.85) 100%); }
.svq-card-label {
  position: absolute; left: 0; right: 0; bottom: 1rem; text-align: center; z-index: 1;
  font-family: "Cinzel", serif; font-size: clamp(1.3rem, 3vw, 2rem); font-weight: 700; color: #f5dc9e; letter-spacing: 0.06em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}
.svq-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem; }
.svq-card.is-text { aspect-ratio: auto; min-width: 160px; padding: 1.1rem 1.6rem; }
.svq-card.is-text .svq-card-label { position: static; font-size: 1.2rem; }
.svq-rating { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.svq-rate {
  width: 3rem; height: 3rem; border-radius: 8px; border: 1px solid rgba(178, 141, 85, 0.5); background: rgba(12, 12, 14, 0.85);
  color: #f2efe8; font: inherit; font-size: 1.05rem; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease;
}
.svq-rate:hover { border-color: #e3c27a; background: rgba(178, 141, 85, 0.18); }
.svq-rate.is-selected { background: #b28d55; border-color: #e3c27a; color: #111; font-weight: 700; }
.svq-rate-ends { display: flex; justify-content: space-between; max-width: 560px; margin: 0.5rem auto 0; color: rgba(242, 239, 232, 0.6); font-size: 0.8rem; }
@media (max-width: 700px) {
  .svq-cards { grid-template-columns: 1fr; gap: 0.85rem; }
  .svq-card { aspect-ratio: 16 / 7; }
  .svq-art { background-position: 70% 25%; }
  .svq-card-label { bottom: 0.7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .svq-pane, .svq-card, .svq-art { transition: none; }
}

/* Fancy survey title (no logo) */
.page-survey .survey-hero { padding-top: 1.5rem; }
.survey-title.survey-title--fancy {
  margin: 0;
  font-family: "Cinzel", "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: clamp(1.9rem, 5.4vw, 3.6rem);
  letter-spacing: 0.08em;
  line-height: 1.15;
  background-image: linear-gradient(100deg, #f3f4f6 0%, #f3f4f6 40%, #ffffff 46%, #fff4d6 50%, #ffffff 54%, #f3f4f6 60%, #f3f4f6 100%);
  background-size: 250% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #f3f4f6;
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.16)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6));
  animation: svq-title-shine 6s ease-in-out infinite;
}
@keyframes svq-title-shine {
  0%, 55% { background-position: 100% 0; }
  85%, 100% { background-position: 0% 0; }
}
.page-survey .survey-tagline {
  margin: 0.6rem 0 0;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  letter-spacing: 0.08em;
  color: #d9c497;
}
.page-survey .survey-tagline::before, .page-survey .survey-tagline::after {
  content: ""; display: inline-block; width: 2.2em; height: 1px; vertical-align: middle; margin: 0 0.7em;
  background: linear-gradient(90deg, transparent, rgba(227, 194, 122, 0.7));
}
.page-survey .survey-tagline::after { background: linear-gradient(90deg, rgba(227, 194, 122, 0.7), transparent); }
@media (max-width: 600px) {
  .survey-title.survey-title--fancy { letter-spacing: 0.04em; }
  .page-survey .survey-tagline::before, .page-survey .survey-tagline::after { width: 1.2em; margin: 0 0.45em; }
}
@media (prefers-reduced-motion: reduce) {
  .survey-title.survey-title--fancy { animation: none; background-position: 50% 0; }
}

/* Pointer-following gold glow + twinkle on answer buttons (js/survey.js; mouse/pen only) */
.svq-rate { position: relative; overflow: hidden; }
.svq-card::after, .svq-rate::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: radial-gradient(circle 36px at var(--mx, 50%) var(--my, 50%), rgba(255, 214, 92, 0.78) 0%, rgba(255, 200, 70, 0.52) 14%, rgba(236, 176, 48, 0.30) 34%, rgba(224, 165, 38, 0.14) 56%, rgba(224, 165, 38, 0.05) 78%, rgba(224, 165, 38, 0) 100%);
  opacity: 0; transition: opacity 0.2s ease;
}
.svq-rate::after {
  background: radial-gradient(circle 24px at var(--mx, 50%) var(--my, 50%), rgba(255, 214, 92, 0.78) 0%, rgba(255, 200, 70, 0.5) 16%, rgba(236, 176, 48, 0.26) 38%, rgba(224, 165, 38, 0.1) 62%, rgba(224, 165, 38, 0) 100%);
}
.svq-card.is-glow::after, .svq-rate.is-glow::after { opacity: 1; }
.svq-card-label { z-index: 2; }
.svq-spark {
  position: absolute; z-index: 3; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; pointer-events: none;
  background: radial-gradient(circle, #fff4c2 0 16%, #ffcf4a 34%, #e0a526 58%, transparent 72%);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  filter: drop-shadow(0 0 1px rgba(90, 50, 0, 0.9)) drop-shadow(0 0 3px rgba(224, 140, 20, 0.85));
  animation: svq-twinkle 0.75s ease-out forwards;
}@keyframes svq-twinkle {
  0% { opacity: 0; transform: scale(0.3) rotate(0deg); }
  30% { opacity: 1; transform: scale(1.15) rotate(25deg); }
  100% { opacity: 0; transform: translateY(-10px) scale(0.4) rotate(70deg); }
}
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .svq-card::after, .svq-rate::after, .svq-spark { display: none; }
}
/* ===== Select-then-Next (2026-10-20) ===== */
.svq-actions { justify-content: center; margin: 1.6rem 0 0; min-height: 3rem; }
.svq-card, .svq-rate { transition: transform 0.2s ease, opacity 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.svq-card.is-selected { transform: translateY(-4px); border-color: #e3c27a; box-shadow: 0 0 0 2px #e3c27a, 0 0 26px rgba(227, 194, 122, 0.45), 0 12px 28px rgba(0, 0, 0, 0.5); }
.svq-rate.is-selected { transform: translateY(-3px); box-shadow: 0 0 0 2px #e3c27a, 0 0 16px rgba(227, 194, 122, 0.45); }
.svq-pane.has-selection .svq-card:not(.is-selected), .svq-pane.has-selection .svq-rate:not(.is-selected) { opacity: 0.7; }
.svq-pane.has-selection .svq-card:not(.is-selected):hover, .svq-pane.has-selection .svq-rate:not(.is-selected):hover { opacity: 0.9; }
.svq-check {
  position: absolute; top: 10px; right: 10px; z-index: 4; width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, #dac7a1 0%, #c9ae82 40%, #9d7f5a 100%);
  box-shadow: 0 0 0 2px rgba(12, 12, 14, 0.85), 0 0 10px rgba(227, 194, 122, 0.55);
  opacity: 0; transform: scale(0.4); transition: opacity 0.2s ease, transform 0.25s cubic-bezier(.3, 1.6, .5, 1); pointer-events: none;
}
.svq-check::before {
  content: ""; position: absolute; left: 50%; top: 46%; width: 6px; height: 11px;
  border: solid #1f1507; border-width: 0 2.5px 2.5px 0; transform: translate(-50%, -50%) rotate(45deg);
}
.is-selected > .svq-check { opacity: 1; transform: scale(1); }
.svq-rate .svq-check { top: 2px; right: 2px; width: 14px; height: 14px; box-shadow: 0 0 0 1px rgba(12, 12, 14, 0.85); }
.svq-rate .svq-check::before { width: 3px; height: 6px; border-width: 0 1.5px 1.5px 0; }
.svq-card.is-text .svq-check { top: 50%; right: 10px; margin-top: -13px; }
.svq-next {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; padding: 0.8rem 1.9rem; border: 0; border-radius: 999px;
  font: inherit; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.04em; cursor: pointer;
  background: linear-gradient(135deg, #dac7a1 0%, #c9ae82 26%, #b3956c 62%, #9d7f5a 100%);
  color: #1f1507; text-shadow: 0 1px 0 rgba(250, 240, 218, 0.35);
  box-shadow: inset 0 1px 0 rgba(250, 242, 222, 0.6), inset 0 -1px 0 rgba(92, 70, 44, 0.4), 0 0 10px rgba(201, 174, 130, 0.3), 0 2px 6px rgba(0, 0, 0, 0.35);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 0.28s ease, transform 0.28s ease, visibility 0s linear 0.28s, box-shadow 0.25s ease, filter 0.25s ease;
}
.svq-next.is-shown { opacity: 1; visibility: visible; transform: none; transition: opacity 0.28s ease, transform 0.28s ease, visibility 0s, box-shadow 0.25s ease, filter 0.25s ease; }
.svq-next::before {
  content: ""; position: absolute; top: -30%; bottom: -30%; left: -70%; width: 45%; z-index: 1; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.15) 30%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0.15) 70%, rgba(255,255,255,0) 100%);
  transform: skewX(-22deg);
}
.svq-next.is-shown:hover, .svq-next.is-shown:focus-visible {
  background: linear-gradient(135deg, #e3d2ae 0%, #d2b98e 26%, #bea178 62%, #a88a64 100%); color: #1b1205; filter: brightness(1.03); transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(252, 246, 230, 0.7), inset 0 -1px 0 rgba(92, 70, 44, 0.4), 0 0 16px rgba(214, 190, 146, 0.5), 0 0 34px rgba(178, 150, 112, 0.25), 0 6px 14px rgba(0, 0, 0, 0.4);
}
.svq-next:focus-visible { outline: 2px solid #efe3c8; outline-offset: 2px; }
.svq-next:hover::before, .svq-next:focus-visible::before { animation: survey-sheen 0.95s ease-out forwards; }
@media (prefers-reduced-motion: reduce) {
  .svq-next, .svq-card, .svq-rate, .svq-check { transition: none; }
  .svq-next:hover::before, .svq-next:focus-visible::before { animation: none; }
}
/* Next pill: same darker bronze gold as Take the Survey (2026-10-20) */
.svq-next { background: linear-gradient(180deg, rgba(40, 28, 8, 0.45) 0%, rgba(40, 28, 8, 0) 34%, rgba(255, 228, 180, 0) 72%, rgba(255, 228, 180, 0.07) 100%), linear-gradient(90deg, #644f2a 0%, #6f5835 50%, #7c6343 100%); color: #ece7dd; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.55); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; box-shadow: 0 0 0 1px #110e0a, inset 0 1px 0 rgba(255, 235, 200, 0.10), inset 0 -1px 0 rgba(125, 100, 68, 0.55), 0 2px 6px rgba(0, 0, 0, 0.45); }
.svq-next.is-shown:hover, .svq-next.is-shown:focus-visible { background: linear-gradient(180deg, rgba(40, 28, 8, 0.35) 0%, rgba(40, 28, 8, 0) 34%, rgba(255, 228, 180, 0) 72%, rgba(255, 228, 180, 0.10) 100%), linear-gradient(90deg, #745c33 0%, #81673f 50%, #8f7450 100%); color: #fff; filter: none; box-shadow: 0 0 0 1px #110e0a, inset 0 1px 0 rgba(255, 235, 200, 0.16), inset 0 -1px 0 rgba(140, 112, 76, 0.6), 0 0 14px rgba(160, 126, 76, 0.45), 0 6px 14px rgba(0, 0, 0, 0.45); }

/* ===== Survey results: top 3 class cards, best match = holographic rare card (2026-10-20) ===== */
@property --svr-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.svq.is-results .svq-next { display: none; }
.svr-row { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 1.4rem; align-items: center; perspective: 1200px; margin-top: 0.5rem; }
.svr-card { position: relative; border-radius: 16px; opacity: 0; transform: rotateY(90deg) scale(0.9); transform-style: preserve-3d; }
.svq-results-pane.is-revealed .svr-card { animation: svr-flip 0.9s cubic-bezier(.2, .8, .25, 1) var(--d, 0s) forwards; }
@keyframes svr-flip {
  0% { opacity: 0; transform: rotateY(-180deg) scale(0.85); }
  55% { opacity: 1; }
  100% { opacity: 1; transform: rotateY(0deg) scale(1); }
}
.svr-inner {
  position: relative; overflow: hidden; border-radius: inherit; aspect-ratio: 3 / 4.3; display: flex; flex-direction: column; justify-content: flex-end;
  background: #0d0c0a; border: 1px solid rgba(178, 141, 85, 0.45); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.25s ease;
}
.svr-art { position: absolute; inset: 0; background-size: cover; background-position: 50% 18%; transition: transform 0.5s ease; }
.svr-card:hover .svr-art { transform: scale(1.04); }
.svr-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(8,7,5,0.82) 62%, rgba(8,7,5,0.97) 100%); }
.svr-body { position: relative; z-index: 3; padding: 1.1rem 1.1rem 1.2rem; text-align: center; }
.svr-name { margin: 0; font-family: "Cinzel", serif; font-size: 1.35rem; color: #f3f4f6; letter-spacing: 0.04em; }
.svr-spec { margin: 0.1rem 0 0.35rem; color: #c9b48a; font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; }
.svr-pct { margin: 0 0 0.35rem; color: #e3c27a; font-weight: 700; font-size: 0.95rem; }
.svr-why { margin: 0 0 0.85rem; color: rgba(242, 239, 232, 0.78); font-size: 0.82rem; line-height: 1.4; min-height: 2.3em; }
.svr-link {
  display: inline-flex; padding: 0.5rem 1.2rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: #ece7dd; text-decoration: none; background: linear-gradient(90deg, #644f2a 0%, #6f5835 50%, #7c6343 100%);
  box-shadow: 0 0 0 1px #110e0a, inset 0 1px 0 rgba(255, 235, 200, 0.10); transition: filter 0.2s ease, transform 0.2s ease;
}
.svr-link:hover, .svr-link:focus-visible { filter: brightness(1.18); transform: translateY(-1px); color: #fff; outline: none; }
.svr-link:focus-visible { box-shadow: 0 0 0 2px #efe3c8; }
.svr-rank { position: absolute; top: 10px; left: 12px; z-index: 3; font-family: "Cinzel", serif; color: #c9b48a; font-size: 1.1rem; text-shadow: 0 1px 3px #000; }
/* best match: larger, rotating conic gold border, sheen sweep, particles */
.svr-card.is-best { z-index: 2; }
.svr-card.is-best .svr-inner { border: 0; padding: 0; box-shadow: 0 0 34px rgba(227, 194, 122, 0.35), 0 18px 44px rgba(0, 0, 0, 0.6); }
.svr-holo {
  position: absolute; inset: 0; z-index: 4; border-radius: inherit; padding: 3px; pointer-events: none;
  background: conic-gradient(from var(--svr-angle), #6b4f1d, #e3c27a, #fff6d8, #b28d55, #5c4318, #f5dc9e, #fff, #c9a25e, #6b4f1d);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: svr-spin 4s linear infinite;
}
@keyframes svr-spin { to { --svr-angle: 360deg; } }
.svr-sheen {
  position: absolute; inset: -20%; z-index: 2; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 240, 200, 0.0) 42%, rgba(255, 236, 190, 0.35) 48%, rgba(170, 220, 255, 0.18) 52%, rgba(255, 190, 240, 0.12) 55%, transparent 62%);
  transform: translateX(-60%); animation: svr-sheen 3.6s ease-in-out 1.3s infinite;
}
@keyframes svr-sheen { 0% { transform: translateX(-60%); } 55%, 100% { transform: translateX(60%); } }
.svr-badge {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 5; padding: 0.3rem 0.9rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #1f1507; white-space: nowrap;
  background: linear-gradient(135deg, #f5dc9e, #e3c27a 45%, #b28d55); box-shadow: 0 0 14px rgba(227, 194, 122, 0.6);
}
.svr-card.is-best .svr-name { font-size: 1.7rem; background: linear-gradient(100deg, #f3f4f6 40%, #fff4d6 50%, #f3f4f6 60%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: svq-title-shine 6s ease-in-out infinite; }
.svr-particle {
  position: absolute; z-index: 3; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, #fff4c2 0 16%, #ffcf4a 34%, #e0a526 58%, transparent 72%);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  animation: svr-twinkle 2s ease-in-out infinite;
}
@keyframes svr-twinkle { 0%, 100% { opacity: 0; transform: scale(0.3) rotate(0); } 45% { opacity: 1; transform: scale(1.1) rotate(40deg); } }
.svr-actions { display: flex; justify-content: center; margin-top: 1.8rem; }
.svr-retake {
  padding: 0.7rem 1.6rem; border-radius: 999px; border: 1px solid rgba(178, 141, 85, 0.6); background: rgba(12, 12, 14, 0.7); color: #e3c27a;
  font: inherit; font-weight: 600; letter-spacing: 0.05em; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease;
}
.svr-retake:hover, .svr-retake:focus-visible { background: rgba(178, 141, 85, 0.18); border-color: #e3c27a; outline: none; }
@media (max-width: 760px) {
  .svr-row { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
  .svr-card.is-best { order: -1; }
  .svr-inner { aspect-ratio: 3 / 3.4; }
}
@media (prefers-reduced-motion: reduce) {
  .svr-card, .svq-results-pane.is-revealed .svr-card { animation: none; opacity: 1; transform: none; }
  .svr-holo, .svr-sheen, .svr-particle, .svr-card.is-best .svr-name { animation: none; }
  .svr-sheen, .svr-particle { display: none; }
  .svr-inner { transition: none; transform: none; }
}

/* ===== All questions as art cards: flexible 2-6 card layout (2026-10-20) ===== */
.svq-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.1rem; }
.svq-cards > .svq-card { flex: 0 0 calc((100% - 2 * 1.1rem) / 3); min-width: 0; }
.svq-cards[data-count="2"] > .svq-card { flex-basis: calc((100% - 2 * 1.1rem) / 3); }
.svq-cards[data-count="4"] > .svq-card { flex-basis: calc((100% - 3 * 1.1rem) / 4); }
.svq-cards[data-count="5"] > .svq-card,
.svq-cards[data-count="6"] > .svq-card { flex-basis: calc((100% - 2 * 1.1rem) / 3); aspect-ratio: 4 / 4.2; }
.svq-cards[data-count="4"] .svq-card-label,
.svq-cards[data-count="5"] .svq-card-label,
.svq-cards[data-count="6"] .svq-card-label { font-size: clamp(0.95rem, 1.6vw, 1.15rem); line-height: 1.25; padding: 0 0.6rem; }
@media (max-width: 900px) {
  .svq-cards[data-count="4"] > .svq-card { flex-basis: calc((100% - 1.1rem) / 2); }
}
@media (max-width: 700px) {
  .svq-cards { gap: 0.75rem; }
  .svq-cards > .svq-card, .svq-cards[data-count] > .svq-card { flex-basis: calc((100% - 0.75rem) / 2); aspect-ratio: 3 / 3.4; }
  .svq-cards[data-count="3"] > .svq-card:first-child { flex-basis: 100%; aspect-ratio: 16 / 7; }
  .svq-cards[data-count="2"] > .svq-card { aspect-ratio: 3 / 3.6; }
}

/* ---------- Survey: View My Answers summary ---------- */
.svr-actions { gap: 0.8rem; flex-wrap: wrap; align-items: center; }
.svr-myanswers, .svr-backres {
  padding: 0.75rem 1.8rem; border-radius: 999px; border: 1px solid #110e0a; cursor: pointer;
  background: linear-gradient(180deg, #7c6343, #644f2a); color: #ece7dd;
  font: inherit; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.85rem;
  box-shadow: inset 0 1px 0 rgba(255, 240, 210, 0.18), 0 4px 14px rgba(0, 0, 0, 0.5);
  transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.svr-myanswers:hover, .svr-myanswers:focus-visible, .svr-backres:hover, .svr-backres:focus-visible {
  filter: brightness(1.15); outline: none; transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 240, 210, 0.25), 0 0 18px rgba(200, 160, 90, 0.35), 0 4px 14px rgba(0, 0, 0, 0.5);
}
.svs-title { font-family: "Cinzel", serif; }
.svs-list { list-style: none; margin: 1.4rem auto 0; padding: 0; max-width: 760px; display: grid; gap: 0.6rem; }
.svs-item {
  display: flex; align-items: center; gap: 1rem; padding: 0.55rem 0.9rem 0.55rem 0.55rem; border-radius: 12px;
  background: linear-gradient(90deg, rgba(124, 99, 67, 0.16), rgba(12, 12, 14, 0.7)); border: 1px solid rgba(178, 141, 85, 0.28);
}
.svs-thumb {
  position: relative; flex: 0 0 auto; width: 64px; height: 64px; border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(227, 194, 122, 0.55); background: #0b0b0d; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
.svs-thumb .svq-art { position: absolute; inset: 0; background-size: cover; background-position: 50% 22%; }
.svs-thumb.is-split .svq-divider { filter: none; }
.svs-thumb.is-split .svq-divider line { stroke-width: 1px; stroke: #e3c27a; }
.svs-text { display: grid; grid-template-columns: auto 1fr; column-gap: 0.6rem; row-gap: 0.15rem; min-width: 0; text-align: left; }
.svs-num { grid-row: span 2; font-family: "Cinzel", serif; color: #c9b48a; font-size: 1.1rem; align-self: center; min-width: 1.4em; text-align: center; }
.svs-q { color: #a8a39a; font-size: 0.85rem; line-height: 1.3; }
.svs-a { color: #f3ead8; font-weight: 700; letter-spacing: 0.02em; }
@media (max-width: 520px) { .svs-thumb { width: 52px; height: 52px; } .svs-item { gap: 0.7rem; } }

/* ---------- Survey: radar chart (you vs class) ---------- */
.svs-radar-wrap { max-width: 760px; margin: 2rem auto 0; text-align: center; }
.svs-sub { font-family: "Cinzel", serif; color: #e3c27a; font-size: 1.15rem; letter-spacing: 0.05em; margin: 0 0 0.9rem; }
.svs-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.svs-tab {
  padding: 0.45rem 1rem; border-radius: 999px; border: 1px solid rgba(178, 141, 85, 0.45); background: rgba(12, 12, 14, 0.7);
  color: #cfc6b4; font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.svs-tab small { opacity: 0.75; font-weight: 500; }
.svs-tab:hover, .svs-tab:focus-visible { border-color: #e3c27a; color: #f3ead8; outline: none; }
.svs-tab.is-active { background: linear-gradient(180deg, #7c6343, #644f2a); border-color: #110e0a; color: #ece7dd; box-shadow: 0 0 14px rgba(200, 160, 90, 0.3); }
.svs-legend { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem 1.2rem; margin: 1rem 0 0.2rem; font-size: 0.9rem; color: #d8d2c6; }
.svs-key::before { content: ""; display: inline-block; width: 14px; height: 10px; border-radius: 3px; margin-right: 0.45rem; vertical-align: middle; }
.svs-key-you::before { background: rgba(230, 232, 240, 0.35); border: 1.5px solid #e6e8f0; }
.svs-key-class::before { background: rgba(200, 160, 90, 0.4); border: 1.5px solid #e3c27a; }
.svs-pct { font-family: "Cinzel", serif; color: #e3c27a; font-weight: 700; }
.svs-radar { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; overflow: visible; }
.svs-ring { fill: none; stroke: rgba(178, 141, 85, 0.22); stroke-width: 1; }
.svs-spoke { stroke: rgba(178, 141, 85, 0.22); stroke-width: 1; }
.svs-axis { fill: #bdb5a5; font-size: 11px; letter-spacing: 0.02em; }
.svs-poly { stroke-width: 2; stroke-linejoin: round; transform-box: view-box; transform-origin: 170px 150px; animation: svs-grow 0.9s cubic-bezier(.2,.8,.2,1) both; }
.svs-poly-class { fill: rgba(200, 160, 90, 0.32); stroke: #e3c27a; filter: drop-shadow(0 0 6px rgba(227, 194, 122, 0.45)); }
.svs-poly-you { fill: rgba(230, 232, 240, 0.2); stroke: #e6e8f0; animation-delay: 0.15s; }
@keyframes svs-grow { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.svs-pt { cursor: pointer; outline: none; }
.svs-hit { fill: transparent; }
.svs-dot-you { fill: #e6e8f0; } .svs-dot-class { fill: #e3c27a; }
.svs-pt .svs-dot-you, .svs-pt .svs-dot-class { animation: svs-fade 0.4s 0.8s both; }
@keyframes svs-fade { from { opacity: 0; } }
.svs-tip { opacity: 0; pointer-events: none; transition: opacity 0.15s; }
.svs-tip rect { fill: rgba(10, 9, 8, 0.94); stroke: #b28d55; }
.svs-tip text { fill: #e6e8f0; font-size: 12px; font-weight: 600; }
.svs-tip text.is-class { fill: #e3c27a; }
.svs-pt:hover .svs-tip, .svs-pt:focus .svs-tip, .svs-pt:focus-within .svs-tip { opacity: 1; }
.svs-pt:hover .svs-hit, .svs-pt:focus .svs-hit { fill: rgba(227, 194, 122, 0.15); }
.svs-pt:hover, .svs-pt:focus { position: relative; }
@media (max-width: 520px) { .svs-axis { font-size: 13px; } .svs-tab { font-size: 0.78rem; padding: 0.4rem 0.75rem; } }
@media (prefers-reduced-motion: reduce) { .svs-poly, .svs-pt .svs-dot-you, .svs-pt .svs-dot-class { animation: none; } .svs-tip { transition: none; } }

/* ---------- Survey: protection frequency note in summary ---------- */
.svs-num { grid-row: span 3; }
.svs-note { grid-column: 2; color: #c9b48a; font-size: 0.8rem; letter-spacing: 0.02em; }

/* ---------- Survey: summary order (actions + radar above the list) ---------- */
.svs-top-actions { margin-top: 0.4rem; }
.svq-summary-pane .svs-radar-wrap { margin-top: 1.4rem; }
.svs-title-below { margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid rgba(178, 141, 85, 0.22); }

/* ---------- Survey title: one line in every language (js/survey.js shrinks long translations further) ---------- */
.page-survey .survey-hero { text-align: center; }
.survey-title.survey-title--fancy {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  font-size: clamp(1.15rem, 5.2vw, 3.6rem);
  padding: 0 0.1em;
}
@media (max-width: 600px) { .survey-title.survey-title--fancy { letter-spacing: 0.03em; } }

/* ---------- Survey: 5 cards on one row on desktop/laptop (>= 1024px) ---------- */
@media (min-width: 1024px) {
  .svq-cards[data-count="5"] { flex-wrap: nowrap; gap: 0.85rem; }
  .svq-cards[data-count="5"] > .svq-card { flex: 1 1 0; flex-basis: calc((100% - 4 * 0.85rem) / 5); aspect-ratio: 3 / 4.3; }
  .svq-cards[data-count="5"] .svq-card-label { font-size: clamp(0.88rem, 1.05vw, 1.05rem); padding: 0 0.45rem; overflow-wrap: anywhere; hyphens: auto; }
  .svq-cards[data-count="5"] .svq-art { background-position: 50% 18%; }
  /* give 5-card rows a little more room than the default stage when the viewport allows */
  /* each pane widens only itself (margins on a grid item never resize its siblings), and keeps the width while it slides out so its cards don't snap narrower mid-fade */ .svq-stage .svq-pane:has(.svq-cards[data-count="5"]) { margin-left: min(0px, calc((100% - min(1180px, 100vw - 3rem)) / 2)); margin-right: min(0px, calc((100% - min(1180px, 100vw - 3rem)) / 2)); }
}
/* ---------- Survey: fixed question layout (js/survey.js measures the tallest heading + card set per width) ---------- */
.svq-actions { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 1rem; }
.svq-actions .svq-back { grid-column: 1; justify-self: end; }
.svq-actions .svq-back[hidden] { display: inline-flex; visibility: hidden; }
.svq-actions .svq-next { grid-column: 2; min-width: 13.5rem; justify-content: center; text-align: center; }
.svq.is-fixed-layout .svq-pane:not(.svq-results-pane) .svq-q-title { min-height: var(--svq-title-h); display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.svq.is-fixed-layout .svq-pane:not(.svq-results-pane) .svq-cards,
.svq.is-fixed-layout .svq-pane:not(.svq-results-pane) .svq-choices,
.svq.is-fixed-layout .svq-pane:not(.svq-results-pane) .svq-rating { min-height: var(--svq-cards-h); align-content: center; align-items: center; box-sizing: border-box; }
.svq-probe { visibility: hidden; pointer-events: none; }
@media (min-width: 1024px) {
  .svq-cards[data-count="6"] > .svq-card { aspect-ratio: 16 / 10.5; }
}
/* fixed next width */
@media (min-width: 1024px) { .svq-next { width: 16rem; min-width: 0; } }

/* centre cards between heading and buttons */
@media (min-width: 1024px) { .svq.is-fixed-layout .svq-cards { position: relative; top: 6px; } }

/* summary bottom row */
.svq.is-summary .svq-actions { display: none; }
.svs-bottom-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.75rem 1rem; width: 100%; margin: 2rem auto 0; padding: 0; text-align: center; }

/* ---------- Survey results: Back | Analysis | Retake on one row, Analysis centred under the best-match card ---------- */
.svq.is-results:not(.is-summary) .svq-actions { display: none; }
.svr-actions.svr-res-actions { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; column-gap: 1rem; row-gap: 0.8rem; }
.svr-res-actions .svr-back { grid-column: 1; justify-self: end; }
.svr-res-actions .svr-myanswers { grid-column: 2; align-self: center; }
.svr-res-actions .svr-retake { grid-column: 3; justify-self: start; }
.svr-res-actions .svr-pill, .svq-actions .svq-prevres {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; box-sizing: border-box;
  width: auto; min-height: 2.6rem; padding: 0.5rem 1rem; text-align: center; line-height: 1.2;
  border-radius: 999px; border: 1px solid rgba(178, 141, 85, 0.6); background: rgba(12, 12, 14, 0.7); color: #e3c27a;
  font: inherit; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.05em; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease;
}
.svr-res-actions .svr-pill:hover, .svr-res-actions .svr-pill:focus-visible, .svq-prevres:hover, .svq-prevres:focus-visible { background: rgba(178, 141, 85, 0.18); border-color: #e3c27a; outline: none; }
@media (max-width: 760px) {
  .svr-actions.svr-res-actions { grid-template-columns: 1fr 1fr; column-gap: 0.7rem; }
  .svr-res-actions .svr-myanswers { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
  .svr-res-actions .svr-back { grid-column: 1; grid-row: 2; }
  .svr-res-actions .svr-retake { grid-column: 2; grid-row: 2; }
  .svr-res-actions .svr-pill, .svq-actions .svq-prevres { max-width: 100%; }
}.svr-pill-lbls { display: inline-grid; justify-items: center; }
.svr-pill-lbl { grid-area: 1 / 1; white-space: nowrap; }
.svr-pill-ghost { visibility: hidden; }
@media (max-width: 760px) { .svr-pill-lbl { white-space: normal; } .svr-res-actions .svr-back { justify-self: end; } .svr-res-actions .svr-retake { justify-self: start; } }/* Q1 after Retake: "Back to Results" pill (same pill as the results row), centred under the cards; moves left of Next once an answer is picked */
.svq-actions .svq-prevres { grid-column: 2; grid-row: 1; justify-self: center; z-index: 1; }
.svq-actions .svq-next.is-shown ~ .svq-prevres { grid-column: 1; justify-self: end; }
.svq-actions .svq-back, .svq-actions .svq-next { grid-row: 1; }
.svq-actions .svq-prevres[hidden] { display: none; }.svq-actions .svq-prevres { min-height: 2.9rem; }
@media (max-width: 760px) {
  .svq-actions .svq-prevres, .svq-actions .svq-next.is-shown ~ .svq-prevres { grid-column: 1 / -1; grid-row: 2; justify-self: center; margin-top: 0.7rem; }
}
/* results <-> question / Analysis: stage height glides with the pane slide (js sets the inline heights) */
.svq-stage.is-resizing { transition: height 0.3s ease; }
.svq-actions.is-fading-in { animation: svq-actions-in 0.3s ease both; }
@keyframes svq-actions-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .svq-stage.is-resizing { transition: none; } .svq-actions.is-fading-in { animation: none; } }.svq-stage { align-items: start; } /* panes keep their own height so the stage height can glide between them */

/* View Class Guide pill under the Analysis radar */
.svs-guide-row { display: flex; justify-content: center; margin: 1.1rem 0 0.2rem; }
.svs-guide-row .svs-guide { padding: 0.75rem 1.8rem; font-size: 0.85rem; letter-spacing: 0.08em; }

/* Analysis refine: "How important?" 1-5 bubbles + Resubmit */
.svs-imp { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; margin-left: auto; text-align: right; flex: 0 0 auto; }
.svs-imp-lbl { color: #a8a39a; font-size: 0.78rem; letter-spacing: 0.04em; }
.svs-bubs { display: inline-flex; gap: 0.35rem; }
.svs-bub { position: relative; display: inline-flex; cursor: pointer; }
.svs-bub input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.svs-bub span { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; font-size: 0.78rem; font-weight: 700; color: #c9b48a; background: rgba(12, 12, 14, 0.75); border: 1px solid rgba(178, 141, 85, 0.45); transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; }
.svs-bub:hover span { border-color: #d8b878; color: #f3ead8; }
.svs-bub input:checked + span { background: linear-gradient(180deg, #e6c27a, #b08a45); color: #1a140b; border-color: #f0d79a; box-shadow: 0 0 10px rgba(230, 194, 122, 0.45); }
.svs-bub input:focus-visible + span { outline: 2px solid #efe3c8; outline-offset: 2px; }
.svs-resubmit-row { display: flex; justify-content: center; margin: 1.6rem auto 0; }
.svs-resubmit {
  padding: 0.75rem 2.2rem; border-radius: 999px; border: 1px solid #110e0a; cursor: pointer;
  background: linear-gradient(180deg, #e6c27a, #b08a45); color: #1a140b;
  font: inherit; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.85rem;
  box-shadow: inset 0 1px 0 rgba(255, 245, 220, 0.4), 0 4px 14px rgba(0, 0, 0, 0.5); transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.svs-resubmit:hover, .svs-resubmit:focus-visible { filter: brightness(1.08); transform: translateY(-1px); outline: none; box-shadow: inset 0 1px 0 rgba(255, 245, 220, 0.5), 0 0 18px rgba(230, 194, 122, 0.45), 0 4px 14px rgba(0, 0, 0, 0.5); }
@media (max-width: 520px) { .svs-bub span { width: 2.1rem; height: 2.1rem; } .svs-bubs { gap: 0.45rem; } }
@media (prefers-reduced-motion: reduce) { .svs-bub span, .svs-resubmit { transition: none; } .svs-resubmit:hover { transform: none; } }

/* Refine: unanswered questions after a Content change */
.svs-refine-msg { margin: 1.2rem auto 0; text-align: center; color: #ff8f84; font-weight: 700; }
.svs-item.is-missing { border-color: #d9534f; box-shadow: 0 0 0 1px #d9534f inset; animation: svs-miss 0.9s ease 2; }
.svs-item.is-missing .svs-ans { border-color: #e0605a; }
@keyframes svs-miss { 0%, 100% { background-color: transparent; } 40% { background-color: rgba(217, 83, 79, 0.28); } }
@media (prefers-reduced-motion: reduce) { .svs-item.is-missing { animation: none; } }

/* Refine rows: "Your answer" option bubbles on the left, "How important?" 1-5 block pushed to the far right */
.svs-edit { grid-column: 1 / -1; display: flex; align-items: flex-end; gap: 0.6rem 1.2rem; margin-top: 0.5rem; width: 100%; }
.svs-text { flex: 1 1 auto; }
.svs-ansblk { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; flex: 1 1 auto; }
.svs-row-lbl { color: #a8a39a; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }
.svs-ansgrp { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; border-radius: 8px; }
.svs-opt { position: relative; display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; color: #d9d2c3; font-size: 0.85rem; line-height: 1.25; padding: 0.15rem 0; }
.svs-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.svs-dot { flex: 0 0 auto; width: 0.95rem; height: 0.95rem; border-radius: 50%; border: 1.5px solid rgba(201, 180, 138, 0.75); background: rgba(12, 12, 14, 0.7); transition: background 0.15s ease, box-shadow 0.15s ease; }
.svs-opt:hover .svs-dot { border-color: #e6c27a; }
.svs-opt input:checked + .svs-dot { background: radial-gradient(circle at 50% 50%, #f0d79a 0 38%, #b08a45 42% 100%); border-color: #f0d79a; box-shadow: 0 0 8px rgba(230, 194, 122, 0.5); }
.svs-opt input:checked ~ .svs-opt-t { color: #f3ead8; font-weight: 700; }
.svs-opt input:focus-visible + .svs-dot { outline: 2px solid #efe3c8; outline-offset: 2px; }
.svs-item.is-missing .svs-ansgrp { outline: 1px solid #e0605a; outline-offset: 4px; }
.svs-item.is-missing .svs-row-lbl { color: #ff8f84; }
@media (max-width: 640px) {
  .svs-edit { flex-direction: column; align-items: stretch; }
  .svs-imp { align-self: flex-end; }
  .svs-opt { font-size: 0.82rem; padding: 0.3rem 0; }
  .svs-dot { width: 1.1rem; height: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) { .svs-dot { transition: none; } }

/* Refine row layout (v2): [thumb] [number, centred on the whole row] [question / answer / "Your answer" bubbles stacked] [Importance block, far right, centred] */
.svq-summary-pane .svs-item { display: flex; align-items: center; }
.svq-summary-pane .svs-num { grid-row: auto; align-self: center; flex: 0 0 auto; }
.svq-summary-pane .svs-text { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; flex: 1 1 auto; min-width: 0; }
.svq-summary-pane .svs-ansblk { margin-top: 0.45rem; width: 100%; }
.svq-summary-pane .svs-imp { align-self: center; margin-left: auto; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding-left: 0.6rem; text-align: center; }
/* label row = same 5 columns as the bubbles; each label sits in a zero-width box centred on its column
   (Low over 1, Importance over 3, High over 5), so long translations overflow evenly and never move the bubbles */
.svq-summary-pane .svs-bubs { display: grid; grid-template-columns: repeat(5, 1.75rem); column-gap: 0.55rem; }
.svq-summary-pane .svs-imp-head { display: grid; grid-template-columns: repeat(5, 1.75rem); column-gap: 0.55rem; align-items: end; }
.svq-summary-pane .svs-imp-head > span { justify-self: center; width: 0; display: flex; justify-content: center; white-space: nowrap; }
.svq-summary-pane .svs-imp-low { grid-column: 1; }
.svq-summary-pane .svs-imp-lbl { grid-column: 3; }
.svq-summary-pane .svs-imp-high { grid-column: 5; }
.svq-summary-pane .svs-imp-end { color: #7f7a70; opacity: 0.8; font-size: 0.64rem; letter-spacing: 0.04em; text-transform: uppercase; }
.svq-summary-pane .svs-imp-lbl { font-size: 0.7rem; }
@media (max-width: 640px) {
  .svq-summary-pane .svs-item { display: grid; grid-template-columns: auto auto minmax(0, 1fr); column-gap: 0.7rem; row-gap: 0.55rem; align-items: center; }
  .svq-summary-pane .svs-thumb { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .svq-summary-pane .svs-num { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .svq-summary-pane .svs-text { grid-column: 3; grid-row: 1; }
  .svq-summary-pane .svs-imp { grid-column: 3; grid-row: 2; justify-self: end; margin-left: 0; padding-left: 0; padding-right: 0.4rem; }
  .svq-summary-pane .svs-bubs, .svq-summary-pane .svs-imp-head { grid-template-columns: repeat(5, 2.1rem); column-gap: 0.45rem; }
  .svq-summary-pane .svs-item:not(:has(.svs-imp)) .svs-text { grid-row: 1 / span 2; }
}

/* Importance block v3: "Importance" over bubble 3; fainter Low / High under bubbles 1 and 5 */
.svq-summary-pane .svs-imp-foot { align-items: start; margin-top: -0.05rem; }
/* Low / High: same colour as "Importance", ~89% of its size */
.svq-summary-pane .svs-imp-end { color: #a8a39a; opacity: 1; font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: inherit; }

/* multi-select question hint ("Select all that apply"), part of the title block so the fixed layout height includes it */
.svq-hint { display: block; margin-top: 0.35rem; font-family: inherit; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #c9b48a; }

/* multi-select hint: its own line directly under the question text, centred, smaller and subtler than the title */
.svq.is-fixed-layout .svq-pane:not(.svq-results-pane) .svq-q-title { flex-direction: column; }
.svq-q-title .svq-hint { display: block; margin-top: 0.45rem; font-family: inherit; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: #a8a39a; text-align: center; }

/* radar axis labels: hover / focus / tap shows what the axis measures and what the shown class is built as */
.svs-chart { position: relative; }
.svs-axis[data-ax] { cursor: help; outline: none; transition: fill 0.15s; }
.svs-axis[data-ax]:hover, .svs-axis[data-ax].is-on, .svs-axis[data-ax]:focus-visible { fill: #e3c27a; }
.svs-axtip { position: absolute; z-index: 5; width: min(300px, 92%); padding: 0.6rem 0.75rem; background: rgba(10, 9, 8, 0.95); border: 1px solid #b28d55; border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); pointer-events: none; text-align: left; }
.svs-axtip[hidden] { display: none; }
.svs-axtip-sum { display: block; color: #e6e8f0; font-size: 0.8rem; line-height: 1.4; }
.svs-axtip-cls { display: block; margin-top: 0.4rem; padding-top: 0.4rem; border-top: 1px solid rgba(178, 141, 85, 0.35); color: #e3c27a; font-size: 0.8rem; font-weight: 600; line-height: 1.4; }

/* multi-select Refine rows: "(Select all that apply)" right after "Your answer", smaller and fainter */
.svs-row-hint { margin-left: 0.35em; font-size: 0.85em; letter-spacing: 0.04em; color: #7f7a72; white-space: nowrap; }
/* multi-select hint: gold pill with a checkbox icon (title) and a smaller twin in Refine */
.svq-q-title .svq-hint { display: table; margin: 0.6rem auto 0; padding: 0.28rem 0.8rem 0.28rem 0.6rem; border: 1px solid rgba(227, 194, 122, 0.6); border-radius: 999px; background: rgba(227, 194, 122, 0.12); color: #ecd29a; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; line-height: 1.3; max-width: 92%; box-shadow: 0 0 12px rgba(227, 194, 122, 0.18); animation: svqHintPulse 1.6s ease-out 0.35s 2; }
.svq-hint::before, .svs-row-hint::before { content: ""; display: inline-block; width: 0.8em; height: 0.8em; margin-right: 0.45em; vertical-align: -0.08em; border: 1.5px solid currentColor; border-radius: 2px; background: linear-gradient(currentColor, currentColor) center / 0 0 no-repeat; box-shadow: inset 0 0 0 1.5px rgba(12, 12, 14, 0.9), inset 0 0 0 9px rgba(227, 194, 122, 0.85); }
.svs-row-hint { display: inline-block; padding: 0.05em 0.55em 0.05em 0.4em; border: 1px solid rgba(227, 194, 122, 0.5); border-radius: 999px; background: rgba(227, 194, 122, 0.1); color: #e3c27a; font-size: 0.78em; font-weight: 600; white-space: normal; }
@keyframes svqHintPulse { 0% { box-shadow: 0 0 0 0 rgba(227, 194, 122, 0.55); } 70% { box-shadow: 0 0 0 9px rgba(227, 194, 122, 0); } 100% { box-shadow: 0 0 12px rgba(227, 194, 122, 0.18); } }
/* multi-select cards: an empty checkbox in the corner, filled with the tick once picked */
.is-multi .svq-check { border-radius: 6px; opacity: 1; transform: none; background: rgba(12, 12, 14, 0.55); box-shadow: 0 0 0 2px rgba(227, 194, 122, 0.85), 0 0 8px rgba(0, 0, 0, 0.6); }
.is-multi .svq-check::before { opacity: 0; }
.is-multi .is-selected > .svq-check { background: linear-gradient(135deg, #dac7a1 0%, #c9ae82 40%, #9d7f5a 100%); box-shadow: 0 0 0 2px rgba(12, 12, 14, 0.85), 0 0 10px rgba(227, 194, 122, 0.55); }
.is-multi .is-selected > .svq-check::before { opacity: 1; }
@media (max-width: 640px) { .svq-q-title .svq-hint { font-size: 0.74rem; padding: 0.24rem 0.65rem 0.24rem 0.5rem; } .is-multi .svq-check { width: 22px; height: 22px; } }
@media (prefers-reduced-motion: reduce) { .svq-q-title .svq-hint { animation: none; } }

/* plain-English help icons + tooltip */
.svq-help { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 1.5px solid rgba(227, 194, 122, 0.75); background: rgba(12, 12, 14, 0.6); color: #e3c27a; font: 700 12px/1 Georgia, "Times New Roman", serif; cursor: help; vertical-align: 0.2em; transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; }
.svq-help:hover, .svq-help:focus-visible, .svq-help[aria-expanded="true"] { background: #e3c27a; color: #1f1507; box-shadow: 0 0 10px rgba(227, 194, 122, 0.5); outline: none; }
.svq-help-q { margin-left: 0.4em; }
.svq-help-card { position: absolute; top: 10px; left: 10px; z-index: 4; width: 22px; height: 22px; font-size: 13px; box-shadow: 0 0 0 2px rgba(12, 12, 14, 0.55); }
.svq-card:hover .svq-help-card, .svq-card:focus-visible .svq-help-card { background: rgba(227, 194, 122, 0.9); color: #1f1507; }
.svq-card.is-text .svq-help-card { top: 50%; margin-top: -11px; left: 10px; }
.svq-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.svq-tip { position: fixed; z-index: 10000; display: none; max-width: min(380px, calc(100vw - 16px)); overflow-wrap: break-word; word-break: normal; hyphens: none; -webkit-hyphens: none; padding: 0.6rem 0.8rem; border: 1px solid rgba(227, 194, 122, 0.55); border-radius: 8px; background: rgba(18, 16, 13, 0.97); color: #eee6d6; font-size: 0.86rem; font-weight: 400; line-height: 1.45; letter-spacing: normal; text-transform: none; text-align: left; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity 0.15s ease, transform 0.15s ease; }
.svq-tip.is-on { opacity: 1; transform: none; }
.svq-tip::after { content: ""; position: absolute; left: var(--ax, 50%); bottom: -6px; width: 10px; height: 10px; margin-left: -5px; background: inherit; border: solid rgba(227, 194, 122, 0.55); border-width: 0 1px 1px 0; transform: rotate(45deg); }
.svq-tip.is-below::after { bottom: auto; top: -6px; border-width: 1px 0 0 1px; }
@media (max-width: 640px) { .svq-help-card { top: 8px; left: 8px; width: 24px; height: 24px; } .svq-tip { font-size: 0.82rem; } }
@media (prefers-reduced-motion: reduce) { .svq-tip { transition: none; } }