/* The Trader Profile Quiz on the leads dashboard (quiz.js), in the funnel quiz's colours (Luke, 23 Oct 2026: "match that
   colour theme"): near-black #0f1012, teal #009788 for the reading, red for the headline and the button. The archetypes are
   tarot cards, the same card as the members dashboard (member-platform quiz/ArchetypeCard.tsx, floors/tools/quiz.css). */
@font-face{font-family:"Cinzel";src:url("/assets/fonts/Cinzel-VF.woff2") format("woff2");font-weight:500 800;font-display:swap}
.utq,.utq-promo{--qz-teal:#009788;--qz-teal2:#2fd1bf;--qz-teal-rgb:0,151,136;--qz-red:#dc2626;--qz-red2:#ff5a5a;--qz-ink:#0f1012}
.utq{display:flex;flex-direction:column;gap:16px;max-width:1220px}
.utq-card{position:relative;display:flex;flex-direction:column;gap:12px;padding:26px 26px 24px;border-radius:22px;border:1px solid rgba(255,255,255,.07);
  background:radial-gradient(560px 240px at 50% 0,rgba(var(--qz-teal-rgb),.1),transparent 70%),var(--qz-ink);box-shadow:0 24px 60px -30px rgba(0,0,0,.9);animation:utqIn .4s var(--ease) both}
@keyframes utqIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.utq-pill{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;border:1px solid rgba(255,90,90,.35);background:rgba(220,38,38,.1);color:#ff8585;font:700 11.5px "PT Sans",system-ui,sans-serif;letter-spacing:2.4px;text-transform:uppercase}
.utq-pill svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.utq-pill.good{border-color:rgba(var(--qz-teal-rgb),.5);background:rgba(var(--qz-teal-rgb),.1);color:#5fd6c6}
.utq-card h2,.utq-card h3{margin:0;font-family:"League Gothic";font-weight:400;font-size:clamp(34px,6vw,52px);line-height:1;letter-spacing:.5px;text-transform:uppercase;color:#fff}
.utq-card h2 em{font-style:normal;color:var(--qz-red2)}
.utq-card>p{margin:0;color:var(--fg2);font-size:15.5px;line-height:1.55}
.utq-go{background:linear-gradient(180deg,#ff5a5a,#dc2626);color:#fff;box-shadow:0 14px 34px -14px rgba(220,38,38,.8)}
.utq-go:disabled{opacity:.4;cursor:default;transform:none;filter:none;box-shadow:none}
/* ---------- the tarot cards ---------- */
.tc{position:relative;width:150px;aspect-ratio:5/8;border-radius:14px;padding:5px;background:linear-gradient(160deg,#1c2a2a,#0b0d10 45%,#1b1416);border:1px solid rgba(var(--qz-teal-rgb),.55);
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 24px 50px -22px rgba(0,0,0,.95),0 0 32px -10px rgba(var(--qz-teal-rgb),.45);color:#e9f3f1;flex:none}
.tc-in{position:relative;height:100%;border-radius:10px;border:1px solid rgba(var(--qz-teal-rgb),.35);background:radial-gradient(120% 60% at 50% 38%,rgba(var(--qz-teal-rgb),.22),transparent 60%),#0f1012;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:10px 8px;overflow:hidden}
.tc-in::before{content:"";position:absolute;inset:4px;border-radius:8px;border:1px solid rgba(255,255,255,.07);pointer-events:none}
.tc-in::after{content:"";position:absolute;left:50%;bottom:34%;width:70%;height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(var(--qz-teal-rgb),.7),transparent)}
.tc-num{font:600 12px "Cinzel",serif;letter-spacing:2px;color:#7fcfc3;align-self:flex-start}
.tc-num.bot{align-self:flex-end;transform:rotate(180deg)}
.tc-art{position:relative;display:grid;place-items:center;width:100%;flex:1}
.tc-stars{position:absolute;inset:0;background:radial-gradient(1px 1px at 18% 22%,rgba(255,255,255,.7),transparent 60%),radial-gradient(1px 1px at 78% 18%,rgba(255,255,255,.6),transparent 60%),radial-gradient(1.5px 1.5px at 62% 70%,rgba(127,207,195,.8),transparent 60%),radial-gradient(1px 1px at 30% 78%,rgba(255,255,255,.5),transparent 60%),radial-gradient(1px 1px at 88% 56%,rgba(255,255,255,.45),transparent 60%),radial-gradient(1.2px 1.2px at 12% 58%,rgba(127,207,195,.6),transparent 60%)}
.tc-ring{position:relative;width:62%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(var(--qz-teal-rgb),.7);background:radial-gradient(circle at 50% 40%,rgba(var(--qz-teal-rgb),.28),rgba(15,16,18,.2) 70%);box-shadow:0 0 24px -4px rgba(var(--qz-teal-rgb),.6),inset 0 0 18px rgba(var(--qz-teal-rgb),.25)}
.tc-ring::before{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px dashed rgba(var(--qz-teal-rgb),.4)}
.tc-ring svg{width:56%;height:56%;stroke:#d9fff8;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(47,209,191,.7))}
.tc-name{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1px;padding:0 4px 6px}
.tc-name small{font:600 8.5px "Cinzel",serif;letter-spacing:3px;text-transform:uppercase;color:#7fcfc3}
.tc-name b{font:700 12.5px/1.15 "Cinzel",serif;letter-spacing:.6px;text-transform:uppercase;color:#f3f7f6}
.tc.sm{width:104px;border-radius:10px;padding:4px}.tc.sm .tc-in{padding:7px 6px}.tc.sm .tc-num{font-size:9px}.tc.sm .tc-name b{font-size:9px}.tc.sm .tc-name small{font-size:6.5px;letter-spacing:2px}
.tc.lg{width:200px;border-radius:18px;padding:6px}.tc.lg .tc-in{padding:14px 12px}.tc.lg .tc-num{font-size:15px}.tc.lg .tc-name b{font-size:16px}.tc.lg .tc-name small{font-size:10px}
.tc-lifestyle .tc-ring svg{stroke:#ffe6b0;filter:drop-shadow(0 0 6px rgba(255,200,120,.7))}
.tc-fund_manager .tc-ring svg{stroke:#ffd9d9;filter:drop-shadow(0 0 6px rgba(255,120,120,.6))}


/* the landing: the hand of cards beside the one headline */
.utq-landing{display:grid;grid-template-columns:minmax(0,1fr) 420px;align-items:center;gap:20px;padding:34px 20px 34px 36px;min-height:420px;overflow:hidden;
  background:radial-gradient(700px 320px at 85% 50%,rgba(var(--qz-teal-rgb),.16),transparent 70%),radial-gradient(1px 1px at 12% 30%,rgba(255,255,255,.5),transparent 60%),radial-gradient(1px 1px at 40% 80%,rgba(255,255,255,.35),transparent 60%),radial-gradient(1.5px 1.5px at 70% 12%,rgba(127,207,195,.6),transparent 60%),var(--qz-ink)}
.utq-landing-in{display:flex;flex-direction:column;align-items:flex-start;gap:14px;max-width:520px}
.utq-landing h2{font-size:clamp(44px,6vw,70px)}
.utq-landing-in>p{margin:0;color:#d5dcda;font-size:16px;line-height:1.55;max-width:460px}
.utq-landing .btn{margin-top:8px;min-width:240px;min-height:52px;font-size:15.5px}
.qz-deck{position:relative;height:330px;order:2}
.qz-deck .tc{position:absolute;left:50%;top:50%;transform-origin:50% 120%;transition:transform .5s var(--ease)}
/* a hand of four, spread so every card's emblem shows: --x is the offset from the centre, --r the tilt */
.qz-deck .tc{--x:0px;--r:0deg;--y:0px;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--r))}
.qz-deck .tc:nth-child(1){--x:-120px;--r:-16deg;--y:22px}
.qz-deck .tc:nth-child(2){--x:-40px;--r:-5deg;--y:0px}
.qz-deck .tc:nth-child(3){--x:40px;--r:5deg;--y:0px}
.qz-deck .tc:nth-child(4){--x:120px;--r:16deg;--y:22px}
.qz-deck .tc:hover{z-index:5;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y) - 14px)) rotate(calc(var(--r) * .5))}
.qz-deck .tc{animation:qzDeal .7s var(--ease) both}
.qz-deck .tc:nth-child(2){animation-delay:.08s}.qz-deck .tc:nth-child(3){animation-delay:.16s}.qz-deck .tc:nth-child(4){animation-delay:.24s}
@keyframes qzDeal{from{opacity:0;transform:translate(-50%,-30%) rotate(0)}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.qz-deck .tc{animation:none}}
@media (max-width:820px){
  .utq-landing{grid-template-columns:minmax(0,1fr);padding:18px 18px 24px;gap:6px;min-height:0}
  .utq-landing-in{max-width:none;align-items:center;text-align:center}
  .utq-landing-in .utq-pill{align-self:center}
  .utq-landing h2{font-size:clamp(40px,11vw,56px)}
  .utq-landing .btn{width:100%}
  .qz-deck{order:0;height:230px;margin:0 -10px}
  .qz-deck .tc{width:96px}
  .qz-deck .tc .tc-name b{font-size:9.5px}.qz-deck .tc .tc-name small{font-size:7px;letter-spacing:2px}.qz-deck .tc .tc-num{font-size:10px}
  .qz-deck .tc:nth-child(1){--x:-96px;--r:-13deg;--y:14px}
  .qz-deck .tc:nth-child(2){--x:-32px;--r:-4deg;--y:0px}
  .qz-deck .tc:nth-child(3){--x:32px;--r:4deg;--y:0px}
  .qz-deck .tc:nth-child(4){--x:96px;--r:13deg;--y:14px}
}
/* a question */
.utq-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.utq-cat{font:700 11px "PT Sans",system-ui,sans-serif;letter-spacing:2.4px;text-transform:uppercase;color:#5fd6c6}
.utq-count{font:700 12.5px "PT Sans",system-ui,sans-serif;color:var(--fg3);font-variant-numeric:tabular-nums}
.utq-bar{position:relative;height:5px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.utq-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:linear-gradient(90deg,var(--qz-teal),var(--qz-teal2));box-shadow:0 0 12px rgba(var(--qz-teal-rgb),.7);transition:width .35s var(--ease)}
.utq-q h3{font-family:"PT Sans",system-ui,sans-serif;font-weight:700;font-size:clamp(20px,3.2vw,26px);line-height:1.3;text-transform:none;letter-spacing:0;margin-top:6px}
.utq-sub{margin:-4px 0 0!important;font-size:14.5px!important;color:var(--fg3)!important}
.utq-opts{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.utq-opt{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;padding:16px 18px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:var(--fg);font:500 15px/1.45 "PT Sans",system-ui,sans-serif;text-align:left;cursor:pointer;transition:border-color .2s,background .2s}
.utq-opt:hover{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.05)}
.utq-opt em{font-style:italic}
.utq-opt>i{flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);display:grid;place-items:center}
.utq-opt>i svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.utq-opt.on{border-color:rgba(var(--qz-teal-rgb),.8);background:rgba(var(--qz-teal-rgb),.12);box-shadow:0 0 0 1px rgba(var(--qz-teal-rgb),.3)}
.utq-opt.on>i{background:var(--qz-teal);border-color:var(--qz-teal)}
.utq-acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:8px}
.utq-acts .utq-go{flex:1;min-width:180px}
.utq-inter ul{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.utq-inter li{position:relative;padding-left:26px;color:var(--fg2);font-size:15px;line-height:1.45}
.utq-inter li::before{content:"";position:absolute;left:0;top:6px;width:14px;height:14px;border-radius:50%;background:rgba(var(--qz-teal-rgb),.25);box-shadow:inset 0 0 0 1.5px var(--qz-teal2)}
.utq-calc{align-items:center;text-align:center;padding:48px 24px}
.utq-calc b{font-family:"League Gothic";font-weight:400;font-size:64px;line-height:1;color:#fff}
.utq-calc-h{font:700 12px "PT Sans",system-ui,sans-serif;letter-spacing:2.6px;text-transform:uppercase;color:#5fd6c6}
.utq-calc .utq-bar{width:min(360px,100%)}
/* the result: the drawn card beside the name */
.utq-result{gap:16px}
.utq-result-top{display:flex;align-items:center;gap:26px}
.utq-result-card{transform:rotate(-4deg);animation:utqDraw .8s var(--ease) both}
@keyframes utqDraw{from{opacity:0;transform:translateY(24px) rotate(6deg)}to{opacity:1;transform:rotate(-4deg)}}
.utq-result-head{display:flex;flex-direction:column;gap:10px;min-width:0}
.utq-result h2{font-size:clamp(40px,7vw,64px);background:linear-gradient(90deg,#fff,#ffb3b3 60%,var(--qz-red2));-webkit-background-clip:text;background-clip:text;color:transparent}
.utq-tag{margin:0;font-size:18px;color:#fff;font-weight:700}
.utq-chips{display:flex;flex-wrap:wrap;gap:8px}
.utq-chips span{padding:5px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.12);font:700 11.5px "PT Sans",system-ui,sans-serif;letter-spacing:.6px;color:var(--fg2)}
.utq-read{display:flex;flex-direction:column;gap:10px;padding:16px 18px;border-radius:16px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.025)}
.utq-read-h{display:flex;align-items:center;gap:8px;font:700 11px "PT Sans",system-ui,sans-serif;letter-spacing:2.4px;text-transform:uppercase;color:#5fd6c6}
.utq-read-h::before{content:"";width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#5fd6c6 60%,transparent 62%);box-shadow:0 0 10px rgba(47,209,191,.8)}
.utq-read p{margin:0;color:var(--fg2);font-size:15px;line-height:1.6}
.utq-next{display:flex;flex-direction:column;gap:8px;padding:16px 18px;border-radius:16px;border:1px solid rgba(var(--qz-teal-rgb),.3);background:rgba(var(--qz-teal-rgb),.07)}
.utq-next b{font-size:16px;color:#fff}
.utq-next p{margin:0;color:var(--fg2);font-size:14.5px;line-height:1.5}
.utq-err{margin:0;padding:10px 14px;border-radius:12px;border:1px solid rgba(255,170,70,.45);background:rgba(255,150,60,.1);color:#ffd9a8;font-size:13.5px}
/* the overview card: a small hand (or their card) beside the invitation */
.utq-promo{position:relative;display:flex;align-items:center;gap:18px;overflow:hidden;border-radius:18px;border:1px solid rgba(var(--qz-teal-rgb),.3);background:radial-gradient(420px 200px at 10% 50%,rgba(var(--qz-teal-rgb),.16),transparent 70%),#0f1012;margin:0 0 26px;padding:18px 22px}
.utq-promo-cards{position:relative;flex:none;width:150px;height:150px;display:grid;place-items:center}
.utq-promo-cards .tc{position:absolute}
.utq-promo-cards.fan .tc:nth-child(1){transform:translateX(-30px) rotate(-14deg)}
.utq-promo-cards.fan .tc:nth-child(2){transform:translateX(-10px) rotate(-5deg)}
.utq-promo-cards.fan .tc:nth-child(3){transform:translateX(10px) rotate(5deg)}
.utq-promo-cards.fan .tc:nth-child(4){transform:translateX(30px) rotate(14deg)}
.utq-promo-cards .tc.sm{width:84px}
.utq-promo-in{display:flex;flex-direction:column;gap:8px;min-width:0}
.utq-promo-in h3{margin:0;font-family:"League Gothic";font-weight:400;font-size:clamp(28px,3.4vw,38px);line-height:.98;letter-spacing:.5px;text-transform:uppercase;color:#fff}
.utq-promo-in p{margin:0;color:var(--fg2);font-size:14.5px;line-height:1.55}
.utq-promo .jn-k{color:#5fd6c6}
@media (max-width:640px){
  .utq-card{padding:20px 16px 18px}
  .utq-result-top{flex-direction:column;align-items:center;text-align:center;gap:16px}
  .utq-result-head{align-items:center}
  .utq-result-head .utq-pill{align-self:center}
  .utq-chips{justify-content:center}
  .utq-result-card.tc.lg{width:168px}
  .utq-promo{flex-direction:column;align-items:flex-start;padding:16px}
  .utq-promo-cards{width:100%;height:136px}
}