/* ===========================================================================
   recommender.css — "Which Trio system fits you?" quiz (Phase 2).
   Additive: a section before #solutions, driven by js/recommender.js. Gated on
   .js so without JS it falls back to an "explore all five" link. Roll back by
   removing recommender.css/js, the #recommender section, and the two links.
   =========================================================================== */

.rec-head { max-width: 680px; }

.rec-card {
  display: none;
  max-width: 640px;
  margin: clamp(36px, 5vw, 56px) auto 0;
  background: var(--bg-white);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 30px 70px -34px rgba(8, 30, 56, 0.4);
  padding: clamp(24px, 4vw, 40px);
}
html.js .rec-card { display: block; }

.rec-fallback { margin-top: 28px; }
html.js .rec-fallback { display: none; }

.rec-progress { display: flex; justify-content: center; gap: 8px; margin-bottom: 26px; }
.rec-progress .d { width: 28px; height: 4px; border-radius: 4px; background: var(--line); transition: background 0.3s var(--ease); }
.rec-progress .d.on { background: var(--accent); }
.rec-progress .d.done { background: var(--gold); }

.rec-stage { animation: recIn 0.35s var(--ease); }

.rec-q {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(19px, 2.4vw, 24px);
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-align: center;
  color: var(--text);
  margin-bottom: 22px;
}
.rec-opts { display: flex; flex-direction: column; gap: 10px; }
.rec-opt {
  display: flex; align-items: center; gap: 12px;
  text-align: left;
  font: inherit; font-size: 15px; font-weight: 500; color: var(--text);
  background: var(--bg-gray);
  border: 1.5px solid var(--line);
  border-radius: 13px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.15s var(--ease);
}
.rec-opt:hover { border-color: var(--accent); background: rgba(10, 60, 111, 0.05); transform: translateY(-1px); }
.rec-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rec-opt .ar { margin-left: auto; color: var(--text-2); opacity: 0.55; transition: transform 0.2s var(--ease), opacity 0.2s var(--ease), color 0.2s var(--ease); }
.rec-opt:hover .ar { opacity: 1; transform: translateX(3px); color: var(--accent); }

.rec-nav { text-align: center; margin-top: 18px; }
.rec-back {
  background: none; border: none; font: inherit; font-size: 14px; font-weight: 500;
  color: var(--text-2); cursor: pointer; padding: 6px 10px;
}
.rec-back:hover { color: var(--text); }

/* result */
.rec-result { text-align: center; }
.rec-result .lbl { font-family: var(--font-head); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-deep); }
.rec-result .name { font-family: var(--font-head); font-weight: 800; font-size: clamp(24px, 3.4vw, 34px); letter-spacing: -0.015em; line-height: 1.12; color: var(--text); margin-top: 8px; }
.rec-result .why { font-size: 15.5px; color: var(--text-2); line-height: 1.5; margin-top: 12px; max-width: 46ch; margin-inline: auto; }
.rec-second { margin-top: 14px; font-size: 13px; color: var(--text-2); }
.rec-second b { color: var(--text); font-weight: 600; }
.rec-cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 24px; margin-top: 26px; }
.rec-restart { margin-top: 18px; }

@keyframes recIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rec-stage { animation: none; } }