/* ===== Patch — plant matchmaker (homepage quiz) =====
   Deep-sage panel + cream "botanical swing tag" that fills in as you answer,
   with a live match count from the real catalog. */

.quiz-wrap{position:relative;overflow:hidden;border-radius:32px;padding:52px 56px;min-height:480px;color:#eef2e9;
  background:linear-gradient(148deg,#505f54,#3d4a42 78%)}
.quiz-leafbg{position:absolute;right:-90px;bottom:-130px;width:520px;height:520px;color:#fff;opacity:.05;transform:rotate(-14deg);pointer-events:none}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.quiz-wrap :focus-visible{outline:2.5px solid var(--lime);outline-offset:2px}
.qm-panel :focus-visible{outline:2.5px solid var(--sage-d);outline-offset:2px}
.quiz-wrap [data-qfocus]:focus,.qm-panel [data-qfocus]:focus{outline:none}
.quiz-grid :focus-visible,.quiz-tag :focus-visible,.quiz-empty :focus-visible{outline-color:var(--sage-d)}

/* ============ quiz modal (questions + results open here) ============ */
html.quiz-lock,html.quiz-lock body{overflow:hidden}
.quiz-modal{position:fixed;inset:0;z-index:300;display:none}
.quiz-modal.open{display:flex;align-items:center;justify-content:center;padding:26px}
.qm-backdrop{position:absolute;inset:0;background:rgba(18,22,17,.56);backdrop-filter:blur(4px)}
.qm-panel{position:relative;overflow:hidden;display:flex;flex-direction:column;width:min(1040px,100%);max-height:min(92vh,880px);border-radius:28px;color:var(--ink);
  background:#fff;box-shadow:0 46px 110px -34px rgba(0,0,0,.45)}
.qm-body{position:relative;overflow:auto;overscroll-behavior:contain;padding:48px 52px;scrollbar-width:thin;scrollbar-color:#dbdfce transparent}
.qm-body::-webkit-scrollbar{width:8px}
.qm-body::-webkit-scrollbar-track{background:transparent}
.qm-body::-webkit-scrollbar-thumb{background:#dbdfce;border-radius:99px}
.qm-close{position:absolute;top:16px;right:16px;z-index:3;width:44px;height:44px;border-radius:50%;border:0;background:#f1f3e9;color:var(--ink);font-size:23px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .18s ease}
.qm-close:hover{background:#e4e7da}
@keyframes qm-fade{from{opacity:0}}
@keyframes qm-pop{from{opacity:0;transform:translateY(16px) scale(.985)}}
.quiz-modal.open .qm-backdrop{animation:qm-fade .25s ease}
.quiz-modal.open .qm-panel{animation:qm-pop .32s cubic-bezier(.22,1,.36,1)}

.quiz-step{font-family:var(--label);text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:var(--sage);white-space:nowrap}

/* stem progress — one leaf segment per question, half-fill = in progress.
   Label sits right after the stem so the pair reads as one anchored unit. */
.quiz-track{display:flex;align-items:center;gap:16px;margin:4px 0 26px}
.quiz-stem{display:flex;gap:6px;width:190px;flex:none}
.quiz-stem i{height:4px;flex:1;max-width:54px;border-radius:999px;background:#e7eadb;transition:background .3s ease}
.quiz-stem i.done{background:var(--sage)}
.quiz-stem i.cur{background:linear-gradient(90deg,var(--sage) 0 50%,#e7eadb 50%)}

/* layout */
.quiz-cols{display:grid;grid-template-columns:1.14fr .86fr;gap:52px;align-items:center}
.quiz-cols.qq{align-items:start}
.quiz-cols.qq .quiz-tag{margin-top:42px;justify-self:center;width:min(100%,300px)}
.quiz-stage.anim{animation:quiz-in .32s ease}
@keyframes quiz-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* the swing tag — box-shadow + painted eyelet, NOT mask/filter: those force the
   browser to rasterize the rotated tag offscreen and the text goes soft */
.quiz-tag{position:relative;background:var(--cream);color:var(--ink);border-radius:16px;padding:36px 26px 24px;width:100%;
  transform:rotate(1.5deg);
  box-shadow:0 24px 34px -10px rgba(13,18,14,.42)}
.quiz-tag::before{content:"";position:absolute;left:50%;top:17px;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:50%;border:2.5px solid #dce0cc;
  background:radial-gradient(circle at 50% 44%,#37423a 0 5.5px,#4d5a51 6.5px,transparent 8px);pointer-events:none}
.tag-title{margin:10px 0 0;text-align:center;font-family:var(--label);text-transform:uppercase;letter-spacing:.22em;font-size:10.5px;color:var(--sage-d)}
.tag-rows{display:flex;flex-direction:column;gap:13px;margin-top:20px}
.tag-row{position:relative;display:grid;grid-template-columns:52px 1fr;align-items:end;gap:12px;min-height:20px}
.tag-row .tl{font-family:var(--label);text-transform:uppercase;letter-spacing:.16em;font-size:10px;color:var(--sage);padding-bottom:5px}
/* every value is written ON its dotted line, like a real nursery tag */
.tag-row .tv{display:block;font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:-.01em;line-height:1.3;min-height:22px;padding-bottom:2px;border-bottom:2px dotted #cdd2bd}
.tag-row .tv i{font-style:normal;animation:ch-in .24s ease backwards}
@keyframes ch-in{from{opacity:0}}
.tag-row .tv-blank{position:relative}
.tag-row.cur .tl{color:var(--sage-d)}
.tag-row.cur .tv-blank{border-color:var(--sage)}
.tag-row.cur .tv-blank::after{content:"";position:absolute;left:1px;bottom:4px;width:2px;height:12px;background:var(--sage);animation:tag-caret 1s ease-in-out infinite}
.tag-row .tv.typing{border-color:var(--sage)}
.tag-row .tv.typing::after{content:"";display:inline-block;vertical-align:-1px;width:2px;height:13px;margin-left:2px;background:var(--sage);animation:tag-caret 1s ease-in-out infinite}
@keyframes tag-caret{0%,42%{opacity:1}50%,92%{opacity:.12}100%{opacity:1}}
@keyframes tag-fill{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.tag-count{margin-top:22px;padding-top:15px;border-top:2px dotted #d6dbc6;display:flex;align-items:baseline;gap:10px}
.tag-count b{font-family:var(--display);font-weight:700;font-size:33px;letter-spacing:-.03em;color:var(--sage-d);font-variant-numeric:tabular-nums;line-height:1;animation:tag-fill .3s ease}
.tag-count span{font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;font-size:9.5px;color:var(--sage);line-height:1.6;max-width:120px}

/* intro */
.quiz-intro-copy h2{font-family:var(--display);font-weight:700;font-size:clamp(30px,3.7vw,46px);letter-spacing:-.02em;line-height:1.06;margin:0 0 14px;color:#fff}
.quiz-intro-copy h2 em{font-style:normal;color:var(--lime)}
.quiz-intro-copy>p{font-size:16px;color:#d6ddd0;line-height:1.6;margin:0 0 26px;max-width:46ch}
.quiz-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.quiz-start{position:relative;background:var(--lime);color:var(--ink);border:0;border-radius:30px;padding:15px 30px;font-family:var(--display);font-weight:700;font-size:15.5px;cursor:pointer;display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
/* secondary CTA, only shown once the quiz is complete — outline on the dark
   sage panel so the lime primary keeps the visual lead */
.quiz-shop{position:relative;background:transparent;color:#fff;text-decoration:none;border:1.5px solid rgba(255,255,255,.55);border-radius:30px;padding:13.5px 26px;font-family:var(--display);font-weight:700;font-size:15px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.quiz-shop .qv-arr{display:inline-block;margin-left:2px}
.quiz-shop:not(.gs){transition:transform .22s cubic-bezier(.34,1.56,.64,1),border-color .22s ease,background .22s ease}
.quiz-shop:not(.gs) .qv-arr{transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.quiz-shop:not(.gs):hover{transform:translateY(-2px);border-color:#fff;background:rgba(255,255,255,.1)}
.quiz-shop:not(.gs):hover .qv-arr{transform:translateX(5px)}
.quiz-shop:not(.gs):active{transform:translateY(0) scale(.98);transition-duration:.09s}
/* drop shadow intentionally removed — the hover lift + scale is the only feedback we want */
.quiz-start::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:none;opacity:0;transition:opacity .25s ease;pointer-events:none}
.quiz-start.is-hot::after{opacity:0}
/* CSS-only fallback — applies until quiz.js confirms GSAP loaded and adds .gs */
.quiz-start:not(.gs){transition:transform .22s cubic-bezier(.34,1.56,.64,1)}
.quiz-start:not(.gs) svg{transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.quiz-start:not(.gs):hover{transform:translateY(-2px)}
.quiz-start:not(.gs):hover::after{opacity:1}
.quiz-start:not(.gs):hover svg{transform:rotate(-14deg) scale(1.12)}
.quiz-start:not(.gs):active{transform:translateY(0) scale(.98);transition-duration:.09s}
.quiz-start svg,.quiz-retake svg{width:18px;height:18px;flex:none}
.quiz-meta{display:flex;flex-wrap:wrap;gap:20px;margin-top:24px;font-family:var(--label);text-transform:uppercase;letter-spacing:.1em;font-size:11px;color:#ccd6c7}
.quiz-meta span{display:inline-flex;align-items:center;gap:7px}
.quiz-meta svg{width:15px;height:15px;color:var(--lime)}
.quiz-scene{position:relative;min-height:420px}
.quiz-snap{position:absolute;left:0;bottom:0;width:56%;aspect-ratio:4/5;border-radius:14px;border:8px solid #fff;object-fit:cover;transform:rotate(-4deg);box-shadow:0 28px 54px -26px rgba(12,17,13,.65)}
.quiz-scene .quiz-tag{position:absolute;right:2%;top:2%;width:62%;max-width:300px}

/* questions (rendered in the white modal) */
.quiz-q{font-family:var(--display);font-weight:700;font-size:clamp(24px,2.9vw,34px);letter-spacing:-.02em;line-height:1.1;margin:0 0 8px;color:var(--ink)}
.quiz-help{font-size:14.5px;color:#6c7164;margin:0 0 24px}
.quiz-countline{display:none;align-items:center;gap:8px;margin:0 0 18px;font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;font-size:10.5px;color:var(--sage)}
.quiz-countline svg{width:14px;height:14px;flex:none}
.quiz-countline b{font-family:var(--display);font-size:14px;letter-spacing:0}
.quiz-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.quiz-opts.two{grid-template-columns:repeat(2,1fr);max-width:640px}
.quiz-opt{position:relative;display:flex;flex-direction:column;gap:9px;align-items:flex-start;text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:17px;min-height:44px;cursor:pointer;transition:border-color .18s ease;font:inherit;color:var(--ink)}
.quiz-opt::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 18px 34px -18px rgba(74,88,80,.35);opacity:0;transition:opacity .22s ease;pointer-events:none}
.quiz-opt:hover{border-color:var(--sage)}
.quiz-opt.is-hot::after{opacity:1}
/* CSS-only fallback — until quiz.js confirms GSAP loaded and adds .gs */
.quiz-opt:not(.gs){transition:transform .18s ease,border-color .18s ease}
.quiz-opt:not(.gs):hover{transform:translateY(-2px)}
.quiz-opt:not(.gs):hover::after{opacity:1}
.quiz-opt.sel{background:var(--sage);color:#fff;border-color:var(--lime)}
.quiz-opt .qi{width:30px;height:30px;color:var(--sage)}
.quiz-opt .qi svg{width:100%;height:100%}
.quiz-opt.sel .qi{color:var(--lime)}
.quiz-opt .ql{font-family:var(--display);font-weight:700;font-size:15.5px;line-height:1.15}
.quiz-opt .qs{font-size:12.5px;color:#6a6f61;line-height:1.35}
.quiz-opt.sel .qs{color:rgba(255,255,255,.86)}
.quiz-foot{margin-top:26px;display:flex;align-items:center;gap:22px}
.quiz-back{background:none;border:0;font-family:var(--display);font-weight:600;font-size:14px;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:7px;padding:8px 2px}
.quiz-back:hover{text-decoration:underline}
.quiz-skip{font-family:var(--display);font-size:13px;color:#84897a;background:none;border:0;cursor:pointer;padding:8px 2px}
.quiz-skip:hover{color:var(--ink);text-decoration:underline}

/* results — straight, clean layout: heading, answer chips, matches, actions */
.quiz-results h2{font-family:var(--display);font-weight:700;font-size:clamp(25px,3.1vw,38px);letter-spacing:-.02em;margin:0 0 6px;line-height:1.06;color:var(--ink)}
.quiz-results .rsub{font-size:15px;color:#6c7164;margin:0 0 18px}
.quiz-sum{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.qsm{display:inline-flex;align-items:baseline;gap:8px;background:#f5f7ed;border:1px solid #e5e8d9;border-radius:999px;padding:8px 16px}
.qsm span{font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;font-size:9.5px;color:var(--sage)}
.qsm b{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:-.01em;color:var(--ink)}
.quiz-ractions{display:flex;align-items:center;gap:22px;margin-top:28px;flex-wrap:wrap}
.quiz-ractions .quiz-view{display:inline-flex;align-items:center}
.quiz-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.quiz-grid .pcard{color:var(--ink)}
.quiz-stage.anim .quiz-grid .pcard{animation:quiz-in .4s ease backwards}
.quiz-stage.anim .quiz-grid .pcard:nth-child(2){animation-delay:.04s}
.quiz-stage.anim .quiz-grid .pcard:nth-child(3){animation-delay:.08s}
.quiz-stage.anim .quiz-grid .pcard:nth-child(4){animation-delay:.12s}
.quiz-stage.anim .quiz-grid .pcard:nth-child(5){animation-delay:.16s}
.quiz-stage.anim .quiz-grid .pcard:nth-child(6){animation-delay:.2s}
.quiz-empty{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;text-align:center;color:#525447}
.quiz-empty a{color:var(--teal);font-weight:600;text-decoration:underline}
.quiz-view{position:relative;background:var(--lime);color:var(--ink);text-decoration:none;border-radius:30px;padding:14px 28px;font-family:var(--display);font-weight:700;font-size:15px}
.quiz-view::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:none;opacity:0;transition:opacity .25s ease;pointer-events:none}
.quiz-view.is-hot::after{opacity:0}
.quiz-view .qv-arr{display:inline-block;margin-left:4px}
.quiz-view:not(.gs){transition:transform .22s cubic-bezier(.34,1.56,.64,1)}
.quiz-view:not(.gs) .qv-arr{transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.quiz-view:not(.gs):hover{transform:translateY(-2px)}
.quiz-view:not(.gs):hover::after{opacity:1}
.quiz-view:not(.gs):hover .qv-arr{transform:translateX(5px)}
.quiz-view:not(.gs):active{transform:translateY(0) scale(.98);transition-duration:.09s}
.quiz-retake{background:none;border:0;font-family:var(--display);font-weight:600;font-size:14px;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:7px;padding:8px 2px}
.quiz-retake:hover{text-decoration:underline}
/* the swing tag sits on white inside the modal — lighter shadow + hairline */
.qm-panel .quiz-tag{border:1px solid var(--line);box-shadow:0 18px 30px -16px rgba(74,88,80,.3)}

/* responsive */
@media(max-width:1020px){
  .quiz-cols{gap:36px}
  .quiz-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  .quiz-wrap{padding:36px 22px;border-radius:26px;min-height:0}
  .quiz-modal.open{padding:10px}
  .qm-panel{border-radius:22px;max-height:96vh}
  .qm-body{padding:34px 20px 28px}
  .quiz-cols{grid-template-columns:1fr;gap:32px}
  .quiz-cols.qq .quiz-tag{display:none}
  .quiz-countline{display:inline-flex}
  .quiz-scene{min-height:0;display:flex;justify-content:center;padding:8px 0 4px}
  .quiz-snap{display:none}
  .quiz-scene .quiz-tag{position:static;width:min(100%,320px);transform:rotate(1deg)}
  .quiz-opts,.quiz-opts.two{grid-template-columns:1fr 1fr}
  .quiz-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:470px){.quiz-opts,.quiz-opts.two{grid-template-columns:1fr}}
@media(max-width:480px){
  /* tighter gutters so nothing pushes past 320-430px viewports */
  .quiz-wrap{padding:26px 16px;border-radius:20px}
  .quiz-modal.open{padding:8px}
  .qm-panel{border-radius:18px}
  .qm-body{padding:26px 16px 22px}
  .qm-close{top:10px;right:10px}
  /* progress: fixed 190px stem + nowrap label could overflow — let it flex/wrap */
  .quiz-track{gap:10px 12px;margin-bottom:20px;flex-wrap:wrap}
  .quiz-stem{width:auto;flex:1 1 160px;min-width:0}
  .quiz-stem i{max-width:none}
  .quiz-intro-copy>p{font-size:15px}
  .quiz-tag{padding:30px 20px 22px}
  .quiz-scene .quiz-tag{width:100%}
  .quiz-foot{gap:12px 18px;flex-wrap:wrap}
  .quiz-ractions{gap:14px 18px}
  .quiz-grid{grid-template-columns:1fr}
  .tag-count span{max-width:none}
}
@media(prefers-reduced-motion:reduce){
  .quiz-stage.anim,.quiz-stage.anim .quiz-grid .pcard,.tag-count b,.tag-row .tv i,.tag-row .tv.typing::after,.tag-row.cur .tv-blank::after,.quiz-modal.open .qm-panel,.quiz-modal.open .qm-backdrop{animation:none}
  .quiz-stem i,.quiz-opt,.quiz-opt::after,.quiz-start,.quiz-view,.quiz-shop,.quiz-shop .qv-arr,.quiz-start svg,.quiz-start::after,.quiz-view::after,.quiz-view .qv-arr,.qm-close{transition:none}
}