/* The onboarding card, matched to the live app's computed styles (dynamic questions card). */
:root{
  --forest:#111A0F;--pine:#1D3018;--ink:#162412;--olive:#4C6234;--olive-mid:#7D9366;
  --cream:#E5D2B8;--eggshell:#F8EEE2;--card:#FFFAF5;--fill:rgba(243,234,223,.75);
  --fill-solid:#F6EEE4;--taupe:#A18372;--grey:#71717A;--gold:#C89B3C;--gold-soft:#E9C979;
  --line:rgba(22,36,18,.12);
  --display:'SN Gangster','Helvetica Neue',Helvetica,Arial,sans-serif;
  --body:'NB International Pro','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'NB International Pro Mono',ui-monospace,Consolas,monospace;
  --ease:cubic-bezier(.22,.8,.24,1);
}

.kq-card{position:relative;box-sizing:border-box;width:100%;max-width:576px;margin:0 auto;background:var(--card);
  border-radius:24px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:28px 64px 40px;color:var(--ink);
  font:400 16px/1.6 var(--body);display:flex;flex-direction:column;min-height:var(--card-min,640px);text-align:left}
.stage[data-size=phone] .kq-card{max-width:390px;padding:22px 22px 26px;border-radius:22px;--card-min:720px}
.kq-card *,.kq-card *::before,.kq-card *::after{box-sizing:border-box}
.kq-top{display:flex;align-items:center;gap:10px;min-height:32px;margin-bottom:10px}
.kq-back{width:32px;height:32px;border-radius:32px;border:0;background:var(--fill);color:var(--taupe);display:grid;place-items:center;
  cursor:pointer;flex:none;transition:background .18s,transform .18s}
.kq-back:hover{background:rgba(243,234,223,1);transform:translateX(-1px)}
.kq-back[disabled]{opacity:.35;cursor:default;transform:none}
.kq-back svg{width:16px;height:16px}
.kq-eyebrow{font:400 10.5px/1 var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--olive-mid)}
.kq-step{margin-left:auto;font:400 10.5px/1 var(--mono);letter-spacing:1.2px;color:#B3A79B}
.kq-title{font:400 32px/1.3 var(--display);letter-spacing:-.6px;color:var(--olive);margin:0;text-wrap:balance}
.stage[data-size=phone] .kq-title{font-size:29px}
.kq-sub{margin:6px 0 0;font:500 16px/1.5 var(--body);color:var(--olive)}
.kq-hint{margin:3px 0 0;font:400 14.5px/1.45 var(--body);color:#71717A}
.kq-body{flex:1;display:flex;flex-direction:column;margin-top:18px;min-height:0}
.kq-foot{display:flex;align-items:center;gap:14px;margin-top:22px}
.kq-next{height:48px;min-width:77px;padding:2px 16px 0;border:0;border-radius:4px;background:var(--pine);color:var(--eggshell);
  font:400 15px/1 var(--mono);letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;transition:background .18s,transform .18s,box-shadow .18s}
.kq-next:hover:not([disabled]){transform:translateY(-1px);box-shadow:0 6px 16px rgba(29,48,24,.22)}
.kq-next[disabled]{background:rgba(12,12,13,.05);color:rgba(12,12,13,.18);cursor:default}
.kq-skip{background:none;border:0;font:400 12px/1 var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--taupe);cursor:pointer;padding:8px 4px}
.kq-skip:hover{color:var(--olive)}
.kq-vis{display:flex;align-items:center;gap:6px;margin-top:10px;font:400 12.5px/1.3 var(--body);color:#71717A}
.kq-vis svg{width:14px;height:14px;flex:none}
.kq-link{background:none;border:0;padding:2px 0;font:400 14px/1.3 var(--body);color:var(--olive);text-decoration:underline;text-decoration-color:rgba(76,98,52,.35);text-underline-offset:3px;cursor:pointer}
.kq-link:hover{text-decoration-color:var(--olive)}
.kq-link.on{color:var(--pine);font-weight:500;text-decoration-color:var(--pine)}
.kq-keyhint{margin-left:auto;font:400 10px/1 var(--mono);letter-spacing:1px;color:#BDB2A6;text-transform:uppercase}
@media (hover:none){.kq-vis{display:flex;align-items:center;gap:6px;margin-top:10px;font:400 12.5px/1.3 var(--body);color:#71717A}
.kq-vis svg{width:14px;height:14px;flex:none}
.kq-link{background:none;border:0;padding:2px 0;font:400 14px/1.3 var(--body);color:var(--olive);text-decoration:underline;text-decoration-color:rgba(76,98,52,.35);text-underline-offset:3px;cursor:pointer}
.kq-link:hover{text-decoration-color:var(--olive)}
.kq-link.on{color:var(--pine);font-weight:500;text-decoration-color:var(--pine)}
.kq-keyhint{display:none}}

/* Text inputs, app fill */
.kq-input,.kq-textarea{width:100%;border:1px solid transparent;border-radius:8px;background:var(--fill);color:var(--ink);
  font:400 16px/1.45 var(--body);padding:11px 14px;outline:none;transition:border-color .18s,background .18s;resize:none}
.kq-input:focus,.kq-textarea:focus{border-color:rgba(76,98,52,.45);background:#F4EBDF}
.kq-input::placeholder,.kq-textarea::placeholder{color:#A99E92}
.kq-label{display:block;font:500 15px/1.4 var(--body);color:var(--olive);margin:0 0 6px}
.kq-label .opt{font:400 13px/1 var(--body);color:#A1A1AA;margin-left:6px}

/* Optional clarify box: space is reserved so nothing below it jumps */
.kq-clarify{margin-top:14px;opacity:0;transform:translateY(4px);transition:opacity .35s var(--ease),transform .35s var(--ease);pointer-events:none}
.kq-clarify.on{opacity:1;transform:none;pointer-events:auto}
.kq-clarify .kq-textarea{font-size:15px;padding:9px 12px}

/* Readout under sliders: fixed height, cross-fades between answers */
.kq-readout{position:relative;height:var(--ro-h,36px);margin-top:10px;text-align:center}
.kq-readout span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:400 22px/1.15 var(--display);
  letter-spacing:-.3px;color:var(--ink);transition:opacity .22s,transform .22s;text-wrap:balance}
.kq-readout span.out{opacity:0;transform:translateY(-4px)}
.kq-readout span.pending{color:#B3A79B;font:400 13px/1.3 var(--body)}
.kq-sublabel{text-align:center;font:400 10.5px/1 var(--mono);letter-spacing:1.3px;text-transform:uppercase;color:var(--olive-mid);height:12px;margin-top:4px}

/* Slider: handle visible from the start, number-line ticks on the track */
.kq-slider{position:relative;height:40px;touch-action:none;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent}
.kq-slider .rail{position:absolute;left:0;right:0;top:19px;height:3px;border-radius:3px;background:#E7DED2}
.kq-slider .fill{position:absolute;top:19px;height:3px;border-radius:3px;background:var(--olive);transition:left .12s,width .12s}
.kq-slider .tick{position:absolute;top:14px;width:1px;height:13px;background:#D3C7B8;transform:translateX(-.5px)}
.kq-slider .tick.mid{height:17px;top:12px;background:#BDAE9C}
.kq-slider .thumb{position:absolute;top:9px;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:var(--olive);
  box-shadow:0 0 0 4px var(--card),0 2px 6px rgba(22,36,18,.3);transition:left .12s var(--ease),transform .15s,background .2s}
.kq-slider.fresh .thumb{background:#fff;box-shadow:0 0 0 1.5px var(--olive),0 2px 6px rgba(22,36,18,.22)}
.kq-slider.fresh .thumb::after{content:"";position:absolute;inset:6px;border-radius:50%;border-left:2px solid var(--olive);border-right:2px solid var(--olive);transform:scaleY(.8)}
.kq-slider.dragging .thumb{transform:scale(1.12);transition:transform .15s}
.kq-slider.dragging .thumb,.kq-slider.dragging .fill{transition:none}
.kq-slider:focus-visible .thumb{box-shadow:0 0 0 4px var(--card),0 0 0 6px rgba(76,98,52,.45)}
.kq-slider:hover .thumb{transform:scale(1.06)}
.kq-ends{display:flex;justify-content:space-between;gap:16px;font:400 13px/1.25 var(--body);color:#71717A;margin-top:2px}
.kq-ends span:last-child{text-align:right}

/* Option rows like the app's radio/checkbox units */
.kq-opts{display:flex;flex-direction:column;gap:8px}
.kq-opt{display:flex;align-items:center;gap:12px;padding:12px;border-radius:8px;background:var(--fill);border:1px solid transparent;cursor:pointer;
  font:400 16px/1.4 var(--body);color:var(--ink);text-align:left;transition:background .15s,border-color .15s,transform .15s;width:100%}
.kq-opt:hover{transform:translateX(3px)}
.kq-opt .dot{width:16px;height:16px;border-radius:50%;border:1.5px solid #B9AC9D;flex:none;display:grid;place-items:center}
.kq-opt.on{background:#E9EEDF;border-color:rgba(76,98,52,.35)}
.kq-opt.on .dot{border-color:var(--olive)}
.kq-opt.on .dot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--olive)}
.kq-opt .key{margin-left:auto;font:400 10px/1 var(--mono);color:#BDB2A6;border:1px solid #E2D8CB;border-radius:4px;padding:3px 5px}
@media (hover:none){.kq-opt .key{display:none}}

/* Painted frame used by most redesigns */
.kq-art{position:relative;border-radius:12px;overflow:hidden;background:#d8cbb7;box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 6px 18px rgba(22,36,18,.16)}
.kq-art img{display:block;width:100%;height:100%;object-fit:cover}
.kq-cap{font:400 10px/1.3 var(--mono);letter-spacing:1px;text-transform:uppercase;color:#B3A79B;margin-top:6px}

/* Fresco choice buttons (same component as the readiness moons) */
.kq-frescos{display:grid;gap:10px}
.kq-fresco{position:relative;border:0;padding:0;border-radius:12px;overflow:hidden;cursor:pointer;background:#e9dfd2;aspect-ratio:3/4;
  box-shadow:0 0 0 1px rgba(22,36,18,.08),0 4px 12px rgba(22,36,18,.12);transition:transform .2s var(--ease),box-shadow .2s,filter .3s}
.kq-fresco img{width:100%;height:100%;object-fit:cover;display:block;transition:filter .35s,transform .5s var(--ease)}
.kq-fresco .lab{position:absolute;left:8px;right:8px;bottom:8px;background:rgba(255,250,245,.94);border-radius:6px;padding:7px 6px 6px;text-align:center;
  font:400 17px/1.1 var(--display);color:var(--ink)}
.kq-fresco .num{position:absolute;top:8px;left:8px;width:20px;height:20px;border-radius:5px;background:rgba(255,250,245,.85);font:400 10px/20px var(--mono);
  text-align:center;color:var(--taupe);opacity:0;transition:opacity .2s}
@media (hover:hover){.kq-frescos:hover .kq-fresco .num{opacity:1}}
.kq-fresco:hover{transform:translateY(-2px)}
.kq-frescos.has .kq-fresco:not(.on) img{filter:grayscale(.85) brightness(.92)}
.kq-frescos.has .kq-fresco:not(.on){box-shadow:0 0 0 1px rgba(22,36,18,.06)}
.kq-fresco.on{box-shadow:0 0 0 2px var(--gold),0 8px 22px rgba(22,36,18,.2)}
.kq-fresco.on .lab{background:#FFF6E3}

/* Fresco strip buttons, matched to the approved No. 47 component */
.kq-frows{display:flex;flex-direction:column;gap:12px}
.kq-frow{position:relative;display:block;width:100%;height:68px;padding:0;border-radius:12px;overflow:hidden;cursor:pointer;background:#3b3a2e;
  border:1px solid rgba(22,36,18,.16);box-shadow:0 1px 2px rgba(22,36,18,.06);text-align:left;
  transition:border-color .45s var(--ease),box-shadow .45s var(--ease),transform .2s var(--ease)}
.kq-frow:hover{transform:translateY(-1px)}
.kq-frow .art{position:absolute;inset:0;transition:filter .45s var(--ease)}
.kq-frow .art img{display:block;width:100%;height:100%;object-fit:cover}
.kq-frow .wash{position:absolute;inset:0;background:#fff;opacity:0;transition:opacity .45s var(--ease)}
.kq-frow .shade{position:absolute;left:0;top:0;bottom:0;width:68%;background:linear-gradient(to right,rgba(17,26,15,.82) 0%,rgba(17,26,15,.5) 45%,rgba(17,26,15,0) 100%)}
.kq-frow .lab{position:absolute;left:16px;right:44px;top:50%;transform:translateY(-50%);font:500 16px/1.25 var(--body);color:#F8EEE2}
.kq-frow .num{position:absolute;right:12px;top:50%;width:20px;height:20px;margin-top:-10px;border-radius:50%;box-sizing:border-box;background:rgba(17,26,15,.42);
  border:1px solid rgba(248,238,226,.35);color:#F8EEE2;font:400 11px/18px var(--mono);letter-spacing:1.1px;text-align:center;transition:background-color .3s var(--ease)}
@media (hover:none){.kq-frow .num{display:none}}
.kq-frows.has .kq-frow:not(.on) .art{filter:saturate(.12) brightness(1.04)}
.kq-frows.has .kq-frow:not(.on) .wash{opacity:.12}
.kq-frow.on{border-color:var(--olive);box-shadow:0 10px 24px rgba(22,36,18,.18)}
.kq-frow.on .num{background:var(--olive);border-color:rgba(248,238,226,.6)}

/* Step transitions inside one card (two-step questions) */
.kq-pane{animation:kqIn .32s var(--ease) both}
@keyframes kqIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .kq-pane{animation:none}
  .kq-card *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* Current-app rendering: deliberately plain */
.kq-card.current .kq-body{gap:14px}
.kq-native{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:4px;background:#E2D8CB;outline:none;margin:14px 0 6px}
.kq-native::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--olive);cursor:pointer}
.kq-native::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:var(--olive);cursor:pointer}

.kq-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}