:root{
  --red:#c4141c; --red2:#e0222b; --red-d:#8f0b12; --ink:#0d0d0f; --ink2:#17171a; --paper:#f6f4f2; --mut:#b9b9c0; --line:rgba(255,255,255,.22);
  --head:"Barlow Condensed","Arial Narrow",Impact,sans-serif; --body:"Inter",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0}
[hidden]{display:none !important}
html{scroll-behavior:smooth;scroll-snap-type:y mandatory}
body{background:var(--ink);color:#fff;font:400 16px/1.55 var(--body);-webkit-font-smoothing:antialiased}
body.locked{overflow:hidden;height:100svh}
a{color:inherit}
h1,h2,h3{font-weight:800}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ================= lift intro ================= */
.lift{position:fixed;inset:0;z-index:100;overflow:hidden;touch-action:manipulation;cursor:pointer}
.lift.gone{display:none}
.door{position:absolute;top:0;bottom:0;width:50%;transition:transform .9s cubic-bezier(.7,0,.2,1);will-change:transform;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),
    linear-gradient(90deg,#26262a 0%,#6f7076 14%,#3c3d42 40%,#8a8b91 55%,#4a4b50 80%,#202023 100%)}
.door::after{content:"";position:absolute;inset:0;
  background:radial-gradient(circle,rgba(196,20,28,.55) 1.6px,transparent 2.2px) 0 0/11px 11px;
  -webkit-mask-image:linear-gradient(180deg,transparent 35%,#000 100%);mask-image:linear-gradient(180deg,transparent 35%,#000 100%)}
.door-l{left:0;box-shadow:2px 0 0 #0a0a0b inset,-2px 0 0 #0a0a0b inset}
.door-r{right:0;box-shadow:2px 0 0 #0a0a0b inset,-2px 0 0 #0a0a0b inset}
.lift.open .door-l{transform:translateX(-101%)}
.lift.open .door-r{transform:translateX(101%)}
.floor{position:absolute;left:50%;top:max(7svh,52px);transform:translateX(-50%);display:flex;align-items:center;gap:.7rem;
  padding:.35rem 1.1rem;background:#070708;border:3px solid #3a3a3e;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.6);transition:opacity .4s}
.floor b{font:800 clamp(2.6rem,9vw,4.2rem)/1 var(--head);min-width:2ch;text-align:center;color:#ff3b30;text-shadow:0 0 16px rgba(255,59,48,.85);font-variant-numeric:tabular-nums}
.floor .arrow{color:#ff3b30;font-size:1.2rem;animation:blink 1s steps(2) infinite}
.floor.ding b{animation:ding .5s ease}
@keyframes blink{50%{opacity:.25}}
@keyframes ding{0%{transform:scale(1)}40%{transform:scale(1.18);text-shadow:0 0 34px #ff3b30}100%{transform:scale(1)}}
.floor-label{position:absolute;left:0;right:0;top:calc(max(7svh,52px) + 6.6rem);text-align:center;font:700 clamp(1rem,3.4vw,1.5rem) var(--head);letter-spacing:.32em;text-transform:uppercase;
  color:#fff;opacity:0;transition:opacity .35s;text-shadow:0 2px 12px #000}
.lift.arrived .floor-label{opacity:1}
.lift.open .floor,.lift.open .floor-label,.lift.open .skip{opacity:0}
.skip{position:absolute;right:max(16px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));padding:.5rem 1rem;background:rgba(0,0,0,.45);color:#fff;
  border:1px solid rgba(255,255,255,.4);border-radius:99px;font:600 .8rem var(--body);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:opacity .3s}
.skip:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ================= snap sections ================= */
.sec{position:relative;min-height:100svh;scroll-snap-align:start;overflow:hidden;display:grid;place-items:center}
.sec:not(.reg){scroll-snap-stop:always}
#presenters{display:contents}
.sec-in{position:relative;width:min(100%,960px);padding:clamp(72px,11svh,110px) 22px clamp(48px,8svh,80px);text-align:left}
.sec-in.narrow{width:min(100%,640px)}
.eyebrow{display:inline-block;font:700 .8rem var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--red2)}
h2{margin-top:.6rem;font:800 clamp(2rem,6vw,3.6rem)/1.04 var(--head);text-transform:uppercase;letter-spacing:.01em}
.lede{margin-top:1rem;max-width:620px;color:#d9d9de;font-size:1.08rem;line-height:1.65}
.small{font:400 .84rem/1.5 var(--body);color:var(--mut)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:1.6rem}
.cta{display:inline-block;padding:.95rem 1.7rem;border:2px solid var(--red);background:var(--red);color:#fff;font:700 .85rem var(--body);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;cursor:pointer;border-radius:3px;transition:transform .25s,box-shadow .25s,background .25s}
.cta:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(196,20,28,.45);background:var(--red2)}
.cta.ghost{background:transparent;border-color:#fff}
.cta.ghost:hover{background:rgba(255,255,255,.12);box-shadow:none}
.cta.light{background:#fff;color:var(--red);border-color:#fff}
.cta:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* reveal as each section arrives (stagger lives on --i, never an inline animation-delay) */
.rv{opacity:0;transform:translateY(26px)}
.sec.in .rv{animation:arrive .85s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i,0) * 140ms + 100ms)}
@keyframes arrive{to{opacity:1;transform:none}}

/* side dots + progress */
.progress{position:fixed;left:0;top:0;right:0;height:3px;z-index:40;pointer-events:none}
.progress i{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(0);background:var(--red2)}
.dots{position:fixed;right:max(12px,env(safe-area-inset-right));top:50%;transform:translateY(-50%);z-index:40;display:grid;gap:14px;opacity:0;transition:opacity .6s}
body.open .dots{opacity:1}
.dots a{position:relative;width:12px;height:12px;border-radius:50%;border:2px solid #fff;background:transparent;transition:background .3s,transform .3s}
.dots a.on{background:var(--red2);border-color:var(--red2);transform:scale(1.3)}
.dots a::before{content:attr(data-label);position:absolute;right:22px;top:50%;transform:translateY(-50%);white-space:nowrap;font:700 .68rem var(--body);letter-spacing:.16em;text-transform:uppercase;color:#fff;opacity:0;transition:opacity .25s;pointer-events:none;text-shadow:0 1px 8px #000}
.dots a:hover::before,.dots a:focus-visible::before{opacity:1}

/* ================= hero ================= */
.hero{text-align:left;padding:12svh 22px 10svh;place-items:center start}
.hero-bg{position:absolute;inset:0;background:url(assets/dawn.webp) center 38%/cover;transform:scale(1.1);transition:transform 7s cubic-bezier(.2,.6,.2,1)}
body.open .hero-bg{transform:scale(1)}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,2,4,.82),rgba(8,2,4,.35) 62%,rgba(8,2,4,.15)),linear-gradient(180deg,rgba(8,2,4,.45),transparent 30%,rgba(120,8,14,.55))}
.hero-copy{position:relative;width:min(100%,980px);margin:0 auto}
.mark{display:block;width:min(150px,38vw);height:auto;margin-bottom:1.6rem}
.kicker{font:700 clamp(1rem,2.6vw,1.35rem) var(--head);letter-spacing:.34em;text-transform:uppercase;color:#ffd5d6}
h1{margin-top:.4rem;font:800 clamp(2.8rem,min(14vw,14svh),8rem)/.92 var(--head);text-transform:uppercase;letter-spacing:.005em;text-shadow:0 4px 30px rgba(0,0,0,.5)}
h1 span{color:#ff3b45;display:block}
.when{margin-top:1.6rem;font:600 clamp(1rem,2.8vw,1.35rem) var(--body)}
.when i{font-style:normal;color:#ff6b73;padding:0 .6em}
.where{margin-top:.25rem;font:400 clamp(.95rem,2.4vw,1.15rem) var(--body);color:#f0dcdc}
.scroll{position:absolute;bottom:3svh;left:50%;width:26px;height:42px;margin-left:-13px;border:2px solid #fff;border-radius:14px}
.scroll span{position:absolute;left:50%;top:8px;width:3px;height:8px;margin-left:-1.5px;border-radius:2px;background:#fff;animation:wheel 1.8s ease-in-out infinite}
@keyframes wheel{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}
/* arrival stagger, ~180ms apart, starts when the lift opens */
.r1,.r2,.r3,.r4,.r5,.r6{opacity:0;transform:translateY(22px)}
body.open .r1,body.open .r2,body.open .r3,body.open .r4,body.open .r5,body.open .r6{animation:arrive .9s cubic-bezier(.2,.7,.2,1) forwards}
body.open .r1{animation-delay:.2s}body.open .r2{animation-delay:.38s}body.open .r3{animation-delay:.56s}
body.open .r4{animation-delay:.74s}body.open .r5{animation-delay:.92s}body.open .r6{animation-delay:1.1s}

/* ================= feature presenters ================= */
.presenter{background:linear-gradient(180deg,#a60d14 0%,#c9161f 55%,#9a0c12 100%);place-items:stretch}
.presenter::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(255,255,255,.07) 1.3px,transparent 1.9px) 0 0/14px 14px;pointer-events:none}
.geo{position:absolute;right:0;bottom:0;width:min(34vmin,300px);aspect-ratio:1;pointer-events:none}
.geo::before,.geo::after{content:"";position:absolute;width:50%;height:50%}
.geo::before{right:0;top:0;background:linear-gradient(225deg,#7a0a10 50%,transparent 50%)}
.geo::after{left:0;bottom:0;background:linear-gradient(45deg,#7a0a10 50%,transparent 50%)}
.p-grid{position:relative;width:min(100%,1120px);margin:0 auto;padding:clamp(54px,8svh,92px) 22px 0;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(16px,4vw,48px);align-items:end}
.p-text{padding-bottom:clamp(16px,3.4svh,40px)}
.p-text .cta{margin-top:.7rem;padding:.8rem 1.4rem}
.tagpill{display:inline-block;padding:.32rem .85rem;background:#fff;color:var(--red);border-radius:99px;font:700 .72rem var(--body);letter-spacing:.16em;text-transform:uppercase}
.topic{margin-top:.9rem;font:800 clamp(1.8rem,min(3.7vw,6svh),3rem)/1.04 var(--body);letter-spacing:-.02em;text-shadow:0 3px 18px rgba(0,0,0,.25)}
.who-row{margin-top:.8rem;display:flex;align-items:center;gap:14px 20px;flex-wrap:wrap}
.who{margin:0;font:700 1.3rem/1.2 var(--body)}
.who small{display:block;margin-top:.2rem;font:400 1rem/1.35 var(--body);color:#ffe3e4}
.logochip{display:inline-flex;align-items:center;margin:0;padding:.4rem .7rem;background:#fff;border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.logochip img{display:block;height:46px;width:auto;max-width:230px;object-fit:contain}
.blurb{margin-top:.8rem;max-width:620px;color:#fff3f3;font-size:.92rem;line-height:1.5}
.wants-title{margin-top:.85rem;font:700 .74rem var(--body);letter-spacing:.18em;text-transform:uppercase;color:#ffd0d2}
.wants{list-style:none;padding:0;margin:.45rem 0 0;display:grid;grid-template-columns:1fr 1fr;gap:6px;max-width:620px}
.wants li{padding:.34rem .65rem;background:rgba(0,0,0,.2);border-left:3px solid #fff;font-size:.88rem;line-height:1.35}
.p-cta{margin-top:.8rem;max-width:600px;font:600 .92rem/1.45 var(--body);color:#fff}
.p-photo{position:relative;align-self:end;justify-self:center;width:100%}
.p-photo img{display:block;width:auto;max-width:100%;max-height:min(80svh,760px);margin:0 auto;object-fit:contain;filter:drop-shadow(0 18px 30px rgba(0,0,0,.35))}

/* ================= what to expect ================= */
.expect{background:radial-gradient(ellipse at 80% 0%,rgba(196,20,28,.35),transparent 55%),var(--ink)}
.steps{list-style:none;padding:0;margin:1.8rem 0 1rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.steps li{position:relative;padding:1.4rem 1.2rem 1.2rem;background:var(--ink2);border:1px solid var(--line);border-top:4px solid var(--red)}
.steps b{display:block;font:800 3rem/1 var(--head);color:var(--red2)}
.steps h3{margin-top:.3rem;font:700 1.15rem var(--body)}
.steps p{margin-top:.4rem;color:#cfcfd5;font-size:.95rem}

/* ================= register ================= */
.reg{background:radial-gradient(ellipse at 15% 0%,rgba(196,20,28,.4),transparent 55%),var(--ink);place-items:start center}
.reg .sec-in{padding-top:clamp(72px,10svh,100px)}
#regForm{margin-top:1.6rem;display:grid;gap:15px}
label{display:grid;gap:6px;font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#d2d2d8}
input,select{width:100%;padding:.85rem 1rem;background:rgba(255,255,255,.07);border:1px solid var(--line);color:#fff;font:400 1rem var(--body);border-radius:4px}
input::placeholder{color:#8e8e96}
select option{color:#000}
input[type=checkbox]{width:20px;height:20px;padding:0;accent-color:var(--red);flex:none;margin-top:3px}
.hintline{display:inline;margin-left:.6em;letter-spacing:.03em;text-transform:none;font:400 .78rem var(--body);color:#8e8e96}
.consent{display:flex;gap:.75rem;align-items:flex-start;text-transform:none;letter-spacing:0;font:400 .84rem/1.5 var(--body);color:#d8d8de}
#regForm .cta{justify-self:start}
.msg{min-height:1.4em;color:#ffd7d9;font:500 .95rem var(--body)}
.msg.bad{color:#ff9aa0}
.passbox{margin-top:1.6rem;text-align:center}
.passbox h3{font:800 1.8rem var(--head);text-transform:uppercase;letter-spacing:.02em}
.passbox img{display:block;width:100%;max-width:340px;height:auto;margin:1rem auto;border:1px solid #fff;border-radius:6px}
.passbox .cta-row{justify-content:center}
.passbox .small{margin-top:1rem}

/* payment (paid mode only) */
.pay{padding:1.2rem;border:1px solid var(--line);background:var(--ink2);display:grid;gap:14px}
.pay h3{font:800 1.3rem var(--head);text-transform:uppercase}
.pay-body{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}
.qr{display:grid;gap:8px;justify-items:center}
.qr img,.qr-hold{width:156px;height:156px;background:#fff;padding:8px;border-radius:4px;object-fit:contain}
.qr-hold{display:grid;place-items:center;text-align:center;background:rgba(255,255,255,.06);border:1px dashed var(--line);color:#bbb;font:500 .9rem/1.4 var(--body);padding:8px}
.qr figcaption a{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase}
.pay-info{display:grid;gap:8px;align-content:center}
.pay-info p{margin:0}.pay-info .total{font:800 1.7rem/1.1 var(--head);color:#ff6b73}
.proof{display:grid;gap:8px}
.lbl{font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#d2d2d8}
.drop{position:relative;display:grid;place-items:center;min-height:84px;padding:14px;border:1px dashed rgba(255,255,255,.5);background:rgba(255,255,255,.04);cursor:pointer;text-align:center;text-transform:none;letter-spacing:.02em;font:500 1rem var(--body);color:#fff;border-radius:4px}
.drop:hover,.drop.over{background:rgba(196,20,28,.2);border-color:#fff}
.drop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.drop:focus-within{outline:2px solid #fff;outline-offset:2px}
.proof-prev{display:flex;gap:14px;align-items:center;padding:10px;border:1px solid var(--line);background:rgba(0,0,0,.25)}
.proof-prev img{width:72px;height:96px;object-fit:cover;border:1px solid #fff;background:#000}
.proof-prev p{margin:0 0 8px;font:500 .9rem/1.3 var(--body);word-break:break-all}
.proof-prev button{padding:.35rem .8rem;background:none;border:1px solid var(--line);color:#fff;font:700 .68rem var(--body);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;border-radius:3px}
.proof small{font:400 .78rem var(--body);color:var(--mut)}

/* ================= arrival + share ================= */
.arrive{background:linear-gradient(180deg,var(--ink) 0%,#2b0508 100%)}
.share{margin-top:2.2rem;padding:1.4rem;border:1px solid var(--line);background:rgba(255,255,255,.04);display:grid;gap:12px;max-width:560px}
.share h3{font:800 1.5rem var(--head);text-transform:uppercase;letter-spacing:.01em}
.share .cta{justify-self:start}
footer{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--line);font:600 .9rem var(--body);color:#cfcfd5;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
.fine{margin-top:.4rem;font:400 .75rem var(--body);color:var(--mut)}

/* ================= small screens ================= */
@media (max-width:760px){
  .hero-bg{background-image:url(assets/dawn-v.webp);background-position:center 30%}
  .p-grid{grid-template-columns:1fr;padding-top:70px}
  .p-text{order:1;padding-bottom:18px}
  .wants{grid-template-columns:1fr}
  .p-photo{order:0;max-width:min(300px,62vw);margin-top:-6px}
  .p-photo img{max-height:34svh}
  .geo{width:30vmin}
  .dots{gap:11px}.dots a::before{display:none}
  .pay-body{grid-template-columns:1fr;justify-items:center;text-align:center}
}
@media (max-height:640px){.p-photo img{max-height:46svh}}

/* ================= reduced motion: nothing animates, nothing is blanked ================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .lift{display:none}
  .hero-bg{transform:none;transition:none}
  .scroll span,.floor .arrow{animation:none}
  .r1,.r2,.r3,.r4,.r5,.r6,.rv{opacity:1;transform:none}
  body.open .r1,body.open .r2,body.open .r3,body.open .r4,body.open .r5,body.open .r6,.sec.in .rv{animation:none}
}

/* ================= Entrepreneur DNA quiz ================= */
.herolink{margin-top:1rem;font-size:.95rem}
.herolink a{color:#fff;text-decoration:underline;text-underline-offset:4px}
.dna{background:radial-gradient(ellipse at 85% 10%,rgba(196,20,28,.45),transparent 55%),var(--ink)}
.dna-setup{display:grid;gap:14px;margin:1.4rem 0 1.2rem;max-width:520px}
.dna-last{margin-top:1.6rem;padding:1rem 1.1rem;border:1px solid var(--line);border-left:4px solid var(--red);background:rgba(255,255,255,.04);max-width:620px}
.dna-last p{font-weight:600}
.dna-count{font:600 .8rem var(--body);letter-spacing:.16em;text-transform:uppercase;color:#d2d2d8;margin-top:1.4rem}
.dna-bar{height:4px;background:rgba(255,255,255,.14);margin:.6rem 0 1.2rem;overflow:hidden}
.dna-bar i{display:block;height:100%;width:100%;background:var(--red2);transform-origin:left;transform:scaleX(0);transition:transform .35s ease}
.dna-q{font:800 clamp(1.35rem,3.6vw,2rem)/1.2 var(--body);letter-spacing:-.01em;max-width:760px;outline:none}
.dna-opts{display:grid;gap:10px;margin-top:1.3rem;max-width:760px}
.dna-opt{display:flex;gap:14px;align-items:flex-start;text-align:left;padding:.95rem 1rem;background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:6px;color:#fff;font:500 1rem/1.4 var(--body);cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
.dna-opt:hover{background:rgba(196,20,28,.28);border-color:#fff}
.dna-opt.on{background:var(--red);border-color:#fff}
.dna-key{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1.5px solid rgba(255,255,255,.7);font:700 .8rem var(--body)}
.dna-back{margin-top:1rem;background:none;border:0;color:#d2d2d8;font:600 .85rem var(--body);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;padding:.5rem 0}
#dnaQuiz.swap .dna-q,#dnaQuiz.swap .dna-opts{animation:arrive .4s ease both}

/* ================= certificate modal ================= */
html.modal-open{overflow:hidden;scroll-snap-type:none}
.cert-overlay{position:fixed;inset:0;z-index:90;background:rgba(5,5,6,.88);display:grid;place-items:center;padding:12px;opacity:0;transition:opacity .25s}
.cert-overlay.go{opacity:1}
.cert{position:relative;width:min(100%,720px);max-height:calc(100svh - 24px);overflow:auto;background:#faf8f5;color:#1e1e22;border-radius:6px;outline:none;box-shadow:0 30px 80px rgba(0,0,0,.6);padding:10px}
.cert-x{position:absolute;top:10px;right:12px;z-index:2;width:40px;height:40px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;font:400 1.6rem/1 var(--body);cursor:pointer}
.cert-frame{border:4px solid var(--red);outline:1px solid #cfc9c0;outline-offset:-10px;padding:clamp(24px,5vw,40px) clamp(18px,5vw,36px) 20px;text-align:center}
.cert-kicker{padding:0 44px;font:700 .74rem var(--body);letter-spacing:.24em;text-transform:uppercase;color:var(--red)}
.helix{display:block;width:min(260px,70%);height:auto;margin:.6rem auto .4rem;overflow:visible}
.helix .strand{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100}
.helix .s1{stroke:var(--red)}.helix .s2{stroke:#2a2a2f}
.helix .rung{stroke:#c9c3ba;stroke-width:1.4;opacity:0}
.cert-overlay.go .helix .strand{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s ease}
.cert-overlay.go .helix .rung{opacity:1;transition:opacity .8s ease .9s}
.cert-title{font:800 clamp(1.5rem,5vw,2.1rem)/1.1 var(--head);text-transform:uppercase;letter-spacing:.04em;color:#1e1e22;margin-top:.2rem}
.cert-awarded{margin-top:.9rem;font:italic 500 .95rem var(--body);color:#6b6b72}
.cert-name{font:800 clamp(1.6rem,6vw,2.4rem)/1.1 var(--body);color:var(--red);letter-spacing:-.01em;word-break:break-word}
.cert-type{margin-top:.9rem;padding-top:.9rem;border-top:3px solid var(--red);display:inline-block;font:800 clamp(2rem,8vw,3.3rem)/1 var(--head);text-transform:uppercase;letter-spacing:.02em}
.cert-tag{margin-top:.4rem;font:italic 500 1.05rem var(--body);color:#55555c}
.cert-bars{display:grid;gap:7px;max-width:460px;margin:1.3rem auto 0;text-align:left}
.cert-bar{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center;font:600 .86rem var(--body)}
.cert-bar .track{height:12px;background:#e4e0d9;border-radius:6px;overflow:hidden}
.cert-bar i{display:block;height:100%;width:0;background:#44444a;border-radius:6px}
.cert-bar.top i{background:var(--red)}
.cert-overlay.go .cert-bar i{width:var(--w);transition:width 1s cubic-bezier(.2,.7,.2,1)}
.cert-desc{margin:1.3rem auto 0;max-width:560px;text-align:left;font:400 1rem/1.62 var(--body)}
.cert-flavour{margin:.7rem auto 0;max-width:560px;text-align:left;font:italic 500 .98rem/1.55 var(--body);color:var(--red)}
.cert-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:1.3rem auto 0;max-width:600px;text-align:left}
.cert h3{font:800 .78rem var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:.4rem}
.cert-list{list-style:none;padding:0;display:grid;gap:5px}
.cert-list li{position:relative;padding-left:16px;font-size:.92rem;line-height:1.45}
.cert-list li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;background:var(--red);border-radius:50%}
.cert-block{margin:1.3rem auto 0;max-width:600px;text-align:left}
.cert-block p{font-size:.95rem;line-height:1.55}
.cert-sub{font:italic 500 .9rem var(--body);color:#6b6b72;margin:.2rem 0 .5rem}
.cert-match{margin:1.1rem auto 0;max-width:600px;padding:.8rem 1rem;background:#f1ebe3;border-left:4px solid var(--red);text-align:left;display:grid;gap:8px}
.cert-match p{font-size:.93rem;line-height:1.45}
.cert-foot{margin-top:1.4rem;font:600 .82rem var(--body);color:#6b6b72}
.cert-disc{margin:.4rem auto 0;max-width:520px;font:italic 400 .76rem/1.5 var(--body);color:#7a7a82}
.cert-actions{position:sticky;bottom:-10px;z-index:1;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:12px 8px 8px;margin-top:6px;background:#faf8f5;border-top:1px solid #e2ddd5}
.cert-btn{padding:.7rem 1.1rem;border:2px solid var(--red);background:#fff;color:var(--red);font:700 .76rem var(--body);letter-spacing:.12em;text-transform:uppercase;border-radius:3px;cursor:pointer}
.cert-btn.pri{background:var(--red);color:#fff}
.cert-btn.ghost{border-color:#9a9aa2;color:#55555c}
.cert-btn:disabled{opacity:.6;cursor:default}
.cert-btn:focus-visible,.cert-x:focus-visible{outline:3px solid #1e1e22;outline-offset:2px}
.cert-msg{min-height:1.3em;text-align:center;font:500 .85rem var(--body);color:#55555c;padding-bottom:6px}
@media (max-width:560px){
  .cert-cols{grid-template-columns:1fr}
  .cert-bar{grid-template-columns:84px 1fr}
  .cert-btn{flex:1 1 44%}
}
@media (prefers-reduced-motion:reduce){
  .cert-overlay{transition:none;opacity:1}
  .helix .strand{stroke-dashoffset:0;transition:none}.helix .rung{opacity:1;transition:none}
  .cert-bar i{width:var(--w);transition:none}
  #dnaQuiz.swap .dna-q,#dnaQuiz.swap .dna-opts{animation:none}
  .dna-bar i{transition:none}
}