/* Laeli quiz v2 — shared engine styles (standalone /quiz page + homepage section).
   Tokens mirror the site: forest ink, ivory card, coral action, Fraunces/Nunito. */

.lq-card {
  position: relative;
  background: var(--ivory, #fff8ec);
  border: 1px solid var(--border, #e7d6bd);
  border-radius: 26px;
  box-shadow: 0 16px 32px rgba(40, 46, 70, .16);
  padding: clamp(22px, 5vw, 40px);
  overflow: hidden;
}
.lq-stage { position: relative; min-height: clamp(430px, 58svh, 560px); transition: min-height .3s cubic-bezier(.2, .7, .3, 1); }
.lq-screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  opacity: 0; transform: translateX(26px);
  transition: opacity .26s cubic-bezier(.2, .7, .3, 1), transform .26s cubic-bezier(.2, .7, .3, 1);
  pointer-events: none;
}
.lq-screen.lq-on { opacity: 1; transform: none; pointer-events: auto; }
.lq-screen.lq-out { opacity: 0; transform: translateX(-26px); }
@media (prefers-reduced-motion: reduce) {
  .lq-screen { transition: opacity .2s ease; transform: none !important; }
}

/* progress */
.lq-progress { display: flex; gap: 6px; margin: 0 0 20px; }
.lq-progress i { flex: 1; height: 6px; border-radius: 99px; background: #e8dcc4; }
.lq-progress i.lq-fill { background: var(--coral, #ec7a55); }
.lq-finishing { font-size: 12.5px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--coral-deep, #d8623d); margin: 0 0 16px; }
.lq-pawline { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; color: #c9b98f; }
.lq-pawline::before, .lq-pawline::after { content: ""; flex: 1; border-top: 1px solid #e8dcc4; }

/* type */
.lq-h1 { font-family: var(--display, Georgia, serif); font-weight: 600; font-size: clamp(26px, 5.5vw, 36px); line-height: 1.1; letter-spacing: -.015em; margin: 0 0 10px; color: var(--ink, #1d3a32); }
.lq-q { font-family: var(--display, Georgia, serif); font-weight: 600; font-size: clamp(20px, 4.5vw, 26px); line-height: 1.2; margin: 0 0 14px; color: var(--ink, #1d3a32); }
.lq-sub { color: var(--ink-muted, #395049); font-weight: 600; font-size: 16px; line-height: 1.55; margin: 0 0 18px; }
.lq-hint { font-size: 13.5px; color: #7d8a80; font-weight: 700; margin: 8px 0 0; }
.lq-pill { display: inline-block; background: #f2ead7; border-radius: 999px; padding: 6px 14px; font-size: 13.5px; font-weight: 800; color: var(--ink-muted, #395049); margin: 0 0 16px; }
.lq-paw { width: 14px; height: 14px; vertical-align: -2px; margin-right: 3px; }

/* options */
.lq-opts { display: grid; gap: 10px; }
.lq-opt {
  font-family: var(--body, sans-serif); font-weight: 800; font-size: 16px; color: var(--ink, #1d3a32);
  text-align: left; background: #fffdf6; border: 1.5px solid var(--border, #e7d6bd);
  border-radius: 16px; padding: 14px 16px; cursor: pointer;
  transition: border-color .12s, background .12s, transform .06s;
}
.lq-opt:hover { border-color: var(--action, #ee9b72); background: #fff6ea; }
.lq-opt:active { transform: scale(.99); }
.lq-opt.lq-picked { border-color: var(--coral, #ec7a55); background: #fff0e4; }

/* chips */
.lq-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.lq-chip {
  font-family: var(--body, sans-serif); font-weight: 800; font-size: 13.5px; color: var(--ink-muted, #395049);
  background: #fbf3e2; border: 1.5px solid var(--border, #e7d6bd); border-radius: 999px;
  padding: 7px 13px; cursor: pointer; transition: all .12s;
}
.lq-chip.lq-on { background: var(--ink, #1d3a32); color: var(--ivory, #fff8ec); border-color: var(--ink, #1d3a32); }

/* inputs */
.lq-input, .lq-email {
  width: 100%; font-family: var(--body, sans-serif); font-weight: 700; font-size: 17px; color: var(--ink, #1d3a32);
  background: #fffdf6; border: 1.5px solid var(--border, #e7d6bd); border-radius: 999px; padding: 14px 20px;
}
.lq-ta {
  width: 100%; min-height: 88px; font-family: var(--body, sans-serif); font-weight: 600; font-size: 16px;
  color: var(--ink, #1d3a32); background: #fffdf6; border: 1.5px solid var(--border, #e7d6bd);
  border-radius: 16px; padding: 14px 16px; resize: vertical;
}
.lq-typeahead { position: relative; }
.lq-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 5;
  background: #fffdf6; border: 1.5px solid var(--border, #e7d6bd); border-radius: 16px;
  max-height: 190px; overflow-y: auto; box-shadow: 0 12px 24px rgba(40, 46, 70, .14);
}
.lq-suggest button { display: block; width: 100%; text-align: left; background: none; border: none; font-family: var(--body, sans-serif); font-weight: 700; font-size: 15px; color: var(--ink, #1d3a32); padding: 10px 16px; cursor: pointer; }
.lq-suggest button:hover { background: #fff0e4; }

/* nav */
.lq-nav { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 18px; }
.lq-back { background: none; border: none; color: #7d8a80; font-family: var(--body, sans-serif); font-weight: 800; font-size: 14px; cursor: pointer; padding: 8px 0; }
.lq-skip { background: none; border: none; color: #7d8a80; font-family: var(--body, sans-serif); font-weight: 800; font-size: 14px; cursor: pointer; padding: 8px 0; text-decoration: underline; text-underline-offset: 3px; }
.lq-next, .lq-send {
  background: var(--action, #ee9b72); color: #3b2313; border: none; border-radius: 999px; cursor: pointer;
  font-family: var(--body, sans-serif); font-weight: 900; font-size: 16.5px; padding: 13px 26px;
  box-shadow: 0 8px 18px rgba(216, 127, 87, .35); transition: background .12s, transform .06s;
}
.lq-next:hover, .lq-send:hover { background: var(--action-pressed, #d87f57); color: #fff4e8; }
.lq-next:active, .lq-send:active { transform: scale(.98); }
.lq-send[disabled] { opacity: .6; cursor: wait; }

/* imagery */
.lq-img { border-radius: 18px; overflow: hidden; margin: 4px 0 16px; }
.lq-img img { width: 100%; height: 170px; object-fit: cover; display: block; }
.lq-img.lq-face { width: min(210px, 58vw); height: min(210px, 58vw); margin: 2px auto 16px; border-radius: 20px; }
.lq-img.lq-face img { height: 100%; }
.lq-mascot { width: 76px; height: 76px; display: block; margin: 6px auto 12px; }

/* intro — centered, warm, fills the stage instead of top-hugging it */
.lq-intro { margin: auto 0; text-align: center; }
.lq-intro .lq-mascot { width: 96px; height: 96px; margin: 0 auto 14px; animation: lq-float 3.4s ease-in-out infinite; }
@keyframes lq-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (prefers-reduced-motion: reduce) { .lq-intro .lq-mascot { animation: none; } }
.lq-intro .lq-h1 { margin-bottom: 12px; }
.lq-intro .lq-sub { max-width: 520px; margin: 0 auto 16px; }
.lq-intro .lq-pill { background: #fdeadd; color: #8a5a2e; }
.lq-introgo { margin: 18px 0 12px; }
.lq-introgo .lq-next { font-size: 17.5px; padding: 15px 36px; }
.lq-intro .lq-hint { margin-top: 2px; }
.lq-center { text-align: center; }
.lq-center .lq-opts, .lq-center .lq-nav { text-align: initial; }

/* milestone / assembly */
.lq-dots { display: inline-block; }
.lq-dots i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--coral, #ec7a55); margin-left: 5px; vertical-align: 1px; animation: lq-dot 1.2s ease-in-out infinite; }
.lq-dots i:nth-child(2) { animation-delay: .2s; }
.lq-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes lq-dot { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .lq-dots i { animation: none; opacity: .8; } }
.lq-stack { display: grid; gap: 8px; margin: 12px 0 4px; }
.lq-stack-item {
  background: #fffdf6; border: 1.5px solid var(--border, #e7d6bd); border-radius: 12px;
  padding: 10px 14px; font-weight: 800; font-size: 14.5px; color: var(--ink, #1d3a32);
  opacity: 0; transform: translateY(8px); transition: all .3s ease;
}
.lq-stack-item.lq-in { opacity: 1; transform: none; }

/* authority rows */
.lq-rows { display: grid; gap: 10px; margin: 4px 0 14px; }
.lq-row { background: #fffdf6; border: 1.5px solid var(--border, #e7d6bd); border-radius: 14px; padding: 12px 14px; font-size: 14.5px; line-height: 1.5; color: var(--ink-muted, #395049); font-weight: 600; }
.lq-row b { color: var(--ink, #1d3a32); }

/* reveal */
.lq-ref { display: inline-block; background: #14302a; color: #efe6d4; border-radius: 10px; padding: 6px 12px; font-family: Menlo, monospace; font-size: 13px; letter-spacing: .06em; margin: 0 0 6px; }
.lq-honest { font-size: 13px; font-weight: 800; color: #7d8a80; margin: 0 0 14px; }
.lq-bullets { display: grid; gap: 10px; margin: 0 0 14px; }
.lq-bullet { display: flex; gap: 10px; align-items: flex-start; background: #fffdf6; border: 1.5px solid var(--border, #e7d6bd); border-radius: 14px; padding: 12px 14px; }
.lq-bullet .n { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--ink, #1d3a32); color: var(--peach, #f7d2ac); font-weight: 900; font-size: 13px; display: grid; place-items: center; }
.lq-bullet p { margin: 0; font-size: 14.5px; line-height: 1.5; font-weight: 600; color: var(--ink-muted, #395049); }
.lq-bullet p b { color: var(--ink, #1d3a32); }
.lq-fine { font-size: 13px; line-height: 1.5; color: #8a8275; font-weight: 700; margin: 10px 0 0; }
.lq-status { display: none; margin-top: 12px; border-radius: 12px; padding: 10px 14px; font-weight: 800; font-size: 14.5px; }
.lq-badges { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 14px 0 4px; }
.lq-badges img { height: 46px; width: auto; display: block; }

@media (max-width: 560px) {
  .lq-stage { min-height: min(72svh, 600px); }
  .lq-img img { height: 140px; }
}