/* 7.79.0 — Quiz 2, the tap quiz. Everything is scoped under #kx2, so nothing here can reach Quiz 1, the site header or the theme. Light first (blue and white), dark on the toggle (#0B0B0C and volt). */ #kx2{--page:#F6F7F9;--hero:#2563EB;--heroInk:#FFFFFF;--track:rgba(255,255,255,.28);--fill:#FFFFFF;--sheet:#FFFFFF;--ink:#0B0B0C;--muted:#4B5563;--line:#E5E7EB;--tile:#FFFFFF;--tileInk:#0B0B0C;--sel:#2563EB;--selInk:#FFFFFF;--btn:#0B0B0C;--btnInk:#FFFFFF;--note:#EFF6FF;--noteInk:#1D4ED8;--input:#F9FAFB;--good:#ECFDF5;--goodInk:#065F46;--warn:#FFF7ED;--warnInk:#9A3412;--shape:rgba(255,255,255,.09);--ghost:rgba(255,255,255,.16);--logo:#FFFFFF;--logoK:#2563EB;--cardL:#2563EB;--cardLInk:#FFFFFF;--cardR:#EFF6FF;--err:#B91C1C;--errBg:#FEF2F2;--shadow:0 1px 2px rgba(11,11,12,.06);--deep:0 12px 32px rgba(11,11,12,.14);--focus:#1D4ED8;--ring:rgba(255,255,255,.9);--doneC:#16A34A} #kx2[data-theme="dark"]{--page:#0B0B0C;--hero:#141416;--heroInk:#F5F5F0;--track:rgba(255,255,255,.12);--fill:#D4FF00;--sheet:#17171A;--ink:#F5F5F0;--muted:#A8A8A0;--line:#2A2A2F;--tile:#1F1F23;--tileInk:#F5F5F0;--sel:#D4FF00;--selInk:#0B0B0C;--btn:#D4FF00;--btnInk:#0B0B0C;--note:rgba(212,255,0,.08);--noteInk:#D4FF00;--input:#1F1F23;--good:rgba(74,222,128,.12);--goodInk:#86EFAC;--warn:rgba(251,146,60,.12);--warnInk:#FDBA74;--shape:rgba(212,255,0,.05);--ghost:rgba(255,255,255,.08);--logo:#D4FF00;--logoK:#0B0B0C;--cardL:#D4FF00;--cardLInk:#0B0B0C;--cardR:#1F1F23;--err:#FCA5A5;--errBg:rgba(248,113,113,.12);--shadow:0 1px 2px rgba(0,0,0,.4);--deep:0 12px 32px rgba(0,0,0,.5);--focus:#D4FF00;--ring:rgba(255,255,255,.1);--doneC:#22C55E} #kx2{box-sizing:border-box;min-height:100vh;min-height:100svh;background:var(--sheet);color:var(--ink);font-family:'DM Sans',system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased;text-align:left} #kx2 *,#kx2 *::before,#kx2 *::after{box-sizing:border-box} #kx2 button,#kx2 input{font-family:inherit;font-size:inherit;margin:0} /* Themes often set button{white-space:nowrap; text-transform; letter-spacing}: that is what pushed "Some, but it's hard to find" over its border. */ #kx2 button{white-space:normal;text-transform:none;letter-spacing:normal;line-height:1.3;height:auto} #kx2 .kx2-tile .lb{flex:1 1 auto;min-width:0} #kx2 .kx2-tile .lb>span{min-width:0;overflow-wrap:anywhere} #kx2 .kx2-tile.ctr .lb{flex:0 1 auto;justify-content:center;text-align:center} /* 7.79.4 — focus mode: while Quiz 2 is on the page, the site's own header, menu and footer step aside (Kudexa Site's .kxs-head and .kxs-footer). */ html.kx2-focus .kxs-head,html.kx2-focus .kxs-footer{display:none!important} body:has(#kx2) .kxs-head,body:has(#kx2) .kxs-footer{display:none!important} /* the "all done" tick, and the top-bar progress */ #kx2 .kx2-done{display:none} #kx2 .kx2-tprog{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0} #kx2 .kx2-tlab{font-size:14px;font-weight:700;color:var(--muted);display:flex;align-items:center;gap:8px;white-space:nowrap} #kx2 .kx2-tbar{display:flex;gap:6px} #kx2 .kx2-tbar span{width:44px;height:8px;border-radius:999px;background:var(--line);transition:background .3s ease} #kx2 .kx2-tbar span.on,#kx2 .kx2-tbar span.now{background:var(--sel)} #kx2 .kx2-tprog.done .kx2-tbar span{background:var(--doneC)} #kx2 .kx2-tprog.done .kx2-tlab{color:var(--doneC)} #kx2 .kx2-tlab i,#kx2 .kx2-done i{width:22px;height:22px;border-radius:50%;background:var(--doneC);color:#FFFFFF;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0} #kx2 button{cursor:pointer;-webkit-tap-highlight-color:transparent} #kx2 h1,#kx2 h2,#kx2 p{margin:0;padding:0;border:0;background:none;text-transform:none;letter-spacing:normal} #kx2 .kx2-j{font-family:'Plus Jakarta Sans','DM Sans',system-ui,sans-serif} #kx2 :focus-visible{outline:3px solid var(--focus);outline-offset:2px} #kx2 [hidden]{display:none!important} /* the page fills the screen: the white sheet runs to the bottom */ #kx2{display:flex;flex-direction:column} #kx2 .kx2-grid{flex-grow:1;display:flex;flex-direction:column} #kx2 .kx2-sheet{flex-grow:1} /* signed in, WordPress's admin bar sits over the top of the page */ body.admin-bar #kx2{padding-top:46px} @media (min-width:783px){body.admin-bar #kx2{padding-top:32px}} /* ── top bar (computer, when the site has no header of its own) ── */ #kx2 .kx2-top{display:none} /* ── the coloured panel with the meter ── */ #kx2 .kx2-hero{position:relative;overflow:hidden;background:var(--hero);color:var(--heroInk);padding:14px 20px 48px;transition:background .4s ease} #kx2 .kx2-hero::before,#kx2 .kx2-hero::after{content:"";position:absolute;border-radius:50%;pointer-events:none} #kx2 .kx2-hero::before{width:260px;height:260px;background:var(--shape);top:-110px;right:-90px} #kx2 .kx2-hero::after{width:200px;height:200px;border:2px solid var(--shape);top:120px;left:-90px} #kx2 .kx2-hero>*{position:relative;z-index:1} #kx2 .kx2-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px} #kx2 .kx2-bar-l{display:flex;align-items:center;min-width:0} #kx2 .kx2-ic{width:44px;height:44px;border-radius:14px;border:0;background:var(--ghost);color:var(--heroInk);display:flex;align-items:center;justify-content:center;padding:0;flex-shrink:0} #kx2 .kx2-ic svg{display:block} #kx2 .kx2-logo{display:flex;align-items:center;gap:9px;color:inherit;text-decoration:none} #kx2 .kx2-logo i{width:32px;height:32px;border-radius:8px;background:var(--logo);color:var(--logoK);display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:800;font-size:16px;font-family:'Plus Jakarta Sans',sans-serif} #kx2 .kx2-logo b{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:15px;line-height:1.1} #kx2 .kx2-logo small{display:block;font-size:9.5px;letter-spacing:.12em;font-weight:700;opacity:.8;line-height:1.2} #kx2 .kx2-mwrap{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:22px} #kx2 .kx2-meter{position:relative;width:236px;max-width:70vw} #kx2 .kx2-meter svg{display:block;width:100%;height:auto;overflow:visible} #kx2 .kx2-meter .trk{stroke:var(--track)} #kx2 .kx2-meter .val{stroke:var(--fill);transition:stroke-dasharray .9s ease} #kx2 .kx2-meter.sweep .val{animation:kx2Sweep 3.4s ease-in-out infinite} #kx2 .kx2-meter.count .val{transition:none} @keyframes kx2Sweep{0%{stroke-dasharray:2 100}50%{stroke-dasharray:48 100}100%{stroke-dasharray:2 100}} #kx2 .kx2-mnum{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;color:var(--heroInk)} #kx2 .kx2-mnum b{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:46px;line-height:1;font-variant-numeric:tabular-nums} #kx2 .kx2-mnum small{font-size:13px;font-weight:600;opacity:.85;margin-top:4px} #kx2 .kx2-lock{width:48px;height:48px;border-radius:14px;background:var(--fill);color:var(--hero);display:flex;align-items:center;justify-content:center} #kx2 .kx2-htxt{text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center} #kx2 .kx2-htxt h1{font-family:'Plus Jakarta Sans',sans-serif;font-size:29px;line-height:1.12;font-weight:800;letter-spacing:-.01em;color:var(--heroInk);max-width:340px} #kx2 .kx2-htxt p{font-size:15.5px;font-weight:600;opacity:.88} #kx2 .kx2-prog{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:700} #kx2 .kx2-dots{display:flex;gap:6px;align-items:center} #kx2 .kx2-dots span{height:8px;width:8px;border-radius:999px;background:var(--track);transition:width .3s ease,background .3s ease} #kx2 .kx2-dots span.on{background:var(--fill)} #kx2 .kx2-dots span.now{width:22px} #kx2 .kx2-hcard{display:none} #kx2 .kx2-hnote{display:none} #kx2 .kx2-bar-r{display:flex;align-items:center;gap:8px;min-width:0} #kx2 .kx2-chip{display:flex;align-items:center;gap:8px;background:var(--tile);border-radius:999px;padding:5px 12px 5px 5px;box-shadow:0 4px 14px rgba(11,27,58,.12);white-space:nowrap} #kx2 .kx2-chip i{width:24px;height:24px;border-radius:7px;flex-shrink:0;background:linear-gradient(90deg,var(--cardL) 50%,var(--cardR) 50%)} #kx2 .kx2-chip b{font-size:12.5px;font-weight:700;color:var(--tileInk)} #kx2 .kx2-chip.dk{display:none} #kx2 .kx2-mob{display:inline}#kx2 .kx2-desk{display:none} #kx2 .kx2-hwork{display:none} #kx2 .kx2-top-r{display:flex;align-items:center;gap:12px} /* ── the white sheet with the question ── */ #kx2 .kx2-sheet{position:relative;z-index:2;margin-top:-28px;background:var(--sheet);border-radius:28px 28px 0 0;padding:26px 20px 36px;display:flex;flex-direction:column;gap:16px;box-shadow:0 -6px 24px rgba(11,27,58,.08)} #kx2 .kx2-in{width:100%;max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:16px} #kx2 .kx2-q{font-family:'Plus Jakarta Sans',sans-serif;font-size:23px;line-height:1.22;font-weight:800;letter-spacing:-.01em;color:var(--ink)} #kx2 .kx2-q.sm{font-size:20px} #kx2 .kx2-small{font-size:13px;color:var(--muted);text-align:center} #kx2 .kx2-dh1,#kx2 .kx2-dsub,#kx2 .kx2-eyebrow,#kx2 .kx2-dback{display:none} #kx2 .kx2-tiles{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)} #kx2 .kx2-tiles.c2{grid-template-columns:repeat(2,minmax(0,1fr))} #kx2 .kx2-tile{min-height:58px;border-radius:16px;border:1.5px solid var(--line);background:var(--tile);color:var(--tileInk);font-size:16px;font-weight:600;padding:10px 16px;line-height:1.3;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;box-shadow:var(--shadow);transition:border-color .15s ease,background .15s ease,transform .1s ease;width:100%} @media (hover:hover){#kx2 .kx2-tile:hover{border-color:var(--sel)}} #kx2 .kx2-tile:active{transform:scale(.985)} #kx2 .kx2-tile.ctr{justify-content:center;text-align:center;min-height:54px;font-size:15.5px} #kx2 .kx2-tile.on{background:var(--sel);color:var(--selInk);border-color:var(--sel)} #kx2 .kx2-tile .lb{display:flex;align-items:center;gap:12px;min-width:0} #kx2 .kx2-tile .lb svg{flex-shrink:0;opacity:.8} #kx2 .kx2-tick{width:22px;height:22px;border-radius:50%;background:var(--selInk);color:var(--sel);display:flex;align-items:center;justify-content:center;flex-shrink:0} #kx2 .kx2-tile.ctr .kx2-tick{display:none} #kx2 .kx2-draft{background:var(--note);border-radius:18px;padding:14px 16px;display:flex;flex-direction:column;gap:6px} #kx2 .kx2-draft .t{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--noteInk)} #kx2 .kx2-draft .h{font-family:'Plus Jakarta Sans',sans-serif;font-size:16px;font-weight:800;line-height:1.35;color:var(--ink);overflow-wrap:anywhere} #kx2 .kx2-h1{font-family:'Plus Jakarta Sans',sans-serif;font-size:26px;line-height:1.15;font-weight:800;letter-spacing:-.01em;color:var(--ink)} #kx2 .kx2-sub{font-size:15px;color:var(--muted)} #kx2 .kx2-field{display:flex;flex-direction:column;gap:6px} #kx2 .kx2-field label{font-size:14px;font-weight:600;color:var(--ink)} #kx2 .kx2-field input{height:52px;width:100%;border:1.5px solid var(--line);border-radius:14px;padding:0 16px;font-size:16px;background:var(--input);color:var(--ink);box-shadow:none;outline:0} #kx2 .kx2-field input:focus{border-color:var(--sel)} #kx2 .kx2-field input::placeholder{color:#6B7280;opacity:1} #kx2 .kx2-fields{display:flex;flex-direction:column;gap:14px} #kx2 .kx2-btn{height:56px;width:100%;border:0;border-radius:16px;background:var(--btn);color:var(--btnInk);font-size:17px;font-weight:700;padding:0 26px;box-shadow:var(--deep);display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none} #kx2 .kx2-btn[disabled]{opacity:.7;cursor:wait} #kx2 .kx2-err{background:var(--errBg);color:var(--err);border-radius:12px;padding:10px 12px;font-size:14px} #kx2 .kx2-err a{color:inherit;text-decoration:underline} /* mini card — name appears on it as they type */ #kx2 .kx2-card{width:100%;max-width:350px;height:132px;border-radius:18px;overflow:hidden;display:flex;box-shadow:var(--deep);background:var(--sheet);align-self:center;flex-shrink:0} #kx2 .kx2-card .l{width:46%;background:var(--cardL);position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:0 6px} #kx2 .kx2-card .l::before{content:"";position:absolute;width:80px;height:80px;border-radius:50%;background:rgba(255,255,255,.25);top:-30px;left:-30px} #kx2 .kx2-card .av{position:relative;width:54px;height:54px;border-radius:50%;background:#F8FAFC;border:3px solid #FFFFFF;display:flex;align-items:center;justify-content:center;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:22px;color:#0B0B0C} #kx2 .kx2-card .nm{position:relative;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:15px;color:var(--cardLInk);text-align:center;line-height:1.1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #kx2 .kx2-card .r{width:54%;background:var(--cardR);padding:12px;display:flex;flex-direction:column;justify-content:center;gap:6px} #kx2 .kx2-card .ty{background:var(--sheet);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:2px} #kx2 .kx2-card .ty small{font-size:10.5px;font-weight:600;color:var(--muted)} #kx2 .kx2-card .ty b{font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;font-weight:800;color:var(--ink);line-height:1.15} #kx2 .kx2-card .pg{font-size:10.5px;font-weight:700;color:var(--ink)} /* working */ #kx2 .kx2-work{display:flex;flex-direction:column;gap:14px;font-size:16.5px;font-weight:600} #kx2 .kx2-work div{display:flex;align-items:center;gap:12px;transition:opacity .3s ease} #kx2 .kx2-work div.wait{opacity:.55} #kx2 .kx2-work i{width:24px;height:24px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--sel);color:var(--selInk)} #kx2 .kx2-work div.wait i{background:transparent;border:2.5px solid var(--line)} #kx2 .kx2-work div.wait i svg{display:none} /* result */ #kx2 .kx2-hello{text-align:center} #kx2 .kx2-hello small{display:block;font-size:14.5px;color:var(--muted)} #kx2 .kx2-hello .kx2-h1{margin-top:2px} #kx2 .kx2-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} #kx2 .kx2-two>div{border-radius:16px;padding:12px 14px;min-width:0} #kx2 .kx2-two small{display:block;font-size:12px;font-weight:600} #kx2 .kx2-two b{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:16px;font-weight:800;margin-top:2px;color:var(--ink)} #kx2 .kx2-two .g{background:var(--good)}#kx2 .kx2-two .g small{color:var(--goodInk)} #kx2 .kx2-two .w{background:var(--warn)}#kx2 .kx2-two .w small{color:var(--warnInk)} #kx2 .kx2-copy{border:1.5px solid var(--line);background:var(--sheet);color:var(--ink);border-radius:10px;height:36px;padding:0 12px;font-size:13px;font-weight:700;align-self:flex-start} #kx2 .kx2-anim{animation:kx2In .28s ease both} @keyframes kx2In{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion: reduce){#kx2 .kx2-meter .val,#kx2 .kx2-anim,#kx2 .kx2-dots span,#kx2 .kx2-tile{animation:none!important;transition:none!important}} /* ── computer: two panels side by side ── */ @media (min-width:960px){ #kx2{background:var(--page);padding:20px 24px 24px;gap:16px} body.admin-bar #kx2{padding-top:52px} #kx2 .kx2-top{display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 8px} #kx2 .kx2-top .kx2-logo i{width:38px;height:38px;border-radius:10px;background:var(--sel);color:var(--selInk);font-size:19px} #kx2 .kx2-top .kx2-logo b{font-size:18px} #kx2 .kx2-top .kx2-logo{color:var(--ink)} #kx2 .kx2-top{gap:24px} #kx2 .kx2-top>.kx2-logo{flex:1 1 0} #kx2 .kx2-top>.kx2-theme-top{margin-left:auto} #kx2 .kx2-top-end{flex:1 1 0;display:flex;justify-content:flex-end} #kx2 .kx2-bar{display:none} #kx2 .kx2-prog{display:none!important} #kx2 .kx2-done{display:inline-flex;align-items:center;gap:10px;background:var(--tile);color:var(--tileInk);border-radius:999px;padding:6px 16px 6px 6px;font-size:14px;font-weight:700;box-shadow:0 4px 14px rgba(11,27,58,.12)} #kx2 .kx2-done[hidden]{display:none!important} #kx2 .kx2-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:20px;min-height:calc(100vh - 140px);max-width:1480px;width:100%;margin:0 auto} #kx2.kx2-shell .kx2-grid{min-height:calc(100vh - 180px)} #kx2 .kx2-hero{border-radius:32px;padding:84px 28px 40px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px} #kx2 .kx2-hero::before{width:416px;height:416px;top:-176px;right:-144px} #kx2 .kx2-hero::after{width:320px;height:320px;top:192px;left:-144px;border-width:3px} #kx2 .kx2-bar{position:absolute;top:22px;left:24px;right:24px} #kx2 .kx2-logo-ph{display:none} #kx2 .kx2-bar .kx2-back{display:none} #kx2 .kx2-mwrap{margin-top:0;gap:34px} #kx2 .kx2-meter{width:380px;max-width:100%} #kx2 .kx2-mnum b{font-size:78px} #kx2 .kx2-mnum small{font-size:15px} #kx2 .kx2-lock{width:84px;height:84px;border-radius:24px} #kx2 .kx2-lock svg{width:38px;height:38px} #kx2 .kx2-htxt{display:none} #kx2 .kx2-chip.ph{display:none!important} #kx2 .kx2-chip.dk{display:flex} #kx2 .kx2-left{display:none!important} #kx2 .kx2-prog{gap:14px} #kx2 .kx2-mob{display:none}#kx2 .kx2-desk{display:inline} #kx2 .kx2-theme-top{width:40px;height:40px;border-radius:12px;background:var(--sheet);color:var(--ink)} #kx2:not(.kx2-shell) .kx2-theme-hero{display:none} #kx2:not(.kx2-shell) .kx2-hero{padding-top:40px} #kx2 .kx2-hcard{display:flex} #kx2 .kx2-hcard[hidden]{display:none!important} #kx2 .kx2-hnote{display:block;margin:0;font-size:17px;font-weight:600;color:var(--heroInk);opacity:.85;text-align:center} #kx2 .kx2-hnote[hidden]{display:none!important} #kx2 .kx2-hcard .kx2-card{max-width:420px;width:420px;height:176px;box-shadow:0 0 0 3px var(--ring),var(--deep)} #kx2 .kx2-hcard .kx2-card .av{width:74px;height:74px;font-size:30px} #kx2 .kx2-hcard .kx2-card .nm{font-size:18px} #kx2 .kx2-hcard .kx2-card .ty b{font-size:17px} #kx2 .kx2-sheet{margin-top:0;border-radius:32px;padding:48px 56px;justify-content:center;box-shadow:0 1px 2px rgba(11,27,58,.04)} #kx2 .kx2-in{max-width:680px;margin:0;gap:22px} #kx2 .kx2-sheet .kx2-card{display:none} #kx2 .kx2-dh1,#kx2 .kx2-dsub{display:block} #kx2 .kx2-eyebrow{display:inline-flex;align-self:flex-start;background:var(--note);color:var(--noteInk);font-size:14px;font-weight:700;padding:8px 14px;border-radius:999px} #kx2 .kx2-dh1{font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(40px,3.6vw,56px);line-height:1.04;font-weight:800;letter-spacing:-.02em;color:var(--ink)} #kx2 .kx2-dsub{font-size:19px;line-height:1.5;color:var(--muted);max-width:560px} #kx2 .kx2-dback{display:flex;align-items:center;gap:14px} #kx2 .kx2-dback button{height:44px;border-radius:14px;border:1.5px solid var(--line);background:var(--sheet);display:flex;align-items:center;gap:6px;padding:0 16px;font-size:14px;font-weight:700;color:var(--ink)} #kx2 .kx2-dback span{font-size:15px;font-weight:700;color:var(--muted)} #kx2 .kx2-q{font-size:clamp(30px,2.6vw,40px);line-height:1.12;letter-spacing:-.02em} #kx2 .kx2-q.sm{font-size:21px} #kx2 .kx2-tiles.c2,#kx2 .kx2-tiles.c3{grid-template-columns:repeat(3,minmax(0,1fr))} #kx2 .kx2-tiles.c4{grid-template-columns:repeat(2,minmax(0,1fr))} #kx2 .kx2-tile{min-height:72px;font-size:17px} #kx2 .kx2-tile.ctr{min-height:64px;font-size:16px;padding:10px 8px} #kx2 .kx2-draft{padding:16px 20px;border-radius:20px} #kx2 .kx2-draft .t{font-size:13px} #kx2 .kx2-draft .h{font-size:20px} #kx2 .kx2-h1{font-size:clamp(38px,3.4vw,52px);line-height:1.06;letter-spacing:-.02em} #kx2 .kx2-sub{font-size:19px;line-height:1.5} #kx2 .kx2-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} #kx2 .kx2-field input{height:58px} #kx2 .kx2-btn{height:62px;font-size:18px;width:auto;align-self:flex-start;min-width:280px} #kx2 .kx2-hello{text-align:left} #kx2 .kx2-hello small{font-size:18px} #kx2 .kx2-two b{font-size:21px} #kx2 .kx2-two>div{padding:16px 18px;border-radius:18px} #kx2 .kx2-small{text-align:left;font-size:14px} #kx2 .kx2-work{font-size:19px;gap:18px} } @media (min-width:1200px){#kx2 .kx2-tiles.c4{grid-template-columns:repeat(4,minmax(0,1fr))}} /* phones: the wait fills the coloured panel, as in the mockup */ @media (max-width:959px){ #kx2[data-screen="working"] .kx2-sheet{display:none} #kx2[data-screen="working"] .kx2-hero{flex-grow:1;display:flex;flex-direction:column} #kx2[data-screen="working"] .kx2-mwrap{flex-grow:1;justify-content:center;gap:26px;margin-top:0;padding-bottom:40px} #kx2[data-screen="working"] .kx2-hwork{display:flex;flex-direction:column;align-items:center;gap:22px} #kx2 .kx2-hwork h2{font-family:'Plus Jakarta Sans',sans-serif;font-size:28px;font-weight:800;line-height:1.15;color:var(--heroInk);text-align:center} #kx2 .kx2-hwork .kx2-work{color:var(--heroInk)} #kx2 .kx2-hwork .kx2-work i{background:var(--fill);color:var(--hero)} #kx2 .kx2-hwork .kx2-work div.wait i{background:transparent;border-color:var(--track)} #kx2[data-screen="working"] .kx2-meter,#kx2[data-screen="result"] .kx2-meter{width:256px} #kx2[data-screen="working"] .kx2-prog,#kx2[data-screen="gate"] .kx2-prog,#kx2[data-screen="result"] .kx2-prog{display:none} } /* short laptop screens: a smaller meter and card, so the panel never crowds */ @media (min-width:960px) and (max-height:820px){ #kx2 .kx2-meter{width:300px} #kx2 .kx2-mnum b{font-size:62px} #kx2 .kx2-mwrap{gap:22px} #kx2 .kx2-hcard .kx2-card{width:360px;max-width:360px;height:150px} #kx2 .kx2-hcard .kx2-card .av{width:60px;height:60px;font-size:24px} #kx2 .kx2-sheet{padding:36px 48px} } /* phones only: the tiles are the first thing on the sheet */ @media (max-width:959px){ #kx2 .kx2-top{display:none!important} #kx2 .kx2-tiles.c3,#kx2 .kx2-tiles.c4{grid-template-columns:repeat(2,minmax(0,1fr))} #kx2 .kx2-tiles.c3{grid-template-columns:minmax(0,1fr)} } @media (max-width:359px){ #kx2 .kx2-htxt h1{font-size:25px} #kx2 .kx2-q{font-size:21px} #kx2 .kx2-tile{font-size:15px} } /* ── 7.79.8 — the first screen, the same on every step ────────────────── The score (moving on step 1), "Get your personal brand score for FREE & Unlock", and the three things: Score & Report Card › LinkedIn Headline › Business OS. Progress sits in the sheet, above the question. Every option is centred. Six taps. */ #kx2{--glass:rgba(255,255,255,.14);--glassLine:rgba(255,255,255,.22)} #kx2[data-theme="dark"]{--glass:rgba(255,255,255,.05);--glassLine:rgba(255,255,255,.12)} #kx2 .kx2-mwrap{margin-top:8px;gap:16px} #kx2 .kx2-nrow{display:flex;align-items:baseline;gap:6px} #kx2 .kx2-of{font-style:normal;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:14px;opacity:.75} #kx2 .kx2-htxt h1{font-size:25px;line-height:1.15;max-width:none;letter-spacing:-.01em} /* what they unlock: small tiles (phones and narrow laptops) */ #kx2 .kx2-gifts{display:grid;grid-template-columns:minmax(0,1fr) 14px minmax(0,1fr) 14px minmax(0,1fr);gap:2px;align-items:stretch;width:100%;max-width:440px} #kx2 .kx2-gift{background:var(--glass);border:1px solid var(--glassLine);border-radius:14px;padding:9px 6px 8px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;min-width:0;color:var(--heroInk)} #kx2 .kx2-gift .pv,#kx2 .kx2-gift .lb{display:none} #kx2 .kx2-gift .ic{width:30px;height:30px;display:flex;align-items:center;justify-content:center;flex-shrink:0} #kx2 .kx2-gift .ic.md svg{width:38px;height:38px;margin:-4px} #kx2 .kx2-gift .ic.in{border-radius:8px;background:#FFFFFF;color:#2563EB;font:800 15px/1 Arial,Helvetica,sans-serif} #kx2 .kx2-gift .ic.os{border-radius:8px;background:#0B0B0C;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3px;padding:6px;box-shadow:0 0 0 1px var(--glassLine)} #kx2 .kx2-gift .ic.os i{display:block;align-self:stretch;width:auto;height:auto;min-height:7px;border-radius:2px;background:#2563EB} #kx2 .kx2-gift .ic.os i:nth-child(2){background:#16A34A}#kx2 .kx2-gift .ic.os i:nth-child(3){background:#D97706}#kx2 .kx2-gift .ic.os i:nth-child(4){background:#7C3AED} #kx2 .kx2-gift .t2{font-size:11.5px;font-weight:700;line-height:1.2;overflow-wrap:anywhere} #kx2 .kx2-garr{display:flex;align-items:center;justify-content:center;color:var(--heroInk);opacity:.75} #kx2 .kx2-garr .a{display:none} #kx2 .kx2-garr .c{font-style:normal;font-size:16px;font-weight:700} /* progress, above the question */ #kx2 .kx2-sprog{display:flex;flex-direction:column;gap:10px} #kx2 .kx2-sprog .kx2-spt{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13.5px} #kx2 .kx2-sprog .kx2-spt b{font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px} #kx2 .kx2-sprog .kx2-spt span{font-weight:600;color:var(--muted)} #kx2 .kx2-sprog .kx2-spt i{width:22px;height:22px;border-radius:50%;background:var(--doneC);color:#FFFFFF;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0} #kx2 .kx2-sprog .kx2-spbar{display:flex;gap:6px} #kx2 .kx2-sprog .kx2-spbar span{flex:1 1 0;height:8px;border-radius:999px;background:var(--line);transition:background .3s ease} #kx2 .kx2-sprog .kx2-spbar span.on{background:var(--sel)} #kx2 .kx2-sprog.done .kx2-spbar span{background:var(--doneC)} #kx2 .kx2-sprog.done .kx2-spt b{color:var(--doneC)} #kx2 .kx2-in{gap:18px} #kx2 .kx2-dback.off{visibility:hidden} #kx2 .kx2-q,#kx2 .kx2-htxt h1,#kx2 .kx2-h1{max-width:none} #kx2 .kx2-q{font-size:22px} @media (max-width:959px){ #kx2 .kx2-tiles.c3g{grid-template-columns:repeat(2,minmax(0,1fr))} #kx2[data-screen="working"] .kx2-htxt,#kx2[data-screen="working"] .kx2-gifts{display:none} } @media (max-width:359px){ #kx2 .kx2-htxt h1{font-size:22px} #kx2 .kx2-gift .t2{font-size:10.5px} } /* computer */ @media (min-width:960px){ #kx2 .kx2-grid{gap:0} #kx2 .kx2-hero{z-index:3;padding:40px 40px 44px;gap:0;box-shadow:12px 0 32px rgba(11,27,58,.10)} #kx2[data-theme="dark"] .kx2-hero{box-shadow:12px 0 32px rgba(0,0,0,.45)} #kx2 .kx2-mwrap{gap:30px;width:100%} #kx2 .kx2-meter{width:320px} #kx2 .kx2-mnum b{font-size:64px} #kx2 .kx2-of{font-size:19px} #kx2 .kx2-htxt{display:flex} #kx2 .kx2-htxt[hidden]{display:none!important} #kx2 .kx2-htxt h1{font-size:clamp(32px,2.8vw,40px);line-height:1.1;letter-spacing:-.02em} #kx2 .kx2-sheet{z-index:1;margin-left:-40px;border-radius:0 32px 32px 0;padding:72px 64px 48px 104px;justify-content:flex-start} #kx2 .kx2-in{gap:24px;max-width:680px} #kx2 .kx2-sprog .kx2-spt{font-size:15px} #kx2 .kx2-sprog + .kx2-dback{margin-top:12px} #kx2 .kx2-q{font-size:clamp(30px,2.6vw,40px)} #kx2 .kx2-tiles.c3g{grid-template-columns:repeat(3,minmax(0,1fr))} #kx2 .kx2-tile.ctr{min-height:72px} } /* big screens: each thing they unlock as a preview card */ @media (min-width:1200px){ #kx2 .kx2-gifts{grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr) 20px minmax(0,1fr);gap:4px;max-width:600px} #kx2 .kx2-gift{padding:12px;border-radius:18px;align-items:stretch;gap:10px;text-align:left} #kx2 .kx2-gift .pv{display:block} #kx2 .kx2-gift .lb{display:flex;align-items:flex-start;gap:8px} #kx2 .kx2-gift .ic,#kx2 .kx2-gift .ic.os,#kx2 .kx2-gift .t2{display:none} #kx2 .kx2-gift .n{width:22px;height:22px;border-radius:50%;background:var(--fill);color:var(--hero);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex-shrink:0} #kx2 .kx2-gift .tx{display:flex;flex-direction:column;gap:2px;min-width:0} #kx2 .kx2-gift .tx b{font-size:14px;font-weight:800;line-height:1.2} #kx2 .kx2-gift .tx small{font-size:12px;font-weight:500;line-height:1.3;opacity:.85} #kx2 .kx2-garr .a{display:block} #kx2 .kx2-garr .c{display:none} } /* short laptop screens: a smaller meter and less space, so nothing crowds */ @media (min-width:960px) and (max-height:820px){ #kx2 .kx2-meter{width:260px} #kx2 .kx2-mnum b{font-size:52px} #kx2 .kx2-mwrap{gap:20px} #kx2 .kx2-hero{padding:28px 40px 32px} #kx2 .kx2-sheet{padding:48px 56px 36px 96px} #kx2 .kx2-htxt h1{font-size:32px} } /* ── 7.80.0 — breathing space. Plus Jakarta Sans is already a tight face, so the headings lose the negative letter-spacing and get taller lines; the score, headline and the three cards sit further apart; the cards get more padding and a calmer label. Phone and computer alike. */ #kx2 .kx2-htxt h1{letter-spacing:0;line-height:1.2;word-spacing:.02em} #kx2 .kx2-q{letter-spacing:-.005em;line-height:1.25} #kx2 .kx2-h1{letter-spacing:-.005em} #kx2 .kx2-mnum small{margin-top:8px;letter-spacing:.01em} #kx2 .kx2-mwrap{gap:22px;margin-top:12px} #kx2 .kx2-gifts{margin-top:4px;gap:4px} #kx2 .kx2-gift{padding:12px 6px 11px;gap:8px} #kx2 .kx2-gift .t2{line-height:1.3;font-size:12px} #kx2 .kx2-hero{padding-bottom:56px} #kx2 .kx2-sheet{padding-top:30px} #kx2 .kx2-in{gap:20px} #kx2 .kx2-sprog + .kx2-dback + .kx2-q,#kx2 .kx2-sprog + .kx2-q{margin-top:4px} @media (max-width:359px){#kx2 .kx2-gift .t2{font-size:11px}} @media (min-width:960px){ #kx2 .kx2-mwrap{gap:44px;margin-top:0} #kx2 .kx2-htxt h1{line-height:1.16;font-size:clamp(32px,2.9vw,42px)} #kx2 .kx2-q{letter-spacing:-.01em;line-height:1.2} #kx2 .kx2-h1{letter-spacing:-.01em} #kx2 .kx2-mnum small{font-size:16px;margin-top:10px} #kx2 .kx2-hero{padding:48px 44px 52px} #kx2 .kx2-in{gap:28px} #kx2 .kx2-sheet{padding-top:72px} #kx2 .kx2-tile.ctr{font-size:16.5px} } /* short laptop screens keep their tighter fit */ @media (min-width:960px) and (max-height:820px){ #kx2 .kx2-mwrap{gap:26px} #kx2 .kx2-hero{padding:28px 40px 32px} #kx2 .kx2-sheet{padding-top:48px} #kx2 .kx2-gift{gap:12px} } /* short phones keep the tighter fit, so every option is still on screen */ @media (max-width:959px) and (max-height:780px){ #kx2 .kx2-mwrap{gap:14px;margin-top:4px} #kx2 .kx2-hero{padding-bottom:46px} #kx2 .kx2-gift{padding:9px 6px 8px;gap:6px} #kx2 .kx2-sheet{padding-top:24px} #kx2 .kx2-in{gap:16px} #kx2 .kx2-tile.ctr{min-height:48px} #kx2 .kx2-tiles{gap:8px} #kx2 .kx2-meter{width:200px} #kx2 .kx2-mnum b{font-size:40px} } /* 7.80.0 — a down arrow from the headline to what they unlock, and "+" between the three */ #kx2 .kx2-down{display:flex;align-items:center;justify-content:center;color:var(--heroInk);opacity:.7;margin:-10px 0 -9px} #kx2 .kx2-down svg{width:18px;height:18px} #kx2 .kx2-garr svg{width:14px;height:14px} @media (min-width:960px){ #kx2 .kx2-down{margin:-16px 0 -12px} #kx2 .kx2-down svg{width:24px;height:24px} } @media (min-width:1200px){#kx2 .kx2-garr svg{width:20px;height:20px}} @media (max-width:959px) and (max-height:780px){#kx2 .kx2-down{display:none}} /* 7.80.1 — the three cards are back to 7.79.9: the number beside the title, the same padding and sizes. Only the space around them changed in 7.80.0. */ @media (min-width:1200px){#kx2 .kx2-gift{padding:12px;gap:10px}} /* 7.80.2 — the score gauge as the phone tile's icon, on white like the other two */ #kx2 .kx2-gift .ic.gm{border-radius:8px;background:#FFFFFF} #kx2 .kx2-gift .ic.gm svg{display:block;width:30px;height:30px;margin:0} /* ── 7.81.0 — the result: the band, four parts with their own answers, the fastest gain. Every point on screen comes from one of their taps. */ #kx2 .kx2-of100{margin-top:6px} #kx2 .kx2-of100 b{color:var(--ink);font-weight:800} #kx2 .kx2-parts{display:flex;flex-direction:column;gap:14px;background:var(--input);border:1px solid var(--line);border-radius:18px;padding:16px 18px} #kx2 .kx2-part .t{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:14.5px} #kx2 .kx2-part .t b{font-weight:700;color:var(--ink)} #kx2 .kx2-part .t span{font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums} #kx2 .kx2-part .b{height:8px;border-radius:999px;background:var(--line);margin-top:7px;overflow:hidden} #kx2 .kx2-part .b i{display:block;height:100%;border-radius:999px;background:var(--sel)} #kx2 .kx2-part .b i.full{background:var(--doneC)} #kx2 .kx2-part .b i.low{background:#F59E0B} #kx2 .kx2-part small{display:block;margin-top:6px;font-size:13px;color:var(--muted);line-height:1.35} #kx2 .kx2-next{font-size:15.5px;color:var(--ink);background:var(--note);border-radius:14px;padding:12px 14px;line-height:1.4} #kx2 .kx2-next b{color:var(--noteInk);font-weight:800} #kx2 .kx2-beat{text-align:left} #kx2[data-screen="result"] .kx2-hello{text-align:left} @media (min-width:960px){ #kx2 .kx2-parts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px;padding:20px 24px} #kx2 .kx2-part .t{font-size:15.5px} #kx2 .kx2-next{font-size:17px;padding:14px 18px} #kx2[data-screen="result"] .kx2-in{gap:22px} #kx2[data-screen="result"] .kx2-sheet{padding-top:56px} } /* 7.82.2 — hero meter matches the dashboard score card: thinner arc, and the number sized to the meter's own width so it never touches the arc. */ #kx2 .kx2-meter{container-type:inline-size} #kx2 .kx2-meter .kx2-mnum b{font-size:17cqw;letter-spacing:-.02em} #kx2 .kx2-meter .kx2-of{font-size:6cqw} #kx2 .kx2-meter .kx2-mnum small{font-size:max(13px,4.6cqw);margin-top:6px} /* 7.82.7 — phone tiles: "Free" on the score and the headline, a key on Business OS. */ #kx2 .kx2-gift{position:relative} #kx2 .kx2-free{position:absolute;top:-8px;left:50%;transform:translateX(-50%);padding:2px 8px;border-radius:999px;background:var(--fill);color:var(--hero);font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:1.4;box-shadow:0 1px 3px rgba(11,27,58,.18);white-space:nowrap} @media (max-width:1199px){#kx2 .kx2-gift{padding-top:18px}} /* 7.82.9 — FREE shows on desktop too. */ @media (min-width:1200px){#kx2 .kx2-gift{padding-top:18px}} /* 7.83.0 — desktop tiles kept simple: no 1 2 3, no line under the name; the same centred labels as on phones ("Business OS / 🔑 Access"), under each preview. */ @media (min-width:1200px){ #kx2 .kx2-gift .lb{display:none} #kx2 .kx2-gift .t2{display:block;text-align:center;font-size:15px;font-weight:800;line-height:1.3;padding:0 4px} } /* 7.84.0 — the new email step (Switch: audit_gate2). Everything here applies only while #kx2 carries data-g2, which quiz2.js sets on the email step when the switch is on. */ #kx2 .kx2-g2{display:none} #kx2[data-g2] .kx2-g2{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%} #kx2[data-g2] .kx2-meter,#kx2[data-g2] .kx2-done,#kx2[data-g2] .kx2-hcard{display:none!important} #kx2[data-g2] .kx2-mwrap{margin-top:14px;gap:0} #kx2[data-g2] .kx2-hero{padding-bottom:58px} #kx2 .kx2-g2h{margin:0;align-self:stretch;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:25px;line-height:1.15;letter-spacing:-.01em;color:var(--heroInk);max-width:none} #kx2 .kx2-g2stage{position:relative;width:300px;max-width:100%;height:190px} #kx2 .kx2-g2back{position:absolute;left:24px;right:-14px;top:12px;height:170px;border-radius:18px;background:rgba(255,255,255,.2);transform:rotate(5deg)} #kx2 .kx2-g2card{position:absolute;inset:0;display:flex;border-radius:20px;overflow:hidden;border:5px solid #FFFFFF;background:#FFFFFF;transform:rotate(-4deg);box-shadow:0 22px 44px rgba(4,16,60,.42);color:#1E1B4B;font-family:'DM Sans',system-ui,sans-serif} #kx2 .kx2-g2card .g2l{position:relative;flex:0 0 44%;background:#4DA8F7;overflow:hidden;display:flex;flex-direction:column;align-items:center} #kx2 .kx2-g2card .g2l .s1{position:absolute;width:80px;height:80px;border-radius:50%;background:#5EEAD4;top:-30px;left:-26px} #kx2 .kx2-g2card .g2l .s2{position:absolute;width:200px;height:44px;background:#FACC15;transform:rotate(-26deg);top:24px;left:44px} #kx2 .kx2-g2card .g2l .s3{position:absolute;width:200px;height:30px;background:#F472B6;transform:rotate(-26deg);top:76px;left:-40px} #kx2 .kx2-g2card .g2md{position:absolute;top:8px;left:8px;width:36px;height:36px} #kx2 .kx2-g2card .g2mt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;color:#5A3300;font-family:'Plus Jakarta Sans',sans-serif} #kx2 .kx2-g2card .g2mt i{font-style:normal;font-size:3.6px;font-weight:800;letter-spacing:.14em;color:#8A5600} #kx2 .kx2-g2card .g2mt b{font-size:9px;font-weight:800} #kx2 .kx2-g2card .g2mt small{font-size:6px} #kx2 .kx2-g2card .g2av{position:relative;margin-top:26px;width:66px;height:66px;border-radius:50%;background:#F1F5F9;border:4px solid #FFFFFF;box-sizing:border-box;display:flex;align-items:center;justify-content:center;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:28px;color:#0B1B3A} #kx2 .kx2-g2card .g2nm{position:relative;margin-top:8px;padding:0 8px;max-width:100%;box-sizing:border-box;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:19px;line-height:1.15;color:#0B1B3A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #kx2 .kx2-g2card .g2ty{position:relative;margin-top:7px;width:86px;height:17px;border-radius:999px;background:#FFFFFF;filter:blur(2.5px)} #kx2 .kx2-g2card .g2r{flex:1;min-width:0;background:#E6E3FF;padding:14px 12px;display:flex;flex-direction:column;gap:8px} #kx2 .kx2-g2card .g2t{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:12.5px;line-height:1.25} #kx2 .kx2-g2card .g2box{background:#FFFFFF;border-radius:12px;padding:9px 10px} #kx2 .kx2-g2card .g2box small{display:block;font-size:8.5px;font-weight:700;color:#5B5B8A} #kx2 .kx2-g2card .g2sc{display:flex;align-items:baseline;gap:3px;margin-top:2px} #kx2 .kx2-g2card .g2sc b{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:30px;line-height:1;filter:blur(7px);user-select:none} #kx2 .kx2-g2card .g2sc span{font-size:10px;font-weight:700;color:#5B5B8A} #kx2 .kx2-g2card .g2bar{height:5px;border-radius:9px;background:#E5E7EB;margin-top:6px;overflow:hidden} #kx2 .kx2-g2card .g2bar i{display:block;height:5px;background:#4F46E5;filter:blur(3px)} #kx2 .kx2-g2card .g2ft{margin-top:auto;font-size:8.5px;font-weight:700} #kx2 .kx2-g2lock{position:absolute;right:-6px;bottom:-14px;width:46px;height:46px;border-radius:14px;background:#FFFFFF;color:#2563EB;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px rgba(11,27,58,.3)} #kx2 .kx2-g2q{margin:0} #kx2 .kx2-g2row{display:flex;gap:10px} #kx2 .kx2-g2row input{height:52px;min-width:0;border:1.5px solid var(--line);border-radius:14px;padding:0 14px;font-size:16px;background:var(--input);color:var(--ink);box-shadow:none;outline:0;box-sizing:border-box} #kx2 .kx2-g2row input:focus{border-color:var(--sel)} #kx2 .kx2-g2row input::placeholder{color:#6B7280;opacity:1} #kx2 .kx2-g2row #kx2-name{flex:0 0 36%;font-weight:700} #kx2 .kx2-g2row #kx2-email{flex:1 1 0} #kx2 .kx2-g2form{display:flex;flex-direction:column;gap:10px} #kx2 .kx2-g2form .kx2-btn{margin-top:0} #kx2 .kx2-g2small{margin:-6px 0 0;font-size:12.5px} #kx2 .kx2-g2tags{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:-4px} #kx2 .kx2-g2tags span{padding:3px 9px;border-radius:999px;background:var(--note,#DBEAFE);color:var(--sel);font-size:10.5px;font-weight:800;letter-spacing:.04em} #kx2 .kx2-g2tags span.k{background:var(--line);color:var(--ink)} @media (max-width:959px){#kx2[data-g2] .kx2-sheet{padding-top:22px}#kx2[data-g2] .kx2-in{gap:16px}} @media (max-width:349px){ #kx2 .kx2-g2row{flex-direction:column} #kx2 .kx2-g2row #kx2-name{flex:0 0 auto} #kx2 .kx2-g2row #kx2-email{flex:0 0 auto} #kx2 .kx2-g2stage{transform:scale(.9);margin:-8px 0} } @media (min-width:1200px){ #kx2[data-g2] .kx2-g2{gap:44px} #kx2 .kx2-g2h{font-size:36px;text-align:center} #kx2 .kx2-g2stage{transform:scale(1.35);margin:34px 0 50px} #kx2 .kx2-g2row input{height:58px} #kx2 .kx2-g2row #kx2-name{flex:0 0 32%} #kx2 .kx2-g2form{gap:14px} #kx2 .kx2-g2small{text-align:left;margin-top:-4px;font-size:14px} #kx2 .kx2-g2tags{justify-content:flex-start;margin-top:0} #kx2 .kx2-g2tags span{font-size:11.5px} } /* 7.84.1 — new email step: the three promised things, ticked as ready (replaces the tag row). */ #kx2 .kx2-g2ready{margin-top:-2px} #kx2 .kx2-g2ready .t{font-size:12.5px;font-weight:700;color:var(--muted);text-align:center;margin-bottom:12px} #kx2 .kx2-g2ready .row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} #kx2 .kx2-g2ready .it{position:relative;border:1px solid var(--line);border-radius:14px;background:var(--input);padding:14px 6px 9px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px} #kx2 .kx2-g2ready .it i{position:absolute;top:-9px;left:50%;transform:translateX(-50%);width:20px;height:20px;border-radius:50%;background:#16A34A;color:#FFFFFF;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 3px var(--sheet)} #kx2 .kx2-g2ready .it b{font-size:12px;font-weight:700;line-height:1.25;color:var(--ink)} #kx2 .kx2-g2ready .it small{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#16A34A} @media (min-width:1200px){ #kx2 .kx2-g2ready{margin-top:6px;max-width:560px} #kx2 .kx2-g2ready .t{text-align:left;font-size:14px} #kx2 .kx2-g2ready .it{padding:16px 8px 12px} #kx2 .kx2-g2ready .it b{font-size:14px} } /* 7.84.2 — the ready tiles carry the first screen's own icons: same tile, the tick where FREE was. */ #kx2 .kx2-g2ready .it{background:var(--note,#EFF6FF);border-color:transparent;padding:16px 6px 10px;gap:7px} #kx2 .kx2-g2ready .it small{display:none} #kx2 .kx2-g2ready .ic{width:30px;height:30px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:8px} #kx2 .kx2-g2ready .ic.gm{background:#FFFFFF} #kx2 .kx2-g2ready .ic.gm svg{display:block;width:30px;height:30px;margin:0} #kx2 .kx2-g2ready .ic.in{background:#FFFFFF;color:#2563EB;font:800 15px/1 Arial,Helvetica,sans-serif} #kx2 .kx2-g2ready .ic.os{background:#0B0B0C;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3px;padding:6px;box-sizing:border-box} #kx2 .kx2-g2ready .ic.os i{position:static;transform:none;display:block;align-self:stretch;width:auto;height:auto;min-height:7px;border-radius:2px;background:#2563EB;box-shadow:none} #kx2 .kx2-g2ready .ic.os i:nth-child(2){background:#16A34A}#kx2 .kx2-g2ready .ic.os i:nth-child(3){background:#D97706}#kx2 .kx2-g2ready .ic.os i:nth-child(4){background:#7C3AED} #kx2 .kx2-g2ready .t{margin-bottom:13px} @media (max-width:959px){#kx2[data-g2] .kx2-in{gap:13px}} @media (min-width:1200px){#kx2 .kx2-g2ready .it{padding:20px 8px 14px;gap:9px}} @media (max-width:1199px){ #kx2[data-g2] .kx2-g2{gap:14px} #kx2 .kx2-g2ready .t{margin-bottom:12px} #kx2 .kx2-g2ready .it{padding:14px 6px 9px;gap:6px} } /* 7.84.3 — "FREE" beside the tick on the first two tiles; on desktop the icons are sized to the wider tiles. */ #kx2 .kx2-g2ready .it i.f{width:auto;padding:0 8px 0 5px;gap:4px;border-radius:999px;font-style:normal} #kx2 .kx2-g2ready .it i.f u{text-decoration:none;font-size:9.5px;font-weight:800;letter-spacing:.07em;line-height:1} @media (min-width:1200px){ #kx2 .kx2-g2ready{max-width:none} #kx2 .kx2-g2ready .row{gap:12px} #kx2 .kx2-g2ready .it{padding:26px 10px 16px;gap:10px;border-radius:16px} #kx2 .kx2-g2ready .it i{top:-11px;width:24px;height:24px} #kx2 .kx2-g2ready .it i svg{width:13px;height:13px} #kx2 .kx2-g2ready .it i.f{width:auto;padding:0 10px 0 6px} #kx2 .kx2-g2ready .it i.f u{font-size:11px} #kx2 .kx2-g2ready .ic{width:44px;height:44px;border-radius:11px} #kx2 .kx2-g2ready .ic.gm svg{width:44px;height:44px} #kx2 .kx2-g2ready .ic.in{font-size:22px} #kx2 .kx2-g2ready .ic.os{padding:9px;gap:4px} #kx2 .kx2-g2ready .ic.os i{top:auto;width:auto;height:auto;border-radius:3px} #kx2 .kx2-g2ready .it b{font-size:15px} #kx2 .kx2-g2ready .t{font-size:15px;margin-bottom:18px} } /* 7.84.4 — email step: the real square card with two more behind it. */ #kx2 .kx2-g2stage{width:214px;height:214px;margin:6px 0 4px} #kx2 .kx2-g2back{display:none} #kx2 .kx2-g2bk{position:absolute;inset:0;border-radius:18px;overflow:hidden;border:4px solid #FFFFFF;box-sizing:border-box;background:#E6E3FF;box-shadow:0 12px 26px rgba(4,16,60,.28)} #kx2 .kx2-g2bk span{position:absolute;left:0;top:0;bottom:0;width:48%} #kx2 .kx2-g2bk.b1{transform:rotate(-11deg) translate(-44px,6px)}#kx2 .kx2-g2bk.b1 span{background:#F472B6} #kx2 .kx2-g2bk.b2{transform:rotate(10deg) translate(44px,8px)}#kx2 .kx2-g2bk.b2 span{background:#FB923C} #kx2 .kx2-g2card{border-width:4px;border-radius:18px;transform:rotate(-3deg);box-shadow:0 18px 38px rgba(4,16,60,.42)} #kx2 .kx2-g2card .g2l{flex:0 0 48%} #kx2 .kx2-g2card .g2l .s1{width:70px;height:70px;top:-28px;left:-24px} #kx2 .kx2-g2card .g2l .s2{width:170px;height:40px;top:18px;left:40px} #kx2 .kx2-g2card .g2l .s3{width:170px;height:26px;top:70px;left:-40px} #kx2 .kx2-g2card .g2avw{position:relative;margin-top:26px;width:62px;height:62px} #kx2 .kx2-g2card .g2av{margin-top:0;width:62px;height:62px;font-size:26px;border-width:3px} #kx2 .kx2-g2card .g2md{top:-8px;left:-12px;width:28px;height:28px} #kx2 .kx2-g2card .g2md svg{width:28px;height:28px} #kx2 .kx2-g2card .g2mt i{font-size:2.8px}#kx2 .kx2-g2card .g2mt b{font-size:7px}#kx2 .kx2-g2card .g2mt small{font-size:4.6px} #kx2 .kx2-g2card .g2st{position:absolute;right:-3px;bottom:-1px;width:18px;height:18px;border-radius:50%;background:#7C3AED;border:2px solid #FFFFFF;box-sizing:border-box;color:#FFFFFF;font-size:8px;line-height:14px;text-align:center} #kx2 .kx2-g2card .g2nm{font-size:15.5px;margin-top:8px} #kx2 .kx2-g2card .g2rl{position:relative;font-size:8px;font-weight:600;color:#0B1B3A;margin-top:2px} #kx2 .kx2-g2card .g2ty{width:74px;height:14px;margin-top:6px} #kx2 .kx2-g2card .g2r{padding:12px 9px 9px;gap:6px} #kx2 .kx2-g2card .g2t{font-size:10.5px;margin-bottom:2px} #kx2 .kx2-g2card .g2box{border-radius:9px;padding:6px 7px} #kx2 .kx2-g2card .g2box small{font-size:6.6px} #kx2 .kx2-g2card .g2sc b{font-size:21px;filter:blur(5px)} #kx2 .kx2-g2card .g2sc span{font-size:7.5px} #kx2 .kx2-g2card .g2bar{height:4px;margin-top:4px} #kx2 .kx2-g2card .g2ln{display:flex;flex-direction:column;gap:3.5px;margin-top:4px;filter:blur(1.6px)} #kx2 .kx2-g2card .g2ln i{display:block;height:4px;border-radius:3px;background:#3B3970} #kx2 .kx2-g2card .g2ln i:nth-child(2){width:86%}#kx2 .kx2-g2card .g2ln i:nth-child(3){width:58%} #kx2 .kx2-g2card .g2ft{font-size:6.6px;border-top:1px solid #CFCBF5;padding-top:5px} #kx2 .kx2-g2lock{right:-16px;bottom:-10px;width:42px;height:42px;border-radius:13px} @media (max-width:959px){#kx2[data-g2] .kx2-hero{padding-bottom:54px}#kx2[data-g2] .kx2-in{gap:14px}} @media (min-width:1200px){ #kx2 .kx2-g2stage{transform:scale(1.5);margin:60px 0 70px} } /* 7.84.4 — email step: the three things as ticked pills in the blue, under the headline. */ #kx2 .kx2-g2pills{align-self:stretch;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px} #kx2 .kx2-g2pills span{display:flex;align-items:center;gap:6px;padding:7px 8px;border-radius:12px;background:var(--glass,rgba(255,255,255,.14));border:1px solid var(--glassLine,rgba(255,255,255,.24));color:var(--heroInk)} #kx2 .kx2-g2pills i{width:16px;height:16px;border-radius:50%;background:#22C55E;color:#FFFFFF;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0} #kx2 .kx2-g2pills i svg{width:9px;height:9px} #kx2 .kx2-g2pills b{font-size:10.5px;font-weight:700;line-height:1.2} @media (max-width:1199px){#kx2[data-g2] .kx2-g2{gap:12px}#kx2 .kx2-g2stage{margin:10px 0 4px}} @media (max-width:380px){#kx2 .kx2-g2h{font-size:23px}#kx2 .kx2-g2stage{margin:4px 0 0}} @media (max-width:349px){#kx2 .kx2-g2h{font-size:20px}#kx2 .kx2-g2pills{gap:5px}#kx2 .kx2-g2pills span{padding:6px 5px;gap:4px}#kx2 .kx2-g2pills i{width:13px;height:13px}#kx2 .kx2-g2pills i svg{width:8px;height:8px}#kx2 .kx2-g2pills b{font-size:9.5px}} @media (min-width:1200px){ #kx2 .kx2-g2pills{gap:8px} #kx2 .kx2-g2pills span{padding:9px 10px;border-radius:14px;gap:8px} #kx2 .kx2-g2pills b{font-size:13px} #kx2 .kx2-g2pills i{width:20px;height:20px}#kx2 .kx2-g2pills i svg{width:11px;height:11px} #kx2[data-g2] .kx2-g2{gap:28px} } @media (min-width:1420px){ #kx2 .kx2-g2pills{align-self:center;display:flex;gap:10px;margin:0 -20px} #kx2 .kx2-g2pills span{padding:9px 15px 9px 10px;border-radius:999px} #kx2 .kx2-g2pills b{font-size:13.5px;white-space:nowrap} #kx2 .kx2-g2pills b br{display:none} } @media (min-width:1200px) and (max-height:800px){#kx2 .kx2-g2stage{transform:scale(1.2);margin:24px 0 30px}#kx2[data-g2] .kx2-g2{gap:20px}} /* 7.84.4 — email step: on desktop the heading sits where 'Working out your score' sat. */ @media (min-width:960px){ #kx2 .kx2-g2prog,#kx2 .kx2-g2q{display:block} } /* 7.84.7 — email step on phones: name over email, each full width; the card a little smaller so the button stays on the first screen. Desktop keeps one row. */ @media (max-width:959px){ #kx2 .kx2-g2row{flex-direction:column} #kx2 .kx2-g2row #kx2-name,#kx2 .kx2-g2row #kx2-email{flex:0 0 auto;width:100%} #kx2 .kx2-g2stage{transform:scale(.69);margin:-25px 0 -34px} } @media (max-width:380px){#kx2 .kx2-g2stage{transform:scale(.64);margin:-36px 0 -42px}} /* tall phones have the room: the card stays full size there */ @media (max-width:959px) and (min-height:740px){#kx2 .kx2-g2stage{transform:none;margin:10px 0 4px}} /* 7.84.8 — the newsletter bonus line under the email step's button */ #kx2 .kx2-g2small{line-height:1.5} /* 7.84.9 — bonus line first: a touch larger and in the main ink; the small print stays muted under it */ #kx2 .kx2-g2small .kx2-g2bonus{display:block;font-size:1.08em;font-weight:500;color:var(--ink);margin-bottom:1px} #kx2 .kx2-g2small .kx2-g2bonus b{font-weight:800} /* 7.85.1 — email step laid out like the first screen: centred headline, arrow, their card, then the first screen's own three tiles. */ #kx2 .kx2-g2h{text-align:center} #kx2 .kx2-g2row #kx2-name::placeholder{font-weight:400} #kx2[data-g2] .kx2-g2 .kx2-down{display:flex!important;margin:-4px 0} #kx2[data-g2] .kx2-g2 .kx2-gifts{display:grid} @media (max-width:959px){ #kx2 .kx2-g2stage{transform:scale(.52);margin:-51px 0 -35px} #kx2 .kx2-g2small .kx2-g2bonus{font-size:1em} #kx2[data-g2] .kx2-g2{gap:8px} #kx2[data-g2] .kx2-hero{padding-bottom:44px} } @media (max-width:959px) and (min-height:740px){#kx2 .kx2-g2stage{transform:scale(.8);margin:-18px 0 -8px}#kx2[data-g2] .kx2-g2{gap:12px}} @media (min-width:960px){ #kx2 .kx2-g2stage{transform:scale(.92);margin:0 0 6px} #kx2[data-g2] .kx2-g2{gap:20px} } @media (max-width:380px){ #kx2[data-g2] .kx2-g2 .kx2-down{display:none!important} #kx2 .kx2-g2stage{transform:scale(.44);margin:-60px 0 -46px} #kx2[data-g2] .kx2-hero{padding-bottom:40px} #kx2[data-g2] .kx2-sheet{padding-bottom:22px} } @media (min-width:960px) and (max-height:800px){ #kx2 .kx2-g2stage{transform:scale(.6);margin:-43px 0 -37px} #kx2[data-g2] .kx2-g2{gap:14px} } /* 7.85.2 — the three tiles' labels stay on two lines on narrow phones (first screen and email step). */ #kx2 .kx2-gift .t2 br.kx2-bn{display:none} @media (max-width:380px){#kx2 .kx2-gift .t2 br.kx2-bn{display:inline}#kx2 .kx2-gift .t2 br.kx2-bw{display:none}} @media (max-width:340px){#kx2 .kx2-gift .t2{font-size:10px;letter-spacing:-.01em}#kx2 .kx2-gift{padding-left:4px;padding-right:4px}} /* 7.86.0 — the combined email step (Switch: audit_gate3). Everything here applies only while #kx2 carries data-g3, or to the kx2-g3* pieces that step draws. */ #kx2 .kx2-g3stage{position:relative;width:252px;height:148px;flex-shrink:0;font-family:'DM Sans',system-ui,sans-serif} #kx2 .kx2-g3stage .g3bk{position:absolute;inset:0;border-radius:16px;border:3px solid #FFFFFF;box-sizing:border-box} #kx2 .kx2-g3stage .g3bk.b1{background:#F472B6;transform:rotate(-11deg) translate(-6px,6px)} #kx2 .kx2-g3stage .g3bk.b2{background:#DDD6FE;transform:rotate(8deg) translate(12px,4px)} #kx2 .kx2-g3card{position:absolute;inset:0;display:flex;border-radius:16px;overflow:hidden;border:3px solid #FFFFFF;box-sizing:border-box;background:#FFFFFF;transform:rotate(-3deg);box-shadow:0 14px 28px rgba(15,23,42,.2);color:#0B0B0C} #kx2 .kx2-g3card .g3l{flex:0 0 44%;min-width:0;background:#3B82F6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:0 6px;box-sizing:border-box} #kx2 .kx2-g3card .g3av{width:50px;height:50px;border-radius:50%;background:#FFFFFF;border:3px solid #DBEAFE;box-sizing:border-box;display:flex;align-items:center;justify-content:center;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:22px;color:#0B0B0C} #kx2 .kx2-g3card .g3nm{max-width:100%;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:15px;line-height:1.1;color:#FFFFFF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #kx2 .kx2-g3card .g3ty{width:62px;height:9px;border-radius:999px;background:#FFFFFF;opacity:.55;filter:blur(2px)} #kx2 .kx2-g3card .g3r{flex:1;min-width:0;background:#F1EEFF;padding:12px 12px 10px;display:flex;flex-direction:column;gap:8px;box-sizing:border-box} #kx2 .kx2-g3card .g3t{font-size:11px;font-weight:700;line-height:1.25} #kx2 .kx2-g3card .g3box{background:#FFFFFF;border-radius:10px;padding:8px 9px} #kx2 .kx2-g3card .g3box small{display:block;font-size:8.5px;font-weight:700;line-height:1;color:#475569} #kx2 .kx2-g3card .g3sc{display:flex;align-items:baseline;gap:3px;margin-top:5px} #kx2 .kx2-g3card .g3sc b{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:24px;line-height:1;color:#4F46E5;filter:blur(7px);user-select:none} #kx2 .kx2-g3card .g3sc span{font-size:10px;font-weight:700;color:#475569} #kx2 .kx2-g3card .g3bar{height:4px;border-radius:999px;background:#A5B4FC;margin-top:6px} #kx2 .kx2-g3card .g3ft{margin-top:auto;font-size:8.5px;font-weight:700;line-height:1} #kx2 .kx2-g3lock{position:absolute;right:-12px;bottom:-12px;width:40px;height:40px;border-radius:12px;background:#FFFFFF;color:#2563EB;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(15,23,42,.22)} #kx2 .kx2-g3panel{height:196px;border-radius:20px;background:var(--note);overflow:hidden;display:flex;align-items:center;justify-content:center} #kx2 .kx2-g3ticks{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 8px} #kx2 .kx2-g3ticks span{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;line-height:1.2;color:var(--ink)} #kx2 .kx2-g3ticks svg{flex-shrink:0;color:var(--doneC,#16A34A)} #kx2 .kx2-g3form .kx2-btn{margin-top:14px} @media (max-width:959px){ /* phones: the card sits in the sheet, so the blue keeps only the logo bar */ #kx2[data-g3] .kx2-meter{display:none!important} #kx2[data-g3] .kx2-mwrap{margin-top:0;gap:0} #kx2[data-g3] .kx2-hero{padding-bottom:42px} #kx2[data-g3] .kx2-sheet{padding-top:22px;padding-bottom:24px} #kx2[data-g3] .kx2-in{gap:12px} #kx2[data-g3] .kx2-fields{gap:10px} #kx2[data-g3] .kx2-g3small{margin-top:-2px} /* the three ticks stay on one line */ #kx2 .kx2-g3ticks{flex-wrap:nowrap;gap:6px} #kx2 .kx2-g3ticks span{font-size:11.5px;gap:4px;white-space:nowrap;letter-spacing:-.01em} #kx2 .kx2-g3ticks svg{width:11px;height:11px} } @media (max-width:959px) and (max-height:760px){ #kx2 .kx2-g3panel{height:150px} #kx2 .kx2-g3panel .kx2-g3stage{transform:scale(.78)} } @media (max-width:359px){ #kx2 .kx2-g3panel .kx2-g3stage{transform:scale(.86)} #kx2 .kx2-g3ticks{gap:4px} #kx2 .kx2-g3ticks span{font-size:10.5px;gap:3px} } /* narrow phones: the ticks may wrap, centred, so the page never scrolls sideways */ @media (max-width:379px){#kx2 .kx2-g3ticks{flex-wrap:wrap;justify-content:center;gap:5px 12px}} @media (min-width:960px){ /* desktop: the card is in the blue, under the locked meter; the sheet keeps the form */ #kx2 .kx2-sheet .kx2-g3panel{display:none} #kx2 .kx2-hcard .kx2-g3stage{transform:scale(1.55);margin:44px 0 46px} #kx2 .kx2-g3ticks{justify-content:flex-start;gap:10px 26px} #kx2 .kx2-g3ticks span{font-size:15.5px;gap:8px} #kx2 .kx2-g3ticks svg{width:16px;height:16px} #kx2 .kx2-g3form .kx2-btn{margin-top:18px} } @media (min-width:960px) and (max-height:800px){ #kx2 .kx2-hcard .kx2-g3stage{transform:scale(1.25);margin:22px 0 24px} }