/* NN Year-in-Review quiz — all rules scoped under .nnq (Webflow-safe) */
.nnq{--nnq-paper:#FCFBF6;--nnq-ink:#272A2A;--nnq-surface:#EFECE4;--nnq-sage:#DFF0F2;--nnq-cyan:#05ABBD;--nnq-link:#047481;--nnq-mustard:#F2D25C;--nnq-mustard-h:#E5C247;--nnq-clay:#DB2B45;--nnq-emerald:#04845D;--nnq-moss:#54585A;--nnq-line:#E4E0D5;
position:relative;display:block;width:100%;max-width:72rem;margin:0 auto;padding:clamp(1rem,3vw,2.5rem) clamp(.75rem,3vw,1.5rem);overflow-x:clip;color:var(--nnq-ink);background:var(--nnq-paper);font-family:Geist,ui-sans-serif,system-ui,sans-serif;font-size:16px;font-weight:400;line-height:1.5;text-align:left;-webkit-font-smoothing:antialiased}
.nnq,.nnq *,.nnq *::before,.nnq *::after{box-sizing:border-box}
.nnq h1,.nnq h2,.nnq h3,.nnq p,.nnq ul,.nnq figure,.nnq fieldset,.nnq legend{margin:0;padding:0;border:0;font-family:inherit;color:inherit;letter-spacing:normal;text-transform:none}
.nnq ul{list-style:none}
.nnq svg{display:block;max-width:100%;height:auto}
.nnq [hidden]{display:none!important}
.nnq button,.nnq input{font-family:inherit;margin:0;border-radius:0;-webkit-appearance:none;appearance:none;box-shadow:none;text-shadow:none}
.nnq :focus{outline:none}
.nnq :focus-visible{outline:3px solid var(--nnq-ink);outline-offset:3px;box-shadow:0 0 0 6px var(--nnq-cyan)}
.nnq [tabindex="-1"]:focus{outline:none;box-shadow:none}
.nnq .nnq-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* type */
.nnq .nnq-h1{font-size:clamp(3rem,8.5vw,4.5rem);font-weight:600;line-height:1.02;letter-spacing:-.03em}
.nnq .nnq-h2{font-size:clamp(2rem,4.6vw,3rem);font-weight:600;line-height:1.1;letter-spacing:-.025em}
.nnq .nnq-h3{font-size:1.25rem;font-weight:600;line-height:1.25}
.nnq .nnq-clay{color:var(--nnq-clay)}
.nnq .nnq-lead{font-size:clamp(1.125rem,2vw,1.25rem);line-height:1.5;color:var(--nnq-moss);max-width:40rem}
.nnq .nnq-meta{font-size:1rem;color:var(--nnq-moss)}
.nnq .nnq-stat{font-size:clamp(3rem,7vw,3.75rem);font-weight:600;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}

/* cards + layout */
.nnq .nnq-card{position:relative;background:var(--nnq-paper);border:1px solid var(--nnq-line);border-radius:2rem;padding:clamp(1.25rem,4.5vw,3rem)}
.nnq .nnq-screen{display:block;animation:nnq-in .55s cubic-bezier(.2,.7,.2,1) both}
.nnq .nnq-stack-gap>*+*{margin-top:1.5rem}
.nnq .nnq-rise{animation:nnq-in .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*90ms + 120ms)}
@keyframes nnq-in{from{opacity:0;transform:translateY(14px)}}

/* buttons */
.nnq .nnq-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:2.75rem;padding:.75rem 1.25rem;border:1px solid var(--nnq-mustard);border-radius:.75rem;background:var(--nnq-mustard);color:var(--nnq-ink);font-size:14px;font-weight:600;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background-color .2s,transform .2s}
.nnq .nnq-btn:hover{background:var(--nnq-mustard-h);border-color:var(--nnq-mustard-h);color:var(--nnq-ink)}
.nnq .nnq-btn:active{transform:translateY(1px)}
.nnq .nnq-btn[disabled]{opacity:.6;cursor:progress}
.nnq .nnq-btn--ghost{background:transparent;border-color:var(--nnq-ink)}
.nnq .nnq-btn--ghost:hover{background:var(--nnq-surface);border-color:var(--nnq-ink)}
.nnq .nnq-linkbtn{padding:.5rem 0;border:0;background:none;color:var(--nnq-link);font-size:1rem;font-weight:400;text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.nnq .nnq-linkbtn:hover{color:var(--nnq-link)}

/* intro (split-boundary circle: cyan outside, paper inside the surface card) */
.nnq .nnq-intro{position:relative;margin:clamp(1.5rem,4vw,3rem) 0}
.nnq .nnq-circle{position:absolute;top:-4.25rem;right:-3rem;width:clamp(9rem,24vw,15rem);aspect-ratio:1;border-radius:50%;pointer-events:none}
.nnq .nnq-circle--out{background:var(--nnq-cyan);top:clamp(-5rem,-5vw,-3rem);right:-.5rem;z-index:0}
.nnq .nnq-clip{position:absolute;inset:0;border-radius:2rem;overflow:hidden;pointer-events:none}
.nnq .nnq-circle--in{background:var(--nnq-paper);top:clamp(-5rem,-5vw,-3rem);right:-.5rem}
.nnq .nnq-intro-card{position:relative;z-index:1;background:var(--nnq-surface);border:1px solid var(--nnq-line);border-radius:2rem;padding:clamp(5rem,14vw,7rem) clamp(1.25rem,5vw,4rem) clamp(2rem,5vw,4rem)}
.nnq .nnq-intro-card{display:grid;gap:2rem;align-items:end}
.nnq .nnq-intro-body{position:relative;display:grid;gap:1.5rem;max-width:44rem}
.nnq .nnq-intro-art{position:relative;width:min(100%,30rem);justify-self:end}
@media (min-width:64rem){.nnq .nnq-intro-card{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.nnq .nnq-intro-row{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem}

/* progress */
.nnq .nnq-progress{display:flex;align-items:center;gap:.875rem;margin-bottom:1.5rem;color:var(--nnq-moss)}
.nnq .nnq-dots{display:flex;gap:.375rem}
.nnq .nnq-dot{width:.875rem;height:.875rem;border-radius:50%;border:2px solid var(--nnq-ink);background:transparent;transition:background-color .3s}
.nnq .nnq-dot.is-done{background:var(--nnq-ink)}
.nnq .nnq-dot.is-now{background:var(--nnq-mustard)}
.nnq .nnq-dot.is-todo{border-color:var(--nnq-line);border-color:#b9b4a6}

/* choices */
.nnq .nnq-choices{display:grid;gap:.75rem;margin-top:1.75rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.nnq .nnq-choice{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:.75rem;min-height:4.5rem;padding:1rem 1.125rem;border:1.5px solid var(--nnq-line);border-radius:1.25rem;background:var(--nnq-paper);color:var(--nnq-ink);font-size:1.125rem;font-weight:600;line-height:1.25;text-align:left;cursor:pointer;transition:border-color .2s,transform .2s,background-color .2s,box-shadow .2s}
.nnq .nnq-choice:hover{border-color:var(--nnq-ink);transform:translateY(-2px);box-shadow:0 8px 20px -12px rgba(39,42,42,.35)}
.nnq .nnq-choice small{display:block;margin-top:.125rem;font-size:1rem;font-weight:400;color:var(--nnq-moss)}
.nnq .nnq-choice[aria-disabled="true"]{cursor:default;transform:none;box-shadow:none}
.nnq .nnq-choice[aria-disabled="true"]:hover{border-color:var(--nnq-line)}
.nnq .nnq-choice.is-correct,.nnq .nnq-choice.is-correct:hover{border-color:var(--nnq-emerald);background:#f1f8f4;box-shadow:0 0 0 1.5px var(--nnq-emerald)}
.nnq .nnq-choice.is-wrong,.nnq .nnq-choice.is-wrong:hover{border-color:var(--nnq-clay);box-shadow:0 0 0 1.5px var(--nnq-clay)}
.nnq .nnq-choice.is-dim{opacity:.75}
@media (max-width:55.99rem){.nnq .nnq-choices--animals>:last-child:nth-child(odd){grid-column:1/-1}}
.nnq .nnq-tag{display:none;font-size:1rem;font-weight:600}
.nnq .is-correct .nnq-tag{display:inline;color:var(--nnq-emerald)}
.nnq .is-wrong .nnq-tag{display:inline;color:var(--nnq-clay)}
.nnq .nnq-icons{display:flex;flex-wrap:wrap;gap:.25rem .375rem;align-items:center}
.nnq .nnq-icons svg{width:2.25rem;height:auto}
.nnq .nnq-icons--many svg{width:1.75rem}

/* feedback + reveal */
.nnq .nnq-feedback{display:flex;gap:.75rem;align-items:flex-start;margin-top:1.75rem;padding:1rem 1.25rem;border-radius:1.25rem;background:var(--nnq-sage);font-size:1.125rem}
.nnq .nnq-feedback strong{font-weight:600}
.nnq .nnq-feedback svg{flex:none;width:1.75rem;height:1.75rem;margin-top:.125rem}
.nnq .nnq-reveal{margin-top:1.5rem;padding:clamp(1.25rem,3.5vw,2rem);border:1px solid var(--nnq-line);border-radius:2rem;background:var(--nnq-surface);animation:nnq-in .6s cubic-bezier(.2,.7,.2,1) both}
.nnq .nnq-reveal-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem 1rem}
.nnq .nnq-reveal-head .nnq-stat{color:var(--nnq-clay)}
.nnq .nnq-math{margin-top:1rem;padding-top:1rem;border-top:1px dashed #b9b4a6;color:var(--nnq-ink);font-size:1.125rem}
.nnq .nnq-math b{font-weight:600}
.nnq .nnq-fact{margin-top:.5rem;color:var(--nnq-moss)}
.nnq .nnq-warm{margin-top:.75rem;font-size:1.125rem;font-weight:600}
.nnq .nnq-actions{display:flex;justify-content:flex-end;margin-top:1.5rem}
.nnq .nnq-bignum{display:block}

/* stadium reveal */
.nnq .nnq-stadiums{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,8rem),1fr));gap:.75rem;margin:1.25rem 0 .5rem}
.nnq .nnq-stadium{margin:0}
.nnq .nnq-stadium svg{width:100%}
.nnq .nnq-sdot{transform-box:fill-box;transform-origin:center;animation:nnq-pop .35s cubic-bezier(.3,1.6,.5,1) both;animation-delay:var(--d,0ms)}
@keyframes nnq-pop{from{opacity:0;transform:scale(0)}}

/* gift card scene */
.nnq .nnq-scene{position:relative;margin-top:1.5rem;border-radius:1.5rem;background:linear-gradient(var(--nnq-sage),var(--nnq-paper) 85%);border:1px solid var(--nnq-line);overflow:hidden}
.nnq .nnq-scene svg{width:100%}
.nnq .nnq-animal{transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.nnq .nnq-animal.is-hover{transform:translateY(-6px)}
.nnq .nnq-halo{opacity:0;fill:var(--nnq-mustard);transition:opacity .4s}
.nnq .nnq-animal.is-hover .nnq-halo{opacity:.35}
.nnq .nnq-animal.is-answer .nnq-halo{opacity:.55}
.nnq .nnq-animal.is-answer .nnq-bob{animation:nnq-bob .7s .2s ease-in-out 3}
@keyframes nnq-bob{50%{transform:translateY(-10px)}}
.nnq .nnq-scene:not(.is-on) .nnq-pile,.nnq .nnq-scene:not(.is-on) .nnq-mark,.nnq .nnq-scene.is-on .nnq-mystery{display:none}
.nnq .nnq-band{animation:nnq-drop .35s cubic-bezier(.3,1.4,.5,1) both;animation-delay:var(--d,0ms)}
@keyframes nnq-drop{from{opacity:0;transform:translateY(-18px)}}
.nnq .nnq-mark{animation:nnq-in .5s 1.4s ease both}
.nnq .nnq-tag-height{position:absolute;left:.75rem;transform:translateY(calc(-100% - 6px));padding:.25rem .75rem;border-radius:.75rem;background:var(--nnq-ink);color:var(--nnq-paper);font-size:1rem;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.nnq .nnq-scene:not(.is-on) .nnq-tag-height{display:none}
.nnq .nnq-caption{margin-top:.75rem;font-size:1rem;color:var(--nnq-moss)}
.nnq .nnq-choices--animals{grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr))}
@media (min-width:56rem){.nnq .nnq-choices--animals{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* results */
.nnq .nnq-score{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:baseline}
.nnq .nnq-recap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:1rem;margin-top:2rem}
.nnq .nnq-statcard{padding:1.5rem;border:1px solid var(--nnq-line);border-radius:2rem;background:var(--nnq-paper)}
.nnq .nnq-statcard .nnq-stat{color:var(--nnq-clay)}
.nnq .nnq-statcard p{margin-top:.5rem;color:var(--nnq-moss)}
.nnq .nnq-prize{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(1.25rem,4vw,3rem);align-items:center;margin-top:2rem;background:var(--nnq-sage)}
.nnq .nnq-shirt{width:min(100%,15rem);margin:0 auto;transform:rotate(-4deg);filter:drop-shadow(0 14px 14px rgba(39,42,42,.12))}
.nnq .nnq-form{display:grid;gap:1rem}
.nnq .nnq-field{display:grid;gap:.375rem}
.nnq .nnq-field label{font-size:1rem;font-weight:600}
.nnq .nnq-field label span{font-weight:400;color:var(--nnq-moss)}
.nnq .nnq-field input{width:100%;min-height:2.75rem;padding:.625rem .875rem;border:1.5px solid var(--nnq-ink);border-radius:.75rem;background:var(--nnq-paper);color:var(--nnq-ink);font-size:1rem}
.nnq .nnq-field input[aria-invalid="true"]{border-color:var(--nnq-clay)}
.nnq .nnq-help{margin:0;color:var(--nnq-moss);font-size:1rem}
.nnq .nnq-err:empty{display:none}
.nnq .nnq-err{margin:0;min-height:0;color:#b01f35;font-size:1rem;font-weight:600}
.nnq .nnq-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.nnq .nnq-success{display:grid;gap:.75rem}
.nnq .nnq-bottom{display:flex;justify-content:center;margin-top:1.5rem}

/* confetti */
.nnq-confetti{position:fixed;inset:0;z-index:9999;overflow:hidden;pointer-events:none}
.nnq-confetti i{position:absolute;top:-5vh;width:.625rem;height:1rem;border-radius:2px;animation:nnq-fall var(--t,3s) cubic-bezier(.3,.6,.5,1) forwards;animation-delay:var(--d,0s)}
@keyframes nnq-fall{to{transform:translate3d(var(--x,0),110vh,0) rotate(var(--r,720deg));opacity:.9}}

@media (max-width:47.99rem){
.nnq .nnq-prize{grid-template-columns:1fr}
.nnq .nnq-shirt{width:10rem}
.nnq .nnq-actions .nnq-btn,.nnq .nnq-intro-row .nnq-btn,.nnq .nnq-form .nnq-btn{width:100%}
.nnq .nnq-choices{grid-template-columns:1fr 1fr}
}
@media (max-width:23rem){.nnq .nnq-choices,.nnq .nnq-choices--animals{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
.nnq *,.nnq *::before,.nnq *::after{animation:none!important;transition:none!important}
.nnq-confetti{display:none}
}