:root { --on-gold:#17130a; } /* right / wrong colours: site.css brand-metal tokens */
/* Starter-set signup card for the classic quizzes (offer.js); same look as the play.js games. */
/* starter-set offer on the result screen */
.pl-offer { margin:0 auto 1.3rem; max-width:560px; text-align:center; border:1px solid var(--gold); border-radius:18px; padding:1.3rem 1.2rem 1.25rem; background:radial-gradient(120% 90% at 50% 0%,rgba(212,175,95,.16),transparent 70%),rgba(255,255,255,.02); box-shadow:0 20px 50px -35px var(--gold-glow); }
.pl-offer-k { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.pl-offer-h { font-family:var(--font-display); font-size:clamp(1.25rem,4vw,1.5rem); color:var(--text); margin:.35rem 0 .4rem; line-height:1.2; }
.pl-offer-p { color:var(--muted); font-size:.97rem; line-height:1.55; margin:0 auto .9rem; max-width:470px; }
.pl-offer-pl { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 .45rem; }
.pl-offer-pick { display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem; margin-bottom:1rem; }
.pl-era { cursor:pointer; border:1px solid var(--gold-line); background:rgba(255,255,255,.02); color:var(--text); border-radius:100px; padding:.42rem .8rem; font-size:.88rem; font-family:var(--font-body); transition:border-color .15s,background .15s; min-height:44px; }
.pl-era:hover { border-color:var(--gold); }
.pl-era.on { background:var(--gold-bright); border-color:var(--gold-bright); color:var(--on-gold); font-weight:600; }
.pl-era:focus-visible { outline:2px solid var(--gold-bright); outline-offset:2px; }
.pl-offer-done { color:var(--gold-bright); font-family:var(--font-display); font-size:1.05rem; padding:1rem; }
.pl-offer-btn { display:inline-flex; align-items:center; justify-content:center; gap:.55rem; min-height:46px; padding:.8rem 1.4rem; border-radius:10px; border:1px solid transparent; font-family:var(--font-mono); font-size:.82rem; font-weight:700; line-height:1.3; letter-spacing:.08em; text-transform:uppercase; text-align:center; text-decoration:none; white-space:normal; overflow-wrap:break-word; text-wrap:balance; max-width:100%; color:var(--on-gold); cursor:pointer; background:linear-gradient(135deg,var(--gold-bright),var(--gold) 55%,var(--gold-deep)); box-shadow:0 10px 30px -12px rgba(201,168,76,.6); transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,border-color .25s; }
.pl-offer-btn:hover { transform:translateY(-2px); box-shadow:0 0 34px -6px var(--gold-glow),0 16px 34px -14px rgba(201,168,76,.7); }
.pl-offer-btn:focus-visible { outline:2px solid var(--gold-bright); outline-offset:3px; }
#quiz .pl-offer { margin-top:1rem; }
/* Quiz end screen, round 3: the best score and the "What next?" block (common.js quizNext) */
.res-best { text-align:center; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; color:var(--muted); margin:-.4rem 0 1.2rem; }
.res-best b { color:var(--gold-bright); font-weight:600; }
.qz-next { max-width:420px; margin:0 auto 1.3rem; text-align:center; }
.qz-next h4 { font-family:var(--font-mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:.3rem 0 .6rem; }
.qz-next-row { display:flex; flex-direction:column; gap:.6rem; align-items:stretch; }
.qz-next .qz-btn { min-height:46px; }
.pl-offer-form { margin:0 auto; max-width:460px; }
.pl-offer-form input[type="email"] { flex:1 1 220px; min-width:0; }
.pl-offer-form .cf-turnstile { flex-basis:100%; display:flex; justify-content:center; }
.pl-offer-form .cf-turnstile:empty { display:none; }
.pl-offer-hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.pl-offer-legal { color:var(--muted); font-size:.74rem; margin:.6rem 0 0; }
.pl-offer-legal a { color:var(--gold); }
.pl-offer .nl-success { text-align:center; }