/* Klyp site experience, built 2026-10-29 by build_site.py from the brand landing and the creator motion page. */ :where(.aud-b) .kz{--display:"Archivo","Arial Narrow",system-ui,sans-serif;--body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;--r:12px;--line:#D7DAE1;--surface:#FFFFFF;--ink:#121418;--sub:#4F5561;--yel:#84C07C;font-size:15px;line-height:1.55} :where(.aud-b) .kz,:where(.aud-b) .kz *,:where(.aud-b) .kz *::before,:where(.aud-b) .kz *::after{box-sizing:border-box} :where(.aud-b) .kz p{margin:0;max-width:68ch} :where(.aud-b) .kz{--k-bg:#131313;--k-ink:#F5F4EF;--k-sub:#B4B4AE;--k-r1:#202020;--k-r2:#282825;--k-line:#3A3A37;--k-acc:var(--k-ink);--k-acc-ink:var(--k-bg); margin:0;border-radius:var(--r);overflow:hidden;background:var(--k-bg);color:var(--k-ink);font-family:"Instrument Sans",Arial,Helvetica,sans-serif;display:flex;flex-direction:column;min-width:0;border:1px solid var(--line)} :where(.aud-b) .kz.cream,:where(.aud-b) .creamv{--k-bg:#F1F0E9;--k-ink:#171717;--k-sub:#5C5B56;--k-r1:#FAF9F4;--k-r2:#E9E8E0;--k-line:#D3D2C9;--k-acc:var(--k-ink);--k-acc-ink:var(--k-bg)} .ksk.yel :where(.aud-b) .kz{--k-acc:var(--yel);--k-acc-ink:#131313} .ksk.yel :where(.aud-b) .kz.cream,.ksk.yel :where(.aud-b) .creamv{--k-acc:#171717;--k-acc-ink:var(--yel)} :where(.aud-b) .creamv{background:var(--k-bg);color:var(--k-ink)} :where(.aud-b) .kzs{position:relative;min-height:340px;overflow:hidden;display:flex;flex-direction:column;background:var(--k-bg)} :where(.aud-b) .kzc{position:relative;flex:1;width:100%;max-width:340px;margin-inline:auto;padding:20px 16px 16px;display:flex;flex-direction:column;gap:12px} :where(.aud-b) .kh{font-weight:900;font-size:24px;line-height:1.04;letter-spacing:-.02em;text-wrap:balance} :where(.aud-b) .kh.s{font-size:19px} :where(.aud-b) .kb{font-size:12px;color:var(--k-sub);line-height:1.4} :where(.aud-b) .lab2{font:9.5px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--k-sub)} :where(.aud-b) .kbar{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 12px;border-top:1px solid var(--line);background:var(--surface);color:var(--sub);font:11px/1.35 var(--mono)} :where(.aud-b) .kbar button{font:600 12px var(--body);color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:999px;padding:3px 11px;cursor:pointer;flex:none} :where(.aud-b) .kcard{background:var(--k-r1);border:1px solid var(--k-line);border-radius:12px;padding:10px 12px} :where(.aud-b) .kpill{display:inline-flex;align-items:center;border:1px solid var(--k-line);border-radius:999px;padding:5px 10px;font-size:11.5px;background:var(--k-r1);color:var(--k-ink);white-space:nowrap} :where(.aud-b) .kbtn{display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;border-radius:999px;padding:9px 16px;background:var(--k-ink);color:var(--k-bg);border:0;align-self:flex-start} :where(.aud-b) .kseg{display:flex;background:var(--k-r1);border:1px solid var(--k-line);border-radius:999px;padding:3px;position:relative;align-self:flex-start;max-width:100%} :where(.aud-b) .kseg button{position:relative;z-index:1;font:700 11px "Instrument Sans",Arial,Helvetica,sans-serif;color:var(--k-sub);background:transparent;border:0;border-radius:999px;padding:6px 9px;cursor:pointer;white-space:nowrap} :where(.aud-b) .kseg button[aria-pressed="true"]{color:var(--k-bg)} :where(.aud-b) .kseg .knob{position:absolute;top:3px;bottom:3px;left:0;width:0;border-radius:999px;background:var(--k-ink);transition:transform .2s cubic-bezier(.65,0,.35,1),width .2s cubic-bezier(.65,0,.35,1)} :where(.aud-b) .kz button:focus-visible{outline:2px solid #93A5FF;outline-offset:2px} :where(.aud-b) .od{display:inline-block;height:1em;overflow:hidden;vertical-align:top;line-height:1} :where(.aud-b) .odc{display:flex;flex-direction:column;transition:transform .5s cubic-bezier(.33,1,.68,1)} :where(.aud-b) .odc i{font-style:normal;height:1em;line-height:1;display:block;text-align:center} :where(.aud-b) .odx{display:inline-block;height:1em;line-height:1;vertical-align:top;white-space:pre} :where(.aud-b) .kbtn.acc{background:var(--k-acc);color:var(--k-acc-ink)} :where(.aud-b) .kmark{width:22px;height:22px;border-radius:7px;background:var(--k-acc);color:var(--k-acc-ink);display:grid;place-items:center;font:900 12px "Instrument Sans",Arial,Helvetica,sans-serif;flex:none} :where(.aud-b) .gl{animation:kgl .13s cubic-bezier(.33,1,.68,1) both} @keyframes kgl{from{color:var(--k-acc);opacity:.3}} :where(.aud-b) .kslot{position:relative;display:inline-block;height:1.25em;overflow:hidden;vertical-align:bottom} :where(.aud-b) .kslot>span{position:absolute;left:0;top:0;white-space:nowrap} :where(.aud-b) .kslot.r>span{left:auto;right:0} :where(.aud-b) .kz.v3 .kzs{min-height:440px} @media (max-width:520px){:where(.aud-b) .kz.v3 .kzs{min-height:420px} :where(.aud-b) .kz .h5cr small{font-size:8.5px;letter-spacing:-.1px}} :where(.aud-b) .v3 .kzc{max-width:380px;z-index:1} :where(.aud-b) .z3st{position:relative;flex:1;min-height:330px} :where(.aud-b) .z3abs{position:absolute;inset:0} :where(.aud-b) .z3w{display:inline-block;will-change:transform,opacity} :where(.aud-b) .z3wait>*{visibility:hidden} :where(.aud-b) .z3g{color:#6E6D69} :where(.aud-b) .cream .z3g{color:#B9B8B0} :where(.aud-b) .z3flood{position:absolute;left:0;top:0;border-radius:50%;pointer-events:none;z-index:0;background:#F1F0E9;visibility:hidden} :where(.aud-b) .z3flash{position:absolute;inset:0;pointer-events:none;z-index:3;background:var(--k-ink);visibility:hidden} :where(.aud-b) .z3ex{position:absolute;right:0;font-size:10px;padding:3px 8px} :where(.aud-b) .z3svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible} :where(.aud-b) .h3seg{position:relative;z-index:7} :where(.aud-b) .h3l{visibility:hidden} :where(.aud-b) .h3line{font-size:30px;line-height:1.05} :where(.aud-b) .h3win{position:absolute;left:0;top:0;width:100%;height:calc(100% - 44px);border-radius:16px;background:var(--k-r1);border:1px solid var(--k-line);overflow:hidden;display:flex;flex-direction:column} :where(.aud-b) .h3wh{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--k-line);font-size:12px;font-weight:700} :where(.aud-b) .h3wh .kpill{margin-left:auto;font-size:9.5px;padding:2px 7px} :where(.aud-b) .h3trk{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:6px 10px;border-bottom:1px solid var(--k-line)} :where(.aud-b) .h3trk i{position:relative;display:grid;place-items:center;height:20px;border-radius:999px;background:var(--k-r2);overflow:hidden;font:700 9.5px "Instrument Sans",Arial,Helvetica,sans-serif;font-style:normal;color:var(--k-sub)} :where(.aud-b) .h3trk u{position:absolute;inset:0;background:var(--k-acc);transform-origin:0 50%} :where(.aud-b) .h3trk span,:where(.aud-b) .h3trk em{grid-area:1/1;position:relative;white-space:nowrap;font-style:normal} :where(.aud-b) .h3trk em{color:var(--k-acc-ink);display:flex;align-items:center;gap:3px;visibility:hidden} :where(.aud-b) .h3trk em svg{width:9px;height:9px} :where(.aud-b) .h3th{position:relative;flex:1;overflow:hidden} :where(.aud-b) .h3ap{position:relative;display:inline-grid;font:700 10.5px "Instrument Sans",Arial,Helvetica,sans-serif;border-radius:999px;background:var(--k-acc);color:var(--k-acc-ink);padding:4px 9px} :where(.aud-b) .h3ap span{grid-area:1/1;white-space:nowrap} :where(.aud-b) .h3cap{position:absolute;left:0;right:0;top:0;height:30px;display:flex;align-items:center;gap:8px;font-weight:900;font-size:17px;visibility:hidden} :where(.aud-b) .h3ct{white-space:nowrap} :where(.aud-b) .h3fl{position:relative;display:inline-grid;perspective:400px} :where(.aud-b) .h3fl span{grid-area:1/1;justify-self:start;background:var(--k-acc);color:var(--k-acc-ink);border-radius:9px;padding:3px 9px;white-space:nowrap;backface-visibility:hidden;visibility:hidden} :where(.aud-b) .h3scene{position:absolute;left:50%;top:120px;width:150px;height:150px;margin:-75px 0 0 -75px;perspective:700px} :where(.aud-b) .h3cx,:where(.aud-b) .h3cube{position:absolute;inset:0;transform-style:preserve-3d} :where(.aud-b) .h3f{position:absolute;inset:0;border-radius:18px;background:var(--k-r1);border:1px solid var(--k-line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;backface-visibility:hidden} :where(.aud-b) .h3f b{font-size:16px} :where(.aud-b) .h3f small{font:10px var(--mono);color:var(--k-sub)} :where(.aud-b) .h3f svg{width:42px;height:42px} :where(.aud-b) .h3step{position:absolute;left:0;right:0;top:220px;height:24px;display:grid;justify-items:center} :where(.aud-b) .h3step span{grid-area:1/1;font-size:12.5px;color:var(--k-sub);visibility:hidden} :where(.aud-b) .h3disc{position:absolute;left:50%;top:120px;width:260px;height:260px;margin:-130px 0 0 -130px;overflow:visible;pointer-events:none} :where(.aud-b) .h3k{position:absolute;left:0;right:0;top:120px;margin-top:-28px;text-align:center;font:900 48px/56px "Instrument Sans",Arial,Helvetica,sans-serif;letter-spacing:-.03em;color:var(--k-acc-ink);pointer-events:none} :where(.aud-b) .h3k span{display:inline-block} :where(.aud-b) .h3under{position:absolute;left:0;right:0;top:150px} :where(.aud-b) .h3dot{display:inline-block;width:.24em;height:.24em;border-radius:50%;background:var(--k-acc);margin-left:.06em;vertical-align:baseline} :where(.aud-b) .h3mock{position:absolute;left:8px;right:8px;top:96px;border-radius:16px;background:#FAF9F4;color:#171717;border:1px solid #D3D2C9;padding:12px;display:flex;flex-direction:column;gap:10px;box-shadow:0 18px 40px rgba(0,0,0,.18);visibility:hidden} :where(.aud-b) .h3mh{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700} :where(.aud-b) .h3mh .kmark{background:#171717;color:#F1F0E9} :where(.aud-b) .h3st{display:flex;gap:4px} :where(.aud-b) .h3st i{flex:1;font:700 9px "Instrument Sans",Arial,Helvetica,sans-serif;font-style:normal;border-radius:999px;padding:4px 0;text-align:center;background:#E9E8E0;color:#5C5B56} :where(.aud-b) .h3st i.d{background:#171717;color:#F1F0E9} :where(.aud-b) .h3big{font-weight:900;font-size:20px;letter-spacing:-.01em} :where(.aud-b) .h3big span{display:block;margin-top:3px;font-size:13px;font-weight:700;letter-spacing:0;color:#5C5B56} :where(.aud-b) .h3dl{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px;height:26px} :where(.aud-b) .h3dl i{border-radius:5px;background:#E9E8E0;border:1px solid #D3D2C9} :where(.aud-b) .h3dl i.d{background:#171717;border-color:#171717} :where(.aud-b) .h3chip{position:absolute;z-index:4;font:700 10.5px "Instrument Sans",Arial,Helvetica,sans-serif;background:#171717;color:#F1F0E9;border-radius:999px;padding:5px 10px;white-space:nowrap;visibility:hidden} :where(.aud-b) .b3h{font-size:34px} :where(.aud-b) .b3src{min-width:0;min-height:0;border-radius:12px;background:#FAF9F4;border:1px solid #D3D2C9;padding:10px;display:flex;flex-direction:column;justify-content:space-between;gap:6px;font-size:10.5px;color:#171717;overflow:hidden} :where(.aud-b) .b3src:nth-child(5){grid-column:span 2} :where(.aud-b) .b3grid{position:absolute;left:0;right:0;top:90px;bottom:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:8px} :where(.aud-b) .b3src b{font-size:11px} :where(.aud-b) .b3src small{font-size:9.5px;color:#5C5B56;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} :where(.aud-b) .b3v{flex:1;min-height:0;display:flex;align-items:center;justify-content:center} :where(.aud-b) .b3v svg{width:100%;height:100%;max-height:60px} :where(.aud-b) .b3wa{flex-direction:column;align-items:stretch;gap:4px} :where(.aud-b) .b3wa span{align-self:flex-start;max-width:94%;font-size:9.5px;line-height:1.25;background:#E9E8E0;border-radius:8px 8px 8px 3px;padding:4px 6px} :where(.aud-b) .b3wa span.me{align-self:flex-end;background:#171717;color:#F1F0E9;border-radius:8px 8px 3px 8px} :where(.aud-b) .b3ln{gap:12px} :where(.aud-b) .b3ln svg{flex:1;min-width:0;max-height:44px} :where(.aud-b) .b3url{flex:none;font:700 10px var(--mono);border:1px solid #D3D2C9;border-radius:999px;padding:4px 8px;background:#fff} :where(.aud-b) .b3comp{position:absolute;left:0;top:0;width:100%;height:78px;border-radius:16px;background:#FAF9F4;border:1.5px solid #171717;box-shadow:0 10px 24px rgba(0,0,0,.08);overflow:hidden;z-index:2} :where(.aud-b) .b3txt{position:absolute;left:12px;right:12px;top:10px;font-size:13px;font-weight:700;color:#171717;white-space:nowrap;overflow:hidden} :where(.aud-b) .b3car{display:inline-block;width:2px;height:1em;background:#171717;vertical-align:-2px;margin-left:1px;animation:kblink 1s steps(1) infinite} :where(.aud-b) .b3chips{position:absolute;left:12px;bottom:9px;display:flex;gap:4px} :where(.aud-b) .b3chips i{font:700 9px "Instrument Sans",Arial,Helvetica,sans-serif;font-style:normal;background:#E9E8E0;color:#171717;border-radius:999px;padding:3px 7px;visibility:hidden} :where(.aud-b) .b3go{position:absolute;inset:0;display:grid;place-items:center;font:900 19px "Instrument Sans",Arial,Helvetica,sans-serif;color:#F1F0E9;visibility:hidden} :where(.aud-b) .b3sell{position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;pointer-events:none} :where(.aud-b) .b3tile{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:22px;padding:14px 16px;border-radius:16px;background:#FAF9F4;border:1px solid #D3D2C9;color:#171717;box-shadow:0 16px 34px rgba(0,0,0,.10);visibility:hidden} :where(.aud-b) .b3tile svg{flex:none;width:96px;height:120px} :where(.aud-b) .b3tt{display:flex;flex-direction:column;align-items:flex-start;gap:4px} :where(.aud-b) .b3tile b{font-size:18px} :where(.aud-b) .b3tile small{font-size:12px;color:#5C5B56} :where(.aud-b) .b3buy{display:inline-block;margin-top:6px;font:700 12px "Instrument Sans",Arial,Helvetica,sans-serif;background:#171717;color:#F1F0E9;border-radius:999px;padding:7px 22px} :where(.aud-b) .b3note{display:flex;align-items:center;gap:8px;background:#171717;color:#F1F0E9;border-radius:14px;padding:10px 12px;font-size:12px;visibility:hidden} :where(.aud-b) .b3note .kmark{background:#F1F0E9;color:#171717} :where(.aud-b) .b3ctr{display:flex;flex-direction:column;align-items:flex-end;gap:6px;visibility:hidden} :where(.aud-b) .b3cn{align-self:stretch;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} :where(.aud-b) .b3ctr .z3ex{position:static} :where(.aud-b) .b3cn>div{border-radius:12px;background:#FAF9F4;border:1px solid #D3D2C9;padding:8px 12px;color:#171717} :where(.aud-b) .b3ctr small{display:block;font-size:10px;color:#5C5B56} :where(.aud-b) .b3ctr b{font-size:17px;font-variant-numeric:tabular-nums} :where(.aud-b) .b3coins{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:5} :where(.aud-b) .p3top{position:relative;display:flex;align-items:center;gap:8px} :where(.aud-b) .p3top .z3ex{position:static;margin-left:auto} :where(.aud-b) .p3hd{display:flex;justify-content:space-between;font:10px var(--mono);color:var(--k-sub);padding:0 8px} :where(.aud-b) .p3hd span{display:grid} :where(.aud-b) .p3hd span i{grid-area:1/1;font-style:normal;text-align:right} :where(.aud-b) .p3list{position:relative;height:240px} :where(.aud-b) .p3r{position:absolute;left:0;right:0;height:44px;border-radius:12px;background:var(--k-r1);border:1px solid var(--k-line);display:flex;align-items:center;gap:8px;padding:0 8px} :where(.aud-b) .p3r .fill{position:absolute;inset:0;border-radius:11px;background:var(--k-acc);transform-origin:0 50%;transform:scaleX(0)} :where(.aud-b) .p3r .p3av{width:36px;height:36px} :where(.aud-b) .p3n{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;gap:1px} :where(.aud-b) .p3n b{font-size:12px} :where(.aud-b) .p3sub{display:grid;font-size:10px;color:var(--k-sub)} :where(.aud-b) .p3sub span{grid-area:1/1} :where(.aud-b) .p3m{position:relative;display:grid;perspective:300px;text-align:right} :where(.aud-b) .p3m>div{grid-area:1/1;display:flex;align-items:center;justify-content:flex-end;gap:8px;backface-visibility:hidden} :where(.aud-b) .p3fa{font-size:13px;font-weight:700} :where(.aud-b) .p3fb{visibility:hidden} :where(.aud-b) .p3fb span{display:flex;flex-direction:column;align-items:flex-end;font-size:12px;font-weight:700;min-width:34px} :where(.aud-b) .p3fb small{font:9px var(--mono);color:var(--k-sub);font-weight:400} :where(.aud-b) .p3bar{width:30px;height:4px;border-radius:2px;background:var(--k-line);overflow:hidden;margin-top:2px} :where(.aud-b) .p3bar i{display:block;height:100%;background:var(--k-acc);transform-origin:0 50%;transform:scaleX(0)} :where(.aud-b) .p3r.on{color:var(--k-acc-ink)} :where(.aud-b) .p3r.on .p3bar{background:rgba(23,23,23,.14)} :where(.aud-b) .p3r.on .p3bar i{background:var(--k-acc-ink)} :where(.aud-b) .p3r.on .p3sub,:where(.aud-b) .p3r.on .p3fb small{color:color-mix(in srgb,var(--k-acc-ink) 75%,transparent)} :where(.aud-b) .p3scan{position:absolute;left:-4px;right:-4px;top:0;height:2px;background:var(--k-acc);box-shadow:0 0 12px var(--k-acc);visibility:hidden} :where(.aud-b) .p3rt{position:absolute;left:-3px;right:-3px;top:-3px;height:50px;border:2px solid var(--k-acc);border-radius:14px;pointer-events:none;visibility:hidden} :where(.aud-b) .q3lines{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;gap:2px} :where(.aud-b) .q3lines div{font-weight:900;font-size:19px;line-height:1.12;letter-spacing:-.01em} :where(.aud-b) .q3one{position:absolute;left:0;right:0;top:0;font-weight:900;font-size:40px;line-height:1;letter-spacing:-.02em;visibility:hidden} :where(.aud-b) .q3svg{position:absolute;left:0;top:80px;width:100%;height:calc(100% - 80px);overflow:visible} :where(.aud-b) .q3blob{position:absolute;left:0;top:0;background:#F1F0E9;pointer-events:none;visibility:hidden;z-index:1} :where(.aud-b) .q3end{position:absolute;left:0;right:0;top:52px;bottom:0;display:flex;flex-direction:column;gap:12px} :where(.aud-b) .q3camp{position:relative;border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:8px;visibility:hidden;z-index:2} :where(.aud-b) .q3camp .h{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px} :where(.aud-b) .q3camp .z3ex{position:static;margin-left:auto} :where(.aud-b) .q3camp .kmark{background:#171717;color:#F1F0E9} :where(.aud-b) .q3camp small{font-size:11.5px;color:var(--k-sub)} :where(.aud-b) .q3prog{height:6px;border-radius:3px;background:rgba(23,23,23,.15);overflow:hidden} :where(.aud-b) .q3prog i{display:block;height:100%;width:58%;background:#171717;transform-origin:0 50%} :where(.aud-b) .q3cols{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px} :where(.aud-b) .q3col{visibility:hidden;min-width:0;border-radius:12px;background:var(--k-r1);border:1px solid var(--k-line);padding:8px 7px;display:flex;flex-direction:column;gap:5px;overflow:hidden} :where(.aud-b) .q3col b{font:10px var(--mono);color:var(--k-sub);font-weight:400} :where(.aud-b) .q3col i{display:flex;flex-direction:column;gap:1px;border-radius:8px;background:var(--k-r2);border:1px solid var(--k-line);padding:5px 7px;font-style:normal} :where(.aud-b) .q3col i span{font:600 10px "Instrument Sans",Arial,Helvetica,sans-serif;color:var(--k-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} :where(.aud-b) .q3col i small{font:9px var(--mono);color:var(--k-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} :where(.aud-b) .q3col i span,:where(.aud-b) .q3col i small{white-space:normal;text-overflow:clip} @media (max-width:520px){:where(.aud-b) .q3cols{gap:5px} :where(.aud-b) .q3col{padding:7px 4px;gap:4px} :where(.aud-b) .q3col i{padding:4px 5px}} :where(.aud-b) .y3lead{display:block;text-align:center;text-wrap:balance} :where(.aud-b) .y3big{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center} :where(.aud-b) .y3end{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;gap:14px;text-align:center} :where(.aud-b) .y3mid{display:flex;flex-direction:column;align-items:center;gap:8px} :where(.aud-b) .y3s{font-weight:900;font-size:34px;letter-spacing:-.01em} :where(.aud-b) .y3cac{position:relative;display:inline-grid;font-weight:900;font-size:96px;line-height:1;letter-spacing:-.04em} :where(.aud-b) .y3cac span{grid-area:1/1} :where(.aud-b) .y3u{clip-path:polygon(0 0,100% 0,100% 70%,0 30%)} :where(.aud-b) .y3l{clip-path:polygon(0 30%,100% 70%,100% 100%,0 100%)} :where(.aud-b) .y3sw{position:absolute;left:0;top:0;width:250px;height:34px;overflow:visible;visibility:hidden;z-index:4} :where(.aud-b) .y3small{visibility:hidden} :where(.aud-b) .y3small s{text-decoration-thickness:3px;text-decoration-color:#E5484D} :where(.aud-b) .y3cards{align-self:stretch;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px} :where(.aud-b) .y3c{min-width:0;border-radius:14px;background:var(--k-r1);border:1px solid var(--k-line);padding:10px 8px;display:flex;flex-direction:column;align-items:center;gap:4px;visibility:hidden} :where(.aud-b) .y3c>svg{width:18px;height:18px;color:var(--k-ink);margin-bottom:2px} :where(.aud-b) .y3c small{font:9.5px var(--mono);color:var(--k-sub)} :where(.aud-b) .y3c b{font-size:22px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap} :where(.aud-b) .y3c b em{font-style:normal;font-size:11px;margin-right:2px} :where(.aud-b) .y3c span{font-size:10.5px;color:var(--k-sub);line-height:1.3} :where(.aud-b) .y3ex{visibility:hidden} :where(.aud-b) .y3st{position:relative;display:inline-block} :where(.aud-b) .y3st i{position:absolute;left:-3px;right:-3px;top:52%;height:3px;border-radius:2px;background:#E5484D;transform-origin:0 50%} :where(.aud-b) .m3h{font-size:22px} :where(.aud-b) .m3bub{position:absolute;inset:0} :where(.aud-b) .m3b{position:absolute;left:0;top:0;font-size:11px;border-radius:12px;padding:6px 9px;white-space:nowrap;visibility:hidden} :where(.aud-b) .m3b.b{background:var(--k-ink);color:var(--k-bg)} :where(.aud-b) .m3b.c{background:var(--k-r2);border:1px solid var(--k-line);color:var(--k-ink)} :where(.aud-b) .m3b.m{background:transparent;color:var(--k-sub);font:10px var(--mono);padding:2px} :where(.aud-b) .m3svg{position:absolute;left:50%;top:0;width:340px;height:300px;margin-left:-170px;overflow:visible} :where(.aud-b) .t3win{position:absolute;left:0;right:0;top:0;height:204px;border-radius:14px;background:var(--k-r1);border:1px solid var(--k-line);overflow:hidden} :where(.aud-b) .t3log{position:absolute;left:0;right:0;top:6px;padding-left:30px} :where(.aud-b) .t3r{height:24px;display:flex;align-items:center;gap:7px;font-size:11.5px;color:#6E6D69;white-space:nowrap} :where(.aud-b) .t3r .tk{width:13px;height:13px;border-radius:50%;border:1.5px solid var(--k-line);display:grid;place-items:center;flex:none;position:relative} :where(.aud-b) .t3r .tk svg{width:9px;height:9px;opacity:0} :where(.aud-b) .t3r.s b{font-weight:700} :where(.aud-b) .t3you{font:700 9px "Instrument Sans",Arial,Helvetica,sans-serif;background:var(--k-acc);color:var(--k-acc-ink);border-radius:999px;padding:2px 6px;visibility:hidden} :where(.aud-b) .t3rail{position:absolute;left:15px;top:0;bottom:0;width:1px;background:var(--k-line)} :where(.aud-b) .t3dot{position:absolute;left:12px;top:0;width:7px;height:7px;border-radius:50%;background:var(--k-acc);box-shadow:0 0 8px var(--k-acc)} :where(.aud-b) .t3dim{position:absolute;inset:0;background:var(--k-bg);opacity:0;pointer-events:none;border-radius:14px} :where(.aud-b) .t3pop{position:absolute;left:50%;top:26px;width:270px;margin-left:-135px;border-radius:16px;background:var(--k-ink);color:var(--k-bg);padding:12px;display:flex;flex-direction:column;gap:9px;visibility:hidden;box-shadow:0 18px 40px rgba(0,0,0,.4)} :where(.aud-b) .t3pop small{font:10px var(--mono);opacity:.7} :where(.aud-b) .t3ab{display:grid;grid-template-columns:1fr 1fr;gap:6px} :where(.aud-b) .t3ab div{border-radius:10px;border:1.5px solid rgba(127,127,127,.35);padding:7px;display:flex;flex-direction:column;gap:2px;font-size:11px} :where(.aud-b) .t3ab b{font-size:12px} :where(.aud-b) .t3d{display:flex;gap:10px;align-items:center;font-size:12px} :where(.aud-b) .t3btn{position:relative;display:inline-grid;align-self:flex-start;font:700 12px "Instrument Sans",Arial,Helvetica,sans-serif;background:var(--k-bg);color:var(--k-ink);border-radius:999px;padding:7px 16px} :where(.aud-b) .t3btn span{grid-area:1/1;white-space:nowrap} :where(.aud-b) .t3big{font-weight:900;font-size:22px} :where(.aud-b) .t3foot{position:absolute;left:0;right:0;bottom:0;display:flex;gap:6px;font-size:12px;color:var(--k-sub);visibility:hidden} :where(.aud-b) .t3foot b{color:var(--k-ink)} :where(.aud-b) .w3tick{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:2px;overflow:hidden;visibility:hidden} :where(.aud-b) .w3row{white-space:nowrap;font:900 44px/1 Archivo,Arial,sans-serif;color:transparent;-webkit-text-stroke:1px var(--k-line);animation:w3m 14s linear infinite} :where(.aud-b) .w3row.r{animation-direction:reverse} @keyframes w3m{to{transform:translateX(-50%)}} :where(.aud-b) .w3words{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:0} :where(.aud-b) .w3made,:where(.aud-b) .w3on{font-weight:900;font-size:46px;line-height:1;letter-spacing:-.02em} :where(.aud-b) .w3on{font-size:30px;margin:4px 0} :where(.aud-b) .w3k{position:relative;font:400 104px/1 Archivo,Arial,sans-serif;letter-spacing:-.03em;font-stretch:100%} :where(.aud-b) .w3l{display:inline-block} :where(.aud-b) .w3dot{position:absolute;right:-26px;bottom:14px;width:20px;height:20px;border-radius:50%;background:var(--k-acc);transform-origin:50% 100%} :where(.aud-b) .w3sh{position:absolute;right:-28px;bottom:10px;width:24px;height:5px;border-radius:50%;background:rgba(0,0,0,.45);transform:scale(0)} :where(.aud-b) .c3st{flex:0 0 auto;min-height:0;margin-block:auto;display:flex;flex-direction:column;align-items:flex-start;gap:14px} :where(.aud-b) .c3h{font-size:30px;line-height:1.08;position:relative;z-index:1} :where(.aud-b) .c3h .z3w{margin-right:.22em} :where(.aud-b) .c3ul{position:absolute;left:0;bottom:-2px;width:100%;height:6px;overflow:visible} :where(.aud-b) .c3pill{position:absolute;left:0;top:0;border-radius:999px;background:var(--k-acc);z-index:0;transform-origin:0 0;visibility:hidden} :where(.aud-b) .c3pl{position:absolute;inset:0;display:grid;place-items:center;font:900 30px "Instrument Sans",Arial,Helvetica,sans-serif;color:var(--k-acc-ink);white-space:nowrap} :where(.aud-b) .c3btn{position:relative;margin-top:4px;display:inline-flex;gap:0;font-weight:700;font-size:15px;border-radius:999px;padding:12px 22px;background:var(--k-acc);color:var(--k-acc-ink);visibility:hidden;z-index:2} :where(.aud-b) .c3btn span{display:inline-block} :where(.aud-b) .c3sub{position:relative;font-size:12.5px;color:var(--k-sub);visibility:hidden} :where(.aud-b) .r3cap{font-size:12px;color:var(--k-sub)} :where(.aud-b) .r3v{position:relative;height:300px;overflow:hidden;border:1px solid var(--k-line);border-radius:14px} :where(.aud-b) .r3p{position:absolute;left:0;right:0;top:0} :where(.aud-b) .r3s{position:relative;height:300px;border-bottom:1px dashed var(--k-line);overflow:hidden} :where(.aud-b) .r3s .lab3{position:absolute;z-index:4;left:12px;top:10px;font:10px var(--mono);color:var(--k-sub)} :where(.aud-b) .r3b{position:absolute;font-size:10.5px;border-radius:11px;padding:5px 8px;white-space:nowrap;background:var(--k-r2);border:1px solid var(--k-line)} :where(.aud-b) .r3b.b{background:var(--k-ink);color:var(--k-bg);border:0} :where(.aud-b) .r3cac{position:absolute;left:0;right:0;top:92px;text-align:center} :where(.aud-b) .r3cac .y3cac{font-size:84px} :where(.aud-b) .r3moon{position:absolute;left:0;top:0;width:100%;height:100%} :where(.aud-b) .r3svg{position:absolute;left:0;top:0;width:100%;height:300px;overflow:visible;pointer-events:none;z-index:3} @keyframes kblink{50%{opacity:0}} :where(.aud-b) .t3r.on{color:var(--k-ink)} :where(.aud-b) .t3r.on .tk{background:var(--k-acc);border-color:var(--k-acc);color:var(--k-acc-ink)} :where(.aud-b) .t3r.on .tk svg{opacity:1} :where(.aud-b) .t3btn{overflow:hidden} :where(.aud-b) .t3pop .t3ab .a{border-color:currentColor} :where(.aud-b) .t3pop>span{font-size:11.5px} .ksk.cbsec :where(.aud-b) figure[data-demo="hero"]{--k-cbg:#0000FF} .ksk.cbsec :where(.aud-b) figure[data-demo="brief"]{--k-cbg:#0000FF} .ksk.cbsec :where(.aud-b) figure[data-demo="pick"]{--k-cbg:#098C4D} .ksk.cbsec :where(.aud-b) figure[data-demo="tech"]{--k-cbg:#84C07C} :where(.aud-b) .b6clip{background:var(--k-cbg,#D0D1D5)} .ksk :where(.aud-b) .p3r .fill{background:#2C2C29} .ksk :where(.aud-b) .p3r.on{color:#F5F4EF;border-color:#62625B} .ksk :where(.aud-b) .p3r.on .p3sub,.ksk :where(.aud-b) .p3r.on .p3fb small{color:#B4B4AE} .ksk :where(.aud-b) .p3r .p3bar,.ksk :where(.aud-b) .p3r.on .p3bar{background:#454440} .ksk :where(.aud-b) .p3r .p3bar i,.ksk :where(.aud-b) .p3r.on .p3bar i{background:#B4B4AE} .ksk :where(.aud-b) .p3r.on .p3sub span:last-child{color:#84C07C} .ksk :where(.aud-b) .p3r.on .p3sub span:last-child::before{content:"✓ ";font-weight:700} .ksk :where(.aud-b) .p3rt{border-color:#62625B} :where(.aud-b) .z5av{position:relative;display:inline-block;flex:none;width:32px;height:32px;border-radius:50%;overflow:hidden;background:var(--k-cbg,#D0D1D5);box-shadow:0 0 0 1.5px rgba(0,0,0,.12)} :where(.aud-b) .z5av svg{display:block;width:100%;height:100%} :where(.aud-b) .z6av i{position:absolute;inset:0;background-size:500% 100%;background-repeat:no-repeat} :where(.aud-b) .z6av .fh,:where(.aud-b) .z6av .fs,:where(.aud-b) .z6av .fs2,:where(.aud-b) .z6av .fsd{visibility:hidden} :where(.aud-b) .z6lp{position:relative;display:block;aspect-ratio:21/20;overflow:hidden} :where(.aud-b) .z6lp i{position:absolute;inset:0;background-repeat:no-repeat} :where(.aud-b) .z6lp .lh{visibility:hidden} :where(.aud-b) .z5blob{display:block;overflow:visible} :where(.aud-b) .m6seg{position:relative;z-index:7;margin:0 0 10px} :where(.aud-b) .m5hd{display:grid} :where(.aud-b) .m5hd>*{grid-area:1/1} :where(.aud-b) .m5hl .z3w{visibility:hidden} :where(.aud-b) .m5st{min-height:350px} :where(.aud-b) .m5cta{position:absolute;left:0;right:0;top:304px;height:42px;display:flex;justify-content:center;pointer-events:none} :where(.aud-b) .m5btn{position:relative;display:grid;place-items:center;height:42px;padding:0 28px;visibility:hidden} :where(.aud-b) .m5pill,:where(.aud-b) .m5ring{position:absolute;inset:0;border-radius:999px} :where(.aud-b) .m5pill{background:var(--k-acc)} :where(.aud-b) .m5ring{border:2px solid var(--k-acc);visibility:hidden} :where(.aud-b) .m5lb{position:relative;font:700 15px "Instrument Sans",Arial,Helvetica,sans-serif;color:var(--k-acc-ink);white-space:pre} :where(.aud-b) .m5ch{visibility:hidden} :where(.aud-b) .b5net{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1} :where(.aud-b) .b5cf{position:absolute;inset:-5px;border-radius:50%;border:2px solid #171717;visibility:hidden} :where(.aud-b) .b6c{position:absolute;left:0;top:0;visibility:hidden;z-index:2;display:flex;flex-direction:column;align-items:center;gap:6px} :where(.aud-b) .b6t{position:relative;display:block;width:100%;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1.5px #171717;background:var(--k-cbg,#D0D1D5)} :where(.aud-b) .b6t .z6lp{width:100%} :where(.aud-b) .b6rec{position:absolute;right:6px;top:6px;width:7px;height:7px;border-radius:50%;background:#E5484D;box-shadow:0 0 0 1.5px #F1F0E9;visibility:hidden} :where(.aud-b) .b6c small{display:block;height:16px;line-height:16px;padding:0 7px;border-radius:8px;background:#171717;color:#F1F0E9;font:700 9px "Instrument Sans",Arial,Helvetica,sans-serif;white-space:nowrap} :where(.aud-b) .b6c .b5cf{position:absolute;left:-5px;right:-5px;top:-5px;bottom:auto;border-radius:16px;border:2px solid #171717;visibility:hidden} :where(.aud-b) .b6clip{position:absolute;left:0;top:0;width:34px;border-radius:7px;overflow:hidden;box-shadow:0 0 0 1.5px #171717;visibility:hidden;z-index:3} :where(.aud-b) .b6clip b{position:absolute;left:50%;top:50%;margin:-4px 0 0 -2px;width:0;height:0;border-left:7px solid #F1F0E9;border-top:4px solid transparent;border-bottom:4px solid transparent} :where(.aud-b) .b5sell{position:absolute;left:0;top:0;width:64px;height:64px;border-radius:50%;background:#FAF9F4;border:1.5px solid #171717;display:grid;place-items:center;visibility:hidden;z-index:2} :where(.aud-b) .b5sell .z5blob{width:48px;height:45px} :where(.aud-b) .b5pg{position:absolute;inset:-2px;border-radius:50%;border:2px solid #171717;visibility:hidden} :where(.aud-b) .b5bd{position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#171717;color:#F1F0E9;font:700 11px "Instrument Sans",Arial,Helvetica,sans-serif;display:grid;place-items:center;visibility:hidden} :where(.aud-b) .b5sl{position:absolute;left:0;top:0;font:900 16px "Instrument Sans",Arial,Helvetica,sans-serif;color:#171717;visibility:hidden} :where(.aud-b) .b3note .z5av{width:28px;height:28px} :where(.aud-b) .h5pn{position:absolute;left:0;top:0;width:100%;height:100%;padding:9px 10px;display:flex;flex-direction:column;gap:6px;border:1px solid transparent;border-radius:14px;background:var(--k-r1);visibility:hidden;overflow:hidden;transition:background-color .25s,border-color .25s} :where(.aud-b) .h5pn.ov{background:var(--k-r2);border-color:var(--k-line)} :where(.aud-b) .h5ph{display:flex;align-items:center;gap:6px;font-size:12px} :where(.aud-b) .h5ph svg{width:16px;height:16px;flex:none} :where(.aud-b) .h5ct{margin-left:auto;font:10px var(--mono);color:var(--k-sub)} :where(.aud-b) .h5ct i{font-style:normal;color:var(--k-ink);font-weight:700} :where(.aud-b) .h5row{display:flex;justify-content:space-between;gap:10px;align-items:baseline;padding:6px 9px;border-radius:9px;background:var(--k-r2);font-size:11.5px} :where(.aud-b) .h5row small{font:10px var(--mono);color:var(--k-sub)} :where(.aud-b) .h5row span{font-weight:700;text-align:right} :where(.aud-b) .h5stamp{align-self:flex-end;display:flex;align-items:center;gap:4px;margin-top:2px;font:700 10.5px "Instrument Sans",Arial,Helvetica,sans-serif;border:1.5px solid var(--k-ink);border-radius:999px;padding:3px 9px} :where(.aud-b) .h5stamp svg,:where(.aud-b) .h5cr em svg,:where(.aud-b) .h5dr em svg,:where(.aud-b) .h5py em svg{width:9px;height:9px} :where(.aud-b) .h5crs{flex:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;align-content:center} :where(.aud-b) .h5cr{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0} :where(.aud-b) .h5cr .z5av{width:52px;height:52px} :where(.aud-b) .h5cr small{font-size:9.5px;color:var(--k-sub);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} :where(.aud-b) .h5cr em,:where(.aud-b) .h5py em{display:flex;align-items:center;gap:3px;font:700 9.5px "Instrument Sans",Arial,Helvetica,sans-serif;font-style:normal;background:var(--k-acc);color:var(--k-acc-ink);border-radius:999px;padding:2px 7px} :where(.aud-b) .h5drs{flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;min-height:0} :where(.aud-b) .h5dr{position:relative;display:flex;flex-direction:column;gap:5px;min-width:0;min-height:0} :where(.aud-b) .h5tb{position:relative;flex:none;aspect-ratio:4/5;border-radius:9px;overflow:hidden;background:var(--k-cbg,#D0D1D5)} :where(.aud-b) .h5tb .z6lp{position:absolute;top:0;left:50%;height:100%;width:auto;transform:translateX(-50%)} :where(.aud-b) .h5tb b{position:absolute;right:6px;bottom:6px;width:0;height:0;border-left:8px solid #FAF9F4;border-top:5px solid transparent;border-bottom:5px solid transparent;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))} :where(.aud-b) .h5who{display:flex;align-items:center;gap:4px;min-width:0} :where(.aud-b) .h5who .z5av{width:18px;height:18px} :where(.aud-b) .h5who small{font-size:9px;line-height:1.15;color:var(--k-sub);overflow:hidden} :where(.aud-b) .h5dr{container-type:inline-size} :where(.aud-b) .h5dr .h3ap{position:absolute;left:50%;top:0;margin-top:92.5%;font-size:10.5px;font-size:min(10.5px,10.2cqw);padding:.38em .86em;box-shadow:0 4px 12px rgba(0,0,0,.25)} :where(.aud-b) .h5dr em{position:absolute;right:5px;top:5px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--k-acc);color:var(--k-acc-ink)} :where(.aud-b) .h5py{display:flex;align-items:center;gap:8px;padding:4px 8px 4px 4px;border-radius:999px;background:var(--k-r2);font-size:11px} :where(.aud-b) .h5py .z5av{width:24px;height:24px} :where(.aud-b) .h5py small{flex:1;min-width:0;line-height:1.15;color:var(--k-sub);overflow:hidden} :where(.aud-b) .h5py span{font-weight:700;white-space:nowrap} :where(.aud-b) .t3ab .z5av{width:28px;height:28px;margin-bottom:2px} :where(.aud-b) .t5ph{position:relative;flex:none;width:34px;height:56px;border-radius:7px;background:#171717;padding:3px} :where(.aud-b) .t5sc{position:absolute;inset:3px;border-radius:4px;background:linear-gradient(170deg,#F6E4BF,#E8A33D);overflow:hidden;display:flex;justify-content:center;align-items:flex-end} :where(.aud-b) .t5sc .z5av{width:26px;height:26px;border-radius:50% 50% 0 0;margin-bottom:-2px;box-shadow:none} :where(.aud-b) .t5pb{position:absolute;left:6px;right:6px;bottom:6px;height:2px;border-radius:1px;background:rgba(23,23,23,.25);overflow:hidden} :where(.aud-b) .t5pb u{display:block;height:100%;background:#171717} :where(.aud-b) .t5ps{display:flex;align-items:center;gap:4px;font-size:11.5px} :where(.aud-b) .t5ps .z5av{width:24px;height:24px} :where(.aud-b) .t5ps span{margin-left:6px} :where(.aud-b) .r3go{position:absolute;left:0;right:0;top:170px;display:flex;justify-content:center} :where(.aud-b) .r3gw{position:relative;display:inline-grid} :where(.aud-b) .r3gb{position:relative;font:700 15px "Instrument Sans",Arial,Helvetica,sans-serif;border-radius:999px;padding:12px 22px;background:var(--k-acc);color:var(--k-acc-ink);white-space:nowrap} :where(.aud-b) .r3rg{position:absolute;inset:0;border-radius:999px;border:2px solid var(--k-acc);visibility:hidden} :where(.aud-b) .fq{border-top:1px solid var(--k-line)} :where(.aud-b) .fq button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;background:transparent;border:0;color:var(--k-ink);font:700 13px "Instrument Sans",Arial,Helvetica,sans-serif;padding:11px 0;cursor:pointer;text-align:left} :where(.aud-b) .fq .chev{font-size:16px;line-height:1;transition:transform .2s cubic-bezier(.65,0,.35,1)} :where(.aud-b) .fq button[aria-expanded="true"] .chev{transform:rotate(45deg)} :where(.aud-b) .fq .ans{height:0;overflow:hidden;font-size:12px;color:var(--k-sub);line-height:1.45} :where(.aud-b) .fq .ans p{margin:0;padding-bottom:11px} @media (prefers-reduced-motion:reduce){:where(.aud-b) .kz *{animation:none!important}} :where(.aud-b) .h3seg,:where(.aud-b) .m6seg{height:32px;flex-shrink:0} :where(.aud-b) .r3cap{height:3lh;flex:none} :where(.aud-b) .b3txt:has(>.b3t:empty){line-height:0} :where(.aud-b) .kz .kbar button[hidden]{display:none} :where(.aud-b) .m5st .m3svg{top:-56px;clip-path:inset(50px -400px -48px -400px)} :where(.aud-b) .m5st .m5hl{position:absolute;left:0;right:0;top:306px;text-align:center;text-wrap:balance;font-size:18px;line-height:1.25} :where(.aud-b) .m5st .m5cta{top:236px} :where(.aud-b) .m5st{min-height:362px} :where(.aud-b) .y3end{justify-content:center;gap:24px} :where(.aud-b) .y3vs{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} :where(.aud-b) .y3vs .y3c{padding:12px 10px} :where(.aud-b) .y3vs .y3c b{display:inline-flex;align-items:center;gap:4px;font-size:26px} :where(.aud-b) .y3ar{width:24px;height:24px;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round} :where(.aud-b) .y3ar.up{stroke:#E5484D} :where(.aud-b) .y3ar.dn{stroke:var(--k-acc)} :where(.aud-b) .y3vs .y3c span{font-size:11.5px} :where(.aud-b) .kh.b3h{text-align:center} .ksk.cbsec :where(.aud-b) figure[data-demo="hero"] [data-k="outfit"],.ksk.cbsec :where(.aud-b) figure[data-demo="hero"] .h5dr:has([data-k="outfit"]) .h5tb{--k-cbg:#0000FF} .ksk.cbsec :where(.aud-b) figure[data-demo="hero"] [data-k="gamer"],.ksk.cbsec :where(.aud-b) figure[data-demo="hero"] .h5dr:has([data-k="gamer"]) .h5tb{--k-cbg:#0000FF} .ksk.cbsec :where(.aud-b) figure[data-demo="hero"] [data-k="ring"],.ksk.cbsec :where(.aud-b) figure[data-demo="hero"] .h5dr:has([data-k="ring"]) .h5tb{--k-cbg:#84C07C} .ksk.cbsec :where(.aud-b) figure[data-demo="hero"] [data-k="jacks"],.ksk.cbsec :where(.aud-b) figure[data-demo="hero"] .h5dr:has([data-k="jacks"]) .h5tb{--k-cbg:#098C4D} .ksk.cbsec :where(.aud-b) figure[data-demo="hero"] [data-k="burger"],.ksk.cbsec :where(.aud-b) figure[data-demo="hero"] .h5dr:has([data-k="burger"]) .h5tb{--k-cbg:#098C4D} .ksk.cbsec :where(.aud-b) figure[data-demo="hero"] [data-k="unbox"],.ksk.cbsec :where(.aud-b) figure[data-demo="hero"] .h5dr:has([data-k="unbox"]) .h5tb{--k-cbg:#D12020} @media(prefers-reduced-motion:reduce){.kz *{transition:none!important}.kz .kbar button{display:none}} :where(.aud-c,.c-skin) .kz{--display:"Archivo","Arial Narrow",system-ui,sans-serif;--body:"Instrument Sans",Arial,Helvetica,sans-serif;--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;--r:12px;--line:#D7DAE1;--surface:#FFFFFF;--ink:#121418;--sub:#4F5561;--yel:#84C07C;font-size:15px;line-height:1.55} :where(.aud-c,.c-skin) .kz,:where(.aud-c,.c-skin) .kz *,:where(.aud-c,.c-skin) .kz *::before,:where(.aud-c,.c-skin) .kz *::after{box-sizing:border-box} :where(.aud-c,.c-skin) .kz p{margin:0;max-width:68ch} :where(.aud-c,.c-skin) .kz{--k-bg:#131313;--k-ink:#F5F4EF;--k-sub:#B4B4AE;--k-r1:#202020;--k-r2:#282825;--k-line:#3A3A37;--k-acc:var(--k-ink);--k-acc-ink:var(--k-bg);margin:0;border-radius:var(--r);overflow:hidden;background:var(--k-bg);color:var(--k-ink);font-family:"Instrument Sans",Arial,Helvetica,sans-serif;display:flex;flex-direction:column;min-width:0;border:1px solid var(--line)} :where(.aud-c,.c-skin) .kz.cream{--k-bg:#F1F0E9;--k-ink:#171717;--k-sub:#5C5B56;--k-r1:#FAF9F4;--k-r2:#E9E8E0;--k-line:#D3D2C9} :where(.aud-c,.c-skin) .kzs{position:relative;overflow:hidden;display:flex;flex-direction:column;background:var(--k-bg);min-height:340px} :where(.aud-c,.c-skin) .kzc{position:relative;width:100%;max-width:380px;margin-inline:auto;padding:20px 16px;display:flex;flex-direction:column;gap:12px;font-size:13px;line-height:1.35;flex:1} :where(.aud-c,.c-skin) .kzc.wide{max-width:560px} :where(.aud-c,.c-skin) .kz .kpill svg,:where(.aud-c,.c-skin) .kz .ktag svg,:where(.aud-c,.c-skin) .kz .kbtn svg{width:14px;height:14px;flex:none;display:block} :where(.aud-c,.c-skin) .kz .kpill svg{width:12px;height:12px} :where(.aud-c,.c-skin) .lab2{font:9.5px/1.3 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--k-sub)} :where(.aud-c,.c-skin) .ks{color:var(--k-sub);font-size:11.5px} :where(.aud-c,.c-skin) .kbar{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 12px;border-top:1px solid var(--line);background:var(--surface);color:var(--sub);font:11px/1.35 var(--mono)} :where(.aud-c,.c-skin) .kbar button{font:600 12px var(--body);color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:999px;padding:3px 11px;cursor:pointer;flex:none} :where(.aud-c,.c-skin) .kcard{background:var(--k-r1);border:1px solid var(--k-line);border-radius:12px;padding:10px 12px} :where(.aud-c,.c-skin) .kpill{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--k-line);border-radius:999px;padding:5px 10px;font-size:11.5px;line-height:1.2;background:var(--k-r1);color:var(--k-ink);white-space:nowrap} :where(.aud-c,.c-skin) .kpill svg{width:12px;height:12px} :where(.aud-c,.c-skin) .kbtn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;line-height:1.2;border-radius:999px;padding:9px 16px;background:var(--k-acc);color:var(--k-acc-ink);border:0;align-self:flex-start} :where(.aud-c,.c-skin) .kbtn.ghost{background:transparent;color:var(--k-ink);border:1px solid var(--k-line)} :where(.aud-c,.c-skin) .ktag{display:inline-flex;align-items:center;font:600 9.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--k-sub);border:1px dashed var(--k-line);border-radius:999px;padding:4px 7px;white-space:nowrap} :where(.aud-c,.c-skin) .krow{display:flex;flex-wrap:wrap;gap:8px;align-items:center} :where(.aud-c,.c-skin) .kz button{font-family:inherit;cursor:pointer;margin:0} :where(.aud-c,.c-skin) .kz button:focus-visible{outline:2px solid #93A5FF;outline-offset:2px} :where(.aud-c,.c-skin) .z3wait>*{visibility:hidden} :where(.aud-c,.c-skin) .kh{font-weight:900;font-size:24px;line-height:1.04;letter-spacing:-.02em;text-wrap:balance} :where(.aud-c,.c-skin) .kh.s{font-size:19px} :where(.aud-c,.c-skin) .kb{font-size:12px;color:var(--k-sub);line-height:1.4} :where(.aud-c,.c-skin) .kseg{display:flex;background:var(--k-r1);border:1px solid var(--k-line);border-radius:999px;padding:3px;position:relative;align-self:flex-start;max-width:100%} :where(.aud-c,.c-skin) .kseg button{position:relative;z-index:1;font:700 11px "Instrument Sans",Arial,Helvetica,sans-serif;color:var(--k-sub);background:transparent;border:0;border-radius:999px;padding:6px 9px;cursor:pointer;white-space:nowrap} :where(.aud-c,.c-skin) .kseg button[aria-pressed="true"]{color:var(--k-bg)} :where(.aud-c,.c-skin) .kseg .knob{position:absolute;top:3px;bottom:3px;left:0;width:0;border-radius:999px;background:var(--k-ink);transition:transform .2s cubic-bezier(.65,0,.35,1),width .2s cubic-bezier(.65,0,.35,1)} :where(.aud-c,.c-skin) .kz button:focus-visible{outline:2px solid #93A5FF;outline-offset:2px} :where(.aud-c,.c-skin) .od{display:inline-block;height:1em;overflow:hidden;vertical-align:top;line-height:1} :where(.aud-c,.c-skin) .odc{display:flex;flex-direction:column;transition:transform .5s cubic-bezier(.33,1,.68,1)} :where(.aud-c,.c-skin) .odc i{font-style:normal;height:1em;line-height:1;display:block;text-align:center} :where(.aud-c,.c-skin) .odx{display:inline-block;height:1em;line-height:1;vertical-align:top;white-space:pre} :where(.aud-c,.c-skin) .kbtn.acc{background:var(--k-acc);color:var(--k-acc-ink)} :where(.aud-c,.c-skin) .kmark{width:22px;height:22px;border-radius:7px;background:var(--k-acc);color:var(--k-acc-ink);display:grid;place-items:center;font:900 12px "Instrument Sans",Arial,Helvetica,sans-serif;flex:none} :where(.aud-c,.c-skin) .gl{animation:kgl .13s cubic-bezier(.33,1,.68,1) both} :where(.aud-c,.c-skin) .kslot{position:relative;display:inline-block;height:1.25em;overflow:hidden;vertical-align:bottom} :where(.aud-c,.c-skin) .kslot>span{position:absolute;left:0;top:0;white-space:nowrap} :where(.aud-c,.c-skin) .kslot.r>span{left:auto;right:0} :where(.aud-c,.c-skin) .kz.v3 .kzs{min-height:440px} @media (max-width:520px){:where(.aud-c,.c-skin) .kz.v3 .kzs{min-height:420px} :where(.aud-c,.c-skin) .kz .h5cr small{font-size:8.5px;letter-spacing:-.1px}} :where(.aud-c,.c-skin) .v3 .kzc{max-width:380px;z-index:1} :where(.aud-c,.c-skin) .z3st{position:relative;flex:1;min-height:330px} :where(.aud-c,.c-skin) .z3abs{position:absolute;inset:0} :where(.aud-c,.c-skin) .z3w{display:inline-block;will-change:transform,opacity} :where(.aud-c,.c-skin) .z3wait>*{visibility:hidden} :where(.aud-c,.c-skin) .z3g{color:#6E6D69} :where(.aud-c,.c-skin) .cream .z3g{color:#B9B8B0} :where(.aud-c,.c-skin) .z3flood{position:absolute;left:0;top:0;border-radius:50%;pointer-events:none;z-index:0;background:#F1F0E9;visibility:hidden} :where(.aud-c,.c-skin) .z3flash{position:absolute;inset:0;pointer-events:none;z-index:3;background:var(--k-ink);visibility:hidden} :where(.aud-c,.c-skin) .z3ex{position:absolute;right:0;font-size:10px;padding:3px 8px} :where(.aud-c,.c-skin) .z3svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible} :where(.aud-c,.c-skin) .p3top{position:relative;display:flex;align-items:center;gap:8px} :where(.aud-c,.c-skin) .p3top .z3ex{position:static;margin-left:auto} :where(.aud-c,.c-skin) .p3hd{display:flex;justify-content:space-between;font:10px var(--mono);color:var(--k-sub);padding:0 8px} :where(.aud-c,.c-skin) .p3hd span{display:grid} :where(.aud-c,.c-skin) .p3hd span i{grid-area:1/1;font-style:normal;text-align:right} :where(.aud-c,.c-skin) .p3list{position:relative;height:240px} :where(.aud-c,.c-skin) .p3r{position:absolute;left:0;right:0;height:44px;border-radius:12px;background:var(--k-r1);border:1px solid var(--k-line);display:flex;align-items:center;gap:8px;padding:0 8px} :where(.aud-c,.c-skin) .p3r .fill{position:absolute;inset:0;border-radius:11px;background:var(--k-acc);transform-origin:0 50%;transform:scaleX(0)} :where(.aud-c,.c-skin) .p3r .p3av{width:36px;height:36px} :where(.aud-c,.c-skin) .p3n{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;gap:1px} :where(.aud-c,.c-skin) .p3n b{font-size:12px} :where(.aud-c,.c-skin) .p3sub{display:grid;font-size:10px;color:var(--k-sub)} :where(.aud-c,.c-skin) .p3sub span{grid-area:1/1} :where(.aud-c,.c-skin) .p3m{position:relative;display:grid;perspective:300px;text-align:right} :where(.aud-c,.c-skin) .p3m>div{grid-area:1/1;display:flex;align-items:center;justify-content:flex-end;gap:8px;backface-visibility:hidden} :where(.aud-c,.c-skin) .p3fa{font-size:13px;font-weight:700} :where(.aud-c,.c-skin) .p3fb{visibility:hidden} :where(.aud-c,.c-skin) .p3fb span{display:flex;flex-direction:column;align-items:flex-end;font-size:12px;font-weight:700;min-width:34px} :where(.aud-c,.c-skin) .p3fb small{font:9px var(--mono);color:var(--k-sub);font-weight:400} :where(.aud-c,.c-skin) .p3bar{width:30px;height:4px;border-radius:2px;background:var(--k-line);overflow:hidden;margin-top:2px} :where(.aud-c,.c-skin) .p3bar i{display:block;height:100%;background:var(--k-acc);transform-origin:0 50%;transform:scaleX(0)} :where(.aud-c,.c-skin) .p3r.on{color:var(--k-acc-ink)} :where(.aud-c,.c-skin) .p3r.on .p3bar{background:rgba(23,23,23,.14)} :where(.aud-c,.c-skin) .p3r.on .p3bar i{background:var(--k-acc-ink)} :where(.aud-c,.c-skin) .p3r.on .p3sub,:where(.aud-c,.c-skin) .p3r.on .p3fb small{color:color-mix(in srgb,var(--k-acc-ink) 75%,transparent)} :where(.aud-c,.c-skin) .p3scan{position:absolute;left:-4px;right:-4px;top:0;height:2px;background:var(--k-acc);box-shadow:0 0 12px var(--k-acc);visibility:hidden} :where(.aud-c,.c-skin) .p3rt{position:absolute;left:-3px;right:-3px;top:-3px;height:50px;border:2px solid var(--k-acc);border-radius:14px;pointer-events:none;visibility:hidden} :where(.aud-c,.c-skin) .q3lines{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;gap:2px} :where(.aud-c,.c-skin) .q3lines div{font-weight:900;font-size:19px;line-height:1.12;letter-spacing:-.01em} :where(.aud-c,.c-skin) .q3one{position:absolute;left:0;right:0;top:0;font-weight:900;font-size:40px;line-height:1;letter-spacing:-.02em;visibility:hidden} :where(.aud-c,.c-skin) .q3svg{position:absolute;left:0;top:80px;width:100%;height:calc(100% - 80px);overflow:visible} :where(.aud-c,.c-skin) .q3blob{position:absolute;left:0;top:0;background:#F1F0E9;pointer-events:none;visibility:hidden;z-index:1} :where(.aud-c,.c-skin) .q3end{position:absolute;left:0;right:0;top:52px;bottom:0;display:flex;flex-direction:column;gap:12px} :where(.aud-c,.c-skin) .q3camp{position:relative;border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:8px;visibility:hidden;z-index:2} :where(.aud-c,.c-skin) .q3camp .h{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px} :where(.aud-c,.c-skin) .q3camp .z3ex{position:static;margin-left:auto} :where(.aud-c,.c-skin) .q3camp .kmark{background:#171717;color:#F1F0E9} :where(.aud-c,.c-skin) .q3camp small{font-size:11.5px;color:var(--k-sub)} :where(.aud-c,.c-skin) .q3prog{height:6px;border-radius:3px;background:rgba(23,23,23,.15);overflow:hidden} :where(.aud-c,.c-skin) .q3prog i{display:block;height:100%;width:58%;background:#171717;transform-origin:0 50%} :where(.aud-c,.c-skin) .q3cols{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px} :where(.aud-c,.c-skin) .q3col{visibility:hidden;min-width:0;border-radius:12px;background:var(--k-r1);border:1px solid var(--k-line);padding:8px 7px;display:flex;flex-direction:column;gap:5px;overflow:hidden} :where(.aud-c,.c-skin) .q3col b{font:10px var(--mono);color:var(--k-sub);font-weight:400} :where(.aud-c,.c-skin) .q3col i{display:flex;flex-direction:column;gap:1px;border-radius:8px;background:var(--k-r2);border:1px solid var(--k-line);padding:5px 7px;font-style:normal} :where(.aud-c,.c-skin) .q3col i span{font:600 10px "Instrument Sans",Arial,Helvetica,sans-serif;color:var(--k-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} :where(.aud-c,.c-skin) .q3col i small{font:9px var(--mono);color:var(--k-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} :where(.aud-c,.c-skin) .q3col i span,:where(.aud-c,.c-skin) .q3col i small{white-space:normal;text-overflow:clip} @media (max-width:520px){:where(.aud-c,.c-skin) .q3cols{gap:5px} :where(.aud-c,.c-skin) .q3col{padding:7px 4px;gap:4px} :where(.aud-c,.c-skin) .q3col i{padding:4px 5px}} :where(.aud-c,.c-skin) .y3lead{display:block;text-align:center;text-wrap:balance} :where(.aud-c,.c-skin) .y3big{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center} :where(.aud-c,.c-skin) .y3end{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;gap:14px;text-align:center} :where(.aud-c,.c-skin) .y3mid{display:flex;flex-direction:column;align-items:center;gap:8px} :where(.aud-c,.c-skin) .y3s{font-weight:900;font-size:34px;letter-spacing:-.01em} :where(.aud-c,.c-skin) .y3cac{position:relative;display:inline-grid;font-weight:900;font-size:96px;line-height:1;letter-spacing:-.04em} :where(.aud-c,.c-skin) .y3cac span{grid-area:1/1} :where(.aud-c,.c-skin) .y3u{clip-path:polygon(0 0,100% 0,100% 70%,0 30%)} :where(.aud-c,.c-skin) .y3l{clip-path:polygon(0 30%,100% 70%,100% 100%,0 100%)} :where(.aud-c,.c-skin) .y3sw{position:absolute;left:0;top:0;width:250px;height:34px;overflow:visible;visibility:hidden;z-index:4} :where(.aud-c,.c-skin) .y3small{visibility:hidden} :where(.aud-c,.c-skin) .y3small s{text-decoration-thickness:3px;text-decoration-color:#E5484D} :where(.aud-c,.c-skin) .y3cards{align-self:stretch;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px} :where(.aud-c,.c-skin) .y3c{min-width:0;border-radius:14px;background:var(--k-r1);border:1px solid var(--k-line);padding:10px 8px;display:flex;flex-direction:column;align-items:center;gap:4px;visibility:hidden} :where(.aud-c,.c-skin) .y3c>svg{width:18px;height:18px;color:var(--k-ink);margin-bottom:2px} :where(.aud-c,.c-skin) .y3c small{font:9.5px var(--mono);color:var(--k-sub)} :where(.aud-c,.c-skin) .y3c b{font-size:22px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap} :where(.aud-c,.c-skin) .y3c b em{font-style:normal;font-size:11px;margin-right:2px} :where(.aud-c,.c-skin) .y3c span{font-size:10.5px;color:var(--k-sub);line-height:1.3} :where(.aud-c,.c-skin) .y3ex{visibility:hidden} :where(.aud-c,.c-skin) .y3st{position:relative;display:inline-block} :where(.aud-c,.c-skin) .y3st i{position:absolute;left:-3px;right:-3px;top:52%;height:3px;border-radius:2px;background:#E5484D;transform-origin:0 50%} :where(.aud-c,.c-skin) .m3h{font-size:22px} :where(.aud-c,.c-skin) .m3bub{position:absolute;inset:0} :where(.aud-c,.c-skin) .m3b{position:absolute;left:0;top:0;font-size:11px;border-radius:12px;padding:6px 9px;white-space:nowrap;visibility:hidden} :where(.aud-c,.c-skin) .m3b.b{background:var(--k-ink);color:var(--k-bg)} :where(.aud-c,.c-skin) .m3b.c{background:var(--k-r2);border:1px solid var(--k-line);color:var(--k-ink)} :where(.aud-c,.c-skin) .m3b.m{background:transparent;color:var(--k-sub);font:10px var(--mono);padding:2px} :where(.aud-c,.c-skin) .m3svg{position:absolute;left:50%;top:0;width:340px;height:300px;margin-left:-170px;overflow:visible} :where(.aud-c,.c-skin) .t3win{position:absolute;left:0;right:0;top:0;height:204px;border-radius:14px;background:var(--k-r1);border:1px solid var(--k-line);overflow:hidden} :where(.aud-c,.c-skin) .t3log{position:absolute;left:0;right:0;top:6px;padding-left:30px} :where(.aud-c,.c-skin) .t3r{height:24px;display:flex;align-items:center;gap:7px;font-size:11.5px;color:#6E6D69;white-space:nowrap} :where(.aud-c,.c-skin) .t3r .tk{width:13px;height:13px;border-radius:50%;border:1.5px solid var(--k-line);display:grid;place-items:center;flex:none;position:relative} :where(.aud-c,.c-skin) .t3r .tk svg{width:9px;height:9px;opacity:0} :where(.aud-c,.c-skin) .t3r.s b{font-weight:700} :where(.aud-c,.c-skin) .t3you{font:700 9px "Instrument Sans",Arial,Helvetica,sans-serif;background:var(--k-acc);color:var(--k-acc-ink);border-radius:999px;padding:2px 6px;visibility:hidden} :where(.aud-c,.c-skin) .t3rail{position:absolute;left:15px;top:0;bottom:0;width:1px;background:var(--k-line)} :where(.aud-c,.c-skin) .t3dot{position:absolute;left:12px;top:0;width:7px;height:7px;border-radius:50%;background:var(--k-acc);box-shadow:0 0 8px var(--k-acc)} :where(.aud-c,.c-skin) .t3dim{position:absolute;inset:0;background:var(--k-bg);opacity:0;pointer-events:none;border-radius:14px} :where(.aud-c,.c-skin) .t3pop{position:absolute;left:50%;top:26px;width:270px;margin-left:-135px;border-radius:16px;background:var(--k-ink);color:var(--k-bg);padding:12px;display:flex;flex-direction:column;gap:9px;visibility:hidden;box-shadow:0 18px 40px rgba(0,0,0,.4)} :where(.aud-c,.c-skin) .t3pop small{font:10px var(--mono);opacity:.7} :where(.aud-c,.c-skin) .t3ab{display:grid;grid-template-columns:1fr 1fr;gap:6px} :where(.aud-c,.c-skin) .t3ab div{border-radius:10px;border:1.5px solid rgba(127,127,127,.35);padding:7px;display:flex;flex-direction:column;gap:2px;font-size:11px} :where(.aud-c,.c-skin) .t3ab b{font-size:12px} :where(.aud-c,.c-skin) .t3d{display:flex;gap:10px;align-items:center;font-size:12px} :where(.aud-c,.c-skin) .t3btn{position:relative;display:inline-grid;align-self:flex-start;font:700 12px "Instrument Sans",Arial,Helvetica,sans-serif;background:var(--k-bg);color:var(--k-ink);border-radius:999px;padding:7px 16px} :where(.aud-c,.c-skin) .t3btn span{grid-area:1/1;white-space:nowrap} :where(.aud-c,.c-skin) .t3big{font-weight:900;font-size:22px} :where(.aud-c,.c-skin) .t3foot{position:absolute;left:0;right:0;bottom:0;display:flex;gap:6px;font-size:12px;color:var(--k-sub);visibility:hidden} :where(.aud-c,.c-skin) .t3foot b{color:var(--k-ink)} :where(.aud-c,.c-skin) .c3st{flex:0 0 auto;min-height:0;margin-block:auto;display:flex;flex-direction:column;align-items:flex-start;gap:14px} :where(.aud-c,.c-skin) .c3h{font-size:30px;line-height:1.08;position:relative;z-index:1} :where(.aud-c,.c-skin) .c3h .z3w{margin-right:.22em} :where(.aud-c,.c-skin) .c3ul{position:absolute;left:0;bottom:-2px;width:100%;height:6px;overflow:visible} :where(.aud-c,.c-skin) .c3pill{position:absolute;left:0;top:0;border-radius:999px;background:var(--k-acc);z-index:0;transform-origin:0 0;visibility:hidden} :where(.aud-c,.c-skin) .c3pl{position:absolute;inset:0;display:grid;place-items:center;font:900 30px "Instrument Sans",Arial,Helvetica,sans-serif;color:var(--k-acc-ink);white-space:nowrap} :where(.aud-c,.c-skin) .c3btn{position:relative;margin-top:4px;display:inline-flex;gap:0;font-weight:700;font-size:15px;border-radius:999px;padding:12px 22px;background:var(--k-acc);color:var(--k-acc-ink);visibility:hidden;z-index:2} :where(.aud-c,.c-skin) .c3btn span{display:inline-block} :where(.aud-c,.c-skin) .c3sub{position:relative;font-size:12.5px;color:var(--k-sub);visibility:hidden} :where(.aud-c,.c-skin) .t3r.on{color:var(--k-ink)} :where(.aud-c,.c-skin) .t3r.on .tk{background:var(--k-acc);border-color:var(--k-acc);color:var(--k-acc-ink)} :where(.aud-c,.c-skin) .t3r.on .tk svg{opacity:1} :where(.aud-c,.c-skin) .t3btn{overflow:hidden} :where(.aud-c,.c-skin) .t3pop .t3ab .a{border-color:currentColor} :where(.aud-c,.c-skin) .t3pop>span{font-size:11.5px} :where(.aud-c,.c-skin) [data-k="unbox"],:where(.aud-c,.c-skin) :has(> .z6lp[data-k="unbox"]){--k-cbg:#D12020} :where(.aud-c,.c-skin) [data-k="outfit"],:where(.aud-c,.c-skin) :has(> .z6lp[data-k="outfit"]){--k-cbg:#0000FF} :where(.aud-c,.c-skin) [data-k="burger"],:where(.aud-c,.c-skin) :has(> .z6lp[data-k="burger"]){--k-cbg:#098C4D} :where(.aud-c,.c-skin) [data-k="ring"],:where(.aud-c,.c-skin) :has(> .z6lp[data-k="ring"]){--k-cbg:#84C07C} :where(.aud-c,.c-skin) [data-k="jacks"],:where(.aud-c,.c-skin) :has(> .z6lp[data-k="jacks"]){--k-cbg:#098C4D} :where(.aud-c,.c-skin) [data-k="gamer"],:where(.aud-c,.c-skin) :has(> .z6lp[data-k="gamer"]){--k-cbg:#0000FF} :where(.aud-c,.c-skin) .b6clip{background:var(--k-cbg,#D0D1D5)} :where(.aud-c,.c-skin) .p3r .fill{background:#2C2C29} :where(.aud-c,.c-skin) .p3r.on{color:#F5F4EF;border-color:#62625B} :where(.aud-c,.c-skin) .p3r.on .p3sub,:where(.aud-c,.c-skin) .p3r.on .p3fb small{color:#B4B4AE} :where(.aud-c,.c-skin) .p3r .p3bar,:where(.aud-c,.c-skin) .p3r.on .p3bar{background:#454440} :where(.aud-c,.c-skin) .p3r .p3bar i,:where(.aud-c,.c-skin) .p3r.on .p3bar i{background:#B4B4AE} :where(.aud-c,.c-skin) .p3r.on .p3sub span:last-child{color:#84C07C} :where(.aud-c,.c-skin) .p3r.on .p3sub span:last-child::before{content:"✓ ";font-weight:700} :where(.aud-c,.c-skin) .p3rt{border-color:#62625B} :where(.aud-c,.c-skin) .z5av{position:relative;display:inline-block;flex:none;width:32px;height:32px;border-radius:50%;overflow:hidden;background:var(--k-cbg,#D0D1D5);box-shadow:0 0 0 1.5px rgba(0,0,0,.12)} :where(.aud-c,.c-skin) .z5av svg{display:block;width:100%;height:100%} :where(.aud-c,.c-skin) .z6av i{position:absolute;inset:0;background-size:500% 100%;background-repeat:no-repeat} :where(.aud-c,.c-skin) .z6av .fh,:where(.aud-c,.c-skin) .z6av .fs,:where(.aud-c,.c-skin) .z6av .fs2,:where(.aud-c,.c-skin) .z6av .fsd{visibility:hidden} :where(.aud-c,.c-skin) .z6lp{position:relative;display:block;aspect-ratio:21/20;overflow:hidden} :where(.aud-c,.c-skin) .z6lp i{position:absolute;inset:0;background-repeat:no-repeat} :where(.aud-c,.c-skin) .z6lp .lh{visibility:hidden} :where(.aud-c,.c-skin) .z5blob{display:block;overflow:visible} :where(.aud-c,.c-skin) .m5cta{position:absolute;left:0;right:0;top:304px;height:42px;display:flex;justify-content:center;pointer-events:none} :where(.aud-c,.c-skin) .m5btn{position:relative;display:grid;place-items:center;height:42px;padding:0 28px;visibility:hidden} :where(.aud-c,.c-skin) .m5pill,:where(.aud-c,.c-skin) .m5ring{position:absolute;inset:0;border-radius:999px} :where(.aud-c,.c-skin) .m5pill{background:var(--k-acc)} :where(.aud-c,.c-skin) .m5ring{border:2px solid var(--k-acc);visibility:hidden} :where(.aud-c,.c-skin) .m5lb{position:relative;font:700 15px "Instrument Sans",Arial,Helvetica,sans-serif;color:var(--k-acc-ink);white-space:pre} :where(.aud-c,.c-skin) .m5ch{visibility:hidden} :where(.aud-c,.c-skin) .b6c{position:absolute;left:0;top:0;visibility:hidden;z-index:2;display:flex;flex-direction:column;align-items:center;gap:6px} :where(.aud-c,.c-skin) .b6t{position:relative;display:block;width:100%;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1.5px #171717;background:var(--k-cbg,#D0D1D5)} :where(.aud-c,.c-skin) .b6t .z6lp{width:100%} :where(.aud-c,.c-skin) .b6rec{position:absolute;right:6px;top:6px;width:7px;height:7px;border-radius:50%;background:#E5484D;box-shadow:0 0 0 1.5px #F1F0E9;visibility:hidden} :where(.aud-c,.c-skin) .b6c small{display:block;height:16px;line-height:16px;padding:0 7px;border-radius:8px;background:#171717;color:#F1F0E9;font:700 9px "Instrument Sans",Arial,Helvetica,sans-serif;white-space:nowrap} :where(.aud-c,.c-skin) .b6c .b5cf{position:absolute;left:-5px;right:-5px;top:-5px;bottom:auto;border-radius:16px;border:2px solid #171717;visibility:hidden} :where(.aud-c,.c-skin) .b6clip{position:absolute;left:0;top:0;width:34px;border-radius:7px;overflow:hidden;box-shadow:0 0 0 1.5px #171717;visibility:hidden;z-index:3} :where(.aud-c,.c-skin) .b6clip b{position:absolute;left:50%;top:50%;margin:-4px 0 0 -2px;width:0;height:0;border-left:7px solid #F1F0E9;border-top:4px solid transparent;border-bottom:4px solid transparent} :where(.aud-c,.c-skin) .h5pn{position:absolute;left:0;top:0;width:100%;height:100%;padding:9px 10px;display:flex;flex-direction:column;gap:6px;border:1px solid transparent;border-radius:14px;background:var(--k-r1);visibility:hidden;overflow:hidden;transition:background-color .25s,border-color .25s} :where(.aud-c,.c-skin) .h5pn.ov{background:var(--k-r2);border-color:var(--k-line)} :where(.aud-c,.c-skin) .h5ph{display:flex;align-items:center;gap:6px;font-size:12px} :where(.aud-c,.c-skin) .h5ph svg{width:16px;height:16px;flex:none} :where(.aud-c,.c-skin) .h5ct{margin-left:auto;font:10px var(--mono);color:var(--k-sub)} :where(.aud-c,.c-skin) .h5ct i{font-style:normal;color:var(--k-ink);font-weight:700} :where(.aud-c,.c-skin) .h5row{display:flex;justify-content:space-between;gap:10px;align-items:baseline;padding:6px 9px;border-radius:9px;background:var(--k-r2);font-size:11.5px} :where(.aud-c,.c-skin) .h5row small{font:10px var(--mono);color:var(--k-sub)} :where(.aud-c,.c-skin) .h5row span{font-weight:700;text-align:right} :where(.aud-c,.c-skin) .h5stamp{align-self:flex-end;display:flex;align-items:center;gap:4px;margin-top:2px;font:700 10.5px "Instrument Sans",Arial,Helvetica,sans-serif;border:1.5px solid var(--k-ink);border-radius:999px;padding:3px 9px} :where(.aud-c,.c-skin) .h5stamp svg,:where(.aud-c,.c-skin) .h5cr em svg,:where(.aud-c,.c-skin) .h5dr em svg,:where(.aud-c,.c-skin) .h5py em svg{width:9px;height:9px} :where(.aud-c,.c-skin) .h5crs{flex:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;align-content:center} :where(.aud-c,.c-skin) .h5cr{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0} :where(.aud-c,.c-skin) .h5cr .z5av{width:52px;height:52px} :where(.aud-c,.c-skin) .h5cr small{font-size:9.5px;color:var(--k-sub);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} :where(.aud-c,.c-skin) .h5cr em,:where(.aud-c,.c-skin) .h5py em{display:flex;align-items:center;gap:3px;font:700 9.5px "Instrument Sans",Arial,Helvetica,sans-serif;font-style:normal;background:var(--k-acc);color:var(--k-acc-ink);border-radius:999px;padding:2px 7px} :where(.aud-c,.c-skin) .h5drs{flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;min-height:0} :where(.aud-c,.c-skin) .h5dr{position:relative;display:flex;flex-direction:column;gap:5px;min-width:0;min-height:0} :where(.aud-c,.c-skin) .h5tb{position:relative;flex:none;aspect-ratio:4/5;border-radius:9px;overflow:hidden;background:var(--k-cbg,#D0D1D5)} :where(.aud-c,.c-skin) .h5tb .z6lp{position:absolute;top:0;left:50%;height:100%;width:auto;transform:translateX(-50%)} :where(.aud-c,.c-skin) .h5tb b{position:absolute;right:6px;bottom:6px;width:0;height:0;border-left:8px solid #FAF9F4;border-top:5px solid transparent;border-bottom:5px solid transparent;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))} :where(.aud-c,.c-skin) .h5who{display:flex;align-items:center;gap:4px;min-width:0} :where(.aud-c,.c-skin) .h5who .z5av{width:18px;height:18px} :where(.aud-c,.c-skin) .h5who small{font-size:9px;line-height:1.15;color:var(--k-sub);overflow:hidden} :where(.aud-c,.c-skin) .h5dr{container-type:inline-size} :where(.aud-c,.c-skin) .h5dr .h3ap{position:absolute;left:50%;top:0;margin-top:92.5%;font-size:10.5px;font-size:min(10.5px,10.2cqw);padding:.38em .86em;box-shadow:0 4px 12px rgba(0,0,0,.25)} :where(.aud-c,.c-skin) .h5dr em{position:absolute;right:5px;top:5px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--k-acc);color:var(--k-acc-ink)} :where(.aud-c,.c-skin) .h5py{display:flex;align-items:center;gap:8px;padding:4px 8px 4px 4px;border-radius:999px;background:var(--k-r2);font-size:11px} :where(.aud-c,.c-skin) .h5py .z5av{width:24px;height:24px} :where(.aud-c,.c-skin) .h5py small{flex:1;min-width:0;line-height:1.15;color:var(--k-sub);overflow:hidden} :where(.aud-c,.c-skin) .h5py span{font-weight:700;white-space:nowrap} :where(.aud-c,.c-skin) .t3ab .z5av{width:28px;height:28px;margin-bottom:2px} :where(.aud-c,.c-skin) .t5ph{position:relative;flex:none;width:34px;height:56px;border-radius:7px;background:#171717;padding:3px} :where(.aud-c,.c-skin) .t5sc{position:absolute;inset:3px;border-radius:4px;background:linear-gradient(170deg,#F6E4BF,#E8A33D);overflow:hidden;display:flex;justify-content:center;align-items:flex-end} :where(.aud-c,.c-skin) .t5sc .z5av{width:26px;height:26px;border-radius:50% 50% 0 0;margin-bottom:-2px;box-shadow:none} :where(.aud-c,.c-skin) .t5pb{position:absolute;left:6px;right:6px;bottom:6px;height:2px;border-radius:1px;background:rgba(23,23,23,.25);overflow:hidden} :where(.aud-c,.c-skin) .t5pb u{display:block;height:100%;background:#171717} :where(.aud-c,.c-skin) .t5ps{display:flex;align-items:center;gap:4px;font-size:11.5px} :where(.aud-c,.c-skin) .t5ps .z5av{width:24px;height:24px} :where(.aud-c,.c-skin) .t5ps span{margin-left:6px} :where(.aud-c,.c-skin) .r3go{position:absolute;left:0;right:0;top:170px;display:flex;justify-content:center} :where(.aud-c,.c-skin) .r3gw{position:relative;display:inline-grid} :where(.aud-c,.c-skin) .r3gb{position:relative;font:700 15px "Instrument Sans",Arial,Helvetica,sans-serif;border-radius:999px;padding:12px 22px;background:var(--k-acc);color:var(--k-acc-ink);white-space:nowrap} :where(.aud-c,.c-skin) .r3rg{position:absolute;inset:0;border-radius:999px;border:2px solid var(--k-acc);visibility:hidden} :where(.aud-c,.c-skin) .w3tick{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:2px;overflow:hidden;visibility:hidden} :where(.aud-c,.c-skin) .w3row{white-space:nowrap;font:900 44px/1 Archivo,Arial,sans-serif;color:transparent;-webkit-text-stroke:1px var(--k-line);animation:w3m 14s linear infinite} :where(.aud-c,.c-skin) .w3row.r{animation-direction:reverse} :where(.aud-c,.c-skin) .w3words{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:0} :where(.aud-c,.c-skin) .w3made,:where(.aud-c,.c-skin) .w3on{font-weight:900;font-size:46px;line-height:1;letter-spacing:-.02em} :where(.aud-c,.c-skin) .w3on{font-size:30px;margin:4px 0} :where(.aud-c,.c-skin) .w3k{position:relative;font:400 104px/1 Archivo,Arial,sans-serif;letter-spacing:-.03em;font-stretch:100%} :where(.aud-c,.c-skin) .w3l{display:inline-block} :where(.aud-c,.c-skin) .w3dot{position:absolute;right:-26px;bottom:14px;width:20px;height:20px;border-radius:50%;background:var(--k-acc);transform-origin:50% 100%} :where(.aud-c,.c-skin) .w3sh{position:absolute;right:-28px;bottom:10px;width:24px;height:5px;border-radius:50%;background:rgba(0,0,0,.45);transform:scale(0)} :where(.aud-c,.c-skin) .m6seg{position:relative;z-index:7;margin:0 0 10px} :where(.aud-c,.c-skin) .m5hd{display:grid} :where(.aud-c,.c-skin) .m5hd>*{grid-area:1/1} :where(.aud-c,.c-skin) .m5hl .z3w{visibility:hidden} :where(.aud-c,.c-skin) .m5st{min-height:350px} :where(.aud-c,.c-skin) .kz{--k-acc:#84C07C;--k-acc-ink:#131313} :where(.aud-c,.c-skin) .kz.cream,:where(.aud-c,.c-skin) .creamv{--k-acc:#171717;--k-acc-ink:#84C07C} :where(.aud-c,.c-skin) .creamv{--k-bg:#F1F0E9;--k-ink:#171717;--k-sub:#5C5B56;--k-r1:#FAF9F4;--k-r2:#E9E8E0;--k-line:#D3D2C9;background:var(--k-bg);color:var(--k-ink)} :where(.aud-c,.c-skin) .v3 .kzc.wide{max-width:560px} :where(.aud-c,.c-skin) .k6tk{width:12px;height:12px;flex:none;display:inline-block;vertical-align:-1px} :where(.aud-c,.c-skin) .k6sw{position:relative;display:inline-grid;overflow:hidden;vertical-align:bottom} :where(.aud-c,.c-skin) .k6sw>span{grid-area:1/1;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:4px} :where(.aud-c,.c-skin) .n6you{display:inline-block;margin-left:6px;font:700 9px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;background:#84C07C;color:#131313;border-radius:999px;padding:3px 6px;vertical-align:1px} :where(.aud-c,.c-skin) .p3bar i{transform-origin:0 50%} :where(.aud-c,.c-skin) .p3fb .p3bar{display:block;margin-top:3px} :where(.aud-c,.c-skin) .v3 .q3end{bottom:auto} :where(.aud-c,.c-skin) .v3 .q3cols{flex:none} :where(.aud-c,.c-skin) .y3cards{position:relative} :where(.aud-c,.c-skin) .v3 .y3end{justify-content:center;gap:18px} :where(.aud-c,.c-skin) .y6ring{position:absolute;border:2px solid var(--k-ink);border-radius:16px;pointer-events:none;visibility:hidden} :where(.aud-c,.c-skin) .y6br{min-height:1.3em;font-size:12px;color:var(--k-sub)} :where(.aud-c,.c-skin) .y6foot{display:flex;flex-direction:column;align-items:center;gap:10px} :where(.aud-c,.c-skin) .y6g{display:inline-flex;overflow:hidden;border-radius:999px;background:var(--k-ink);color:var(--k-bg);visibility:hidden} :where(.aud-c,.c-skin) .y6g>span{display:flex;align-items:center;gap:6px;padding:7px 14px;white-space:nowrap;font:700 12px/1.2 "Instrument Sans",Arial,Helvetica,sans-serif} :where(.aud-c,.c-skin) .y3c[role=button]{cursor:pointer} :where(.aud-c,.c-skin) .y3c:focus-visible{outline:2px solid #93A5FF;outline-offset:2px} :where(.aud-c,.c-skin) .kzc.k6mid{justify-content:center} :where(.aud-c,.c-skin) .v3 .t6st{flex:none;min-height:0} :where(.aud-c,.c-skin) .t6rec{position:absolute;right:5px;top:5px;width:5px;height:5px;border-radius:50%;background:#E5484D} :where(.aud-c,.c-skin) .t6pav{width:34px;height:34px} :where(.aud-c,.c-skin) .c6line{display:flex;flex-direction:column;gap:6px;align-self:stretch;visibility:hidden} :where(.aud-c,.c-skin) .c6n{font:900 28px/1 "Instrument Sans",Arial,Helvetica,sans-serif;letter-spacing:-.02em;font-variant-numeric:tabular-nums} :where(.aud-c,.c-skin) .c6ch{display:flex;gap:6px;flex-wrap:wrap} :where(.aud-c,.c-skin) .c6gh{padding:0;overflow:hidden;visibility:hidden;align-self:flex-start} :where(.aud-c,.c-skin) .c6gh>span{display:block;padding:8px 16px;white-space:nowrap} :where(.aud-c,.c-skin) .h6st{position:relative;flex:none} :where(.aud-c,.c-skin) .h6z{position:absolute;inset:0} :where(.aud-c,.c-skin) .h6tile{position:absolute;border-radius:18px;overflow:hidden;background:#2A2A28} :where(.aud-c,.c-skin) .h6la,:where(.aud-c,.c-skin) .h6lb{position:absolute;inset:0} :where(.aud-c,.c-skin) .h6la .z6lp{filter:grayscale(1) brightness(.7)} :where(.aud-c,.c-skin) .h6lb{background:var(--k-cbg)} :where(.aud-c,.c-skin) .h6tile .z6lp,:where(.aud-c,.c-skin) .d6ph .z6lp,:where(.aud-c,.c-skin) .w6t .z6lp{position:absolute;top:0;left:50%;height:100%;width:auto;transform:translateX(-50%)} :where(.aud-c,.c-skin) .h6ring{position:absolute;border:2px solid var(--k-ink);border-radius:18px;pointer-events:none;visibility:hidden} :where(.aud-c,.c-skin) .h6bd{position:absolute;z-index:3;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#D12020;color:#fff;font:700 11px/22px "Instrument Sans",Arial,Helvetica,sans-serif;text-align:center;box-shadow:0 0 0 2px var(--k-bg)} :where(.aud-c,.c-skin) .h6chips{position:absolute;inset:0;z-index:2} :where(.aud-c,.c-skin) .h6c{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:999px;background:var(--k-r1);border:1px solid var(--k-line);font-size:11px;line-height:1.2;white-space:nowrap;box-shadow:0 4px 10px rgba(0,0,0,.35)} :where(.aud-c,.c-skin) .h6c svg{width:12px;height:12px;flex:none;color:var(--k-sub)} :where(.aud-c,.c-skin) .h6dim{position:absolute;inset:-8px;background:var(--k-bg);z-index:3;visibility:hidden} :where(.aud-c,.c-skin) .h6slam{position:absolute;left:0;right:0;top:50%;margin-top:-20px;z-index:4;text-align:center;font:900 34px/40px var(--display);white-space:nowrap;letter-spacing:-.02em;visibility:hidden} :where(.aud-c,.c-skin) .h6brief{display:flex;flex-direction:column;gap:3px;align-self:center;width:min(100%,300px)} :where(.aud-c,.c-skin) .h6bh,:where(.aud-c,.c-skin) .h6bf{display:flex;align-items:center;justify-content:space-between;gap:8px} :where(.aud-c,.c-skin) .h6bn{font-size:15px} :where(.aud-c,.c-skin) .h6bf{margin-top:4px} :where(.aud-c,.c-skin) .h6fee{display:inline-flex;align-items:flex-end;gap:5px;font:900 20px/1 "Instrument Sans",Arial,Helvetica,sans-serif;font-variant-numeric:tabular-nums} :where(.aud-c,.c-skin) .h6cur{font-size:12px;font-weight:700;color:var(--k-sub)} :where(.aud-c,.c-skin) .h6paid .k6tk{color:#84C07C} :where(.aud-c,.c-skin) .d6st{position:relative;flex:none} :where(.aud-c,.c-skin) .d6ph{position:absolute;left:0;top:0;border-radius:18px;overflow:hidden;background:var(--k-cbg);border:3px solid #171717;box-shadow:0 10px 24px rgba(0,0,0,.18);z-index:2} :where(.aud-c,.c-skin) .d6pill{position:absolute;left:50%;bottom:9px;z-index:2;display:inline-flex;padding:4px 9px;border-radius:999px;background:#FAF9F4;color:#171717;font:700 10px/1.2 "Instrument Sans",Arial,Helvetica,sans-serif;white-space:nowrap} :where(.aud-c,.c-skin) .d6pill .k6tk{width:10px;height:10px;color:#84C07C} :where(.aud-c,.c-skin) .d6card{position:absolute;right:0;top:0;display:flex;flex-direction:column;align-items:flex-start;gap:7px} :where(.aud-c,.c-skin) .d6amt{display:flex;align-items:flex-end;gap:6px} :where(.aud-c,.c-skin) .d6n{font:900 30px/1 "Instrument Sans",Arial,Helvetica,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.01em} :where(.aud-c,.c-skin) .d6cur{order:-1;padding-bottom:3px;font:700 12px/1 "Instrument Sans",Arial,Helvetica,sans-serif;color:var(--k-sub)} :where(.aud-c,.c-skin) .d6ring{position:absolute;inset:-1px;border:2px solid var(--k-ink);border-radius:12px;pointer-events:none;visibility:hidden} :where(.aud-c,.c-skin) .kz .d6chip{position:absolute;left:0;top:0;z-index:3;background:#2C2C29;border-color:#2C2C29;color:#F1F0E9;font-weight:700} :where(.aud-c,.c-skin) .g6h{text-align:center} :where(.aud-c,.c-skin) .g6st{position:relative;flex:none} :where(.aud-c,.c-skin) .g6card{display:flex;flex-direction:column} :where(.aud-c,.c-skin) .g6hd{display:flex;align-items:center;gap:8px;padding-bottom:8px} :where(.aud-c,.c-skin) .g6hd b{flex:1;min-width:0;font-size:13px} :where(.aud-c,.c-skin) .kz .z5av.g6av{width:26px;height:26px} :where(.aud-c,.c-skin) .g6r{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:8px;align-items:center;border-top:1px solid var(--k-line);padding:7px 0} :where(.aud-c,.c-skin) .g6r b{font-size:12.5px} :where(.aud-c,.c-skin) .g6r .k6tk{color:#84C07C} :where(.aud-c,.c-skin) .g6pane{position:absolute;inset:0;pointer-events:none} :where(.aud-c,.c-skin) .g6sh{position:absolute;inset:0;border-radius:12px;background:rgba(245,244,239,.11)} :where(.aud-c,.c-skin) .g6cr{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none} :where(.aud-c,.c-skin) .g6cr path{fill:none;stroke:rgba(245,244,239,.75);stroke-width:1.3;stroke-linejoin:round} :where(.aud-c,.c-skin) .g6q{position:absolute;inset:0;pointer-events:none} :where(.aud-c,.c-skin) .kz .g6qc{position:absolute;left:0;top:0} :where(.aud-c,.c-skin) .g6flood,:where(.aud-c,.c-skin) .g6ring{position:absolute;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;pointer-events:none} :where(.aud-c,.c-skin) .g6flood{background:var(--k-acc)} :where(.aud-c,.c-skin) .g6ring{border:2px solid var(--k-ink);visibility:hidden} :where(.aud-c,.c-skin) .g6ring.g6r2{border-color:var(--k-acc)} :where(.aud-c,.c-skin) .w6top{display:flex;justify-content:center;margin-bottom:9px} :where(.aud-c,.c-skin) .w6grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px} :where(.aud-c,.c-skin) .w6t{position:relative;display:block;aspect-ratio:9/16;border-radius:10px;overflow:hidden;background:var(--k-cbg);border:0;padding:0;cursor:pointer} :where(.aud-c,.c-skin) .w6t:focus-visible{outline:2px solid #93A5FF;outline-offset:2px} :where(.aud-c,.c-skin) .w6ic{position:absolute;right:5px;top:5px;z-index:2;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(19,19,19,.72);color:#F5F4EF} :where(.aud-c,.c-skin) .w6ic>span{grid-area:1/1;display:grid;place-items:center} :where(.aud-c,.c-skin) .w6ic svg{width:12px;height:12px;display:block} :where(.aud-c,.c-skin) .w6bars{position:absolute;left:6px;bottom:6px;z-index:2;display:flex;align-items:flex-end;gap:2px;height:12px} :where(.aud-c,.c-skin) .w6bars i{display:block;width:3px;height:12px;border-radius:1px;background:#fff;transform-origin:50% 100%} :where(.aud-c,.c-skin) .w6wall{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:9px} :where(.aud-c,.c-skin) .w6made{font:900 26px/1.1 var(--display);white-space:nowrap;letter-spacing:-.01em} :where(.aud-c,.c-skin) .w6l,:where(.aud-c,.c-skin) .w6kl{display:inline-block} :where(.aud-c,.c-skin) .w6line{display:flex;align-items:baseline;gap:10px} :where(.aud-c,.c-skin) .w6on{font:700 18px/1 "Instrument Sans",Arial,Helvetica,sans-serif;color:var(--k-sub)} :where(.aud-c,.c-skin) .w6k{position:relative;font-family:var(--display);font-size:64px;line-height:.95;letter-spacing:-.02em} :where(.aud-c,.c-skin) .w6dot{position:absolute;right:-18px;bottom:12px;width:13px;height:13px;border-radius:50%;background:var(--k-acc)} :where(.aud-c,.c-skin) .h6tile .z6lp,:where(.aud-c,.c-skin) .r6th .z6lp,:where(.aud-c,.c-skin) .s6ph .z6lp,:where(.aud-c,.c-skin) .e6th .z6lp{position:absolute;top:0;left:50%;height:100%;width:auto;transform:translateX(-50%)} :where(.aud-c,.c-skin) .r6st{position:relative;flex:none;width:100%} :where(.aud-c,.c-skin) .r6card{position:absolute;left:0;top:0;display:flex;flex-direction:column;gap:4px} :where(.aud-c,.c-skin) .r6hd{display:flex;align-items:center;gap:8px;padding-bottom:4px} :where(.aud-c,.c-skin) .kz .z5av.r6av{width:28px;height:28px} :where(.aud-c,.c-skin) .r6who{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2} :where(.aud-c,.c-skin) .r6who b{font-size:12.5px} :where(.aud-c,.c-skin) .r6who .ks{font-size:10.5px} :where(.aud-c,.c-skin) .r6wl{display:flex;align-items:center;flex-wrap:wrap;gap:3px 6px;margin-top:2px} :where(.aud-c,.c-skin) .r6m{position:relative;isolation:isolate;padding:6px 8px 5px;margin-inline:-8px;border-radius:8px} :where(.aud-c,.c-skin) .r6m>.fill,:where(.aud-c,.c-skin) .e6r>.fill{position:absolute;inset:0;z-index:-1;border-radius:inherit;background:#2C2C29;transform-origin:0 50%} :where(.aud-c,.c-skin) .r6mh{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11.5px;line-height:1.2} :where(.aud-c,.c-skin) .r6v{display:inline-flex;align-items:flex-start;font:900 15px/1 "Instrument Sans",Arial,Helvetica,sans-serif;font-variant-numeric:tabular-nums} :where(.aud-c,.c-skin) .r6tr{position:relative;height:12px;margin-top:5px} :where(.aud-c,.c-skin) .r6ln{position:absolute;left:0;right:0;top:5px;height:2px;border-radius:1px;background:rgba(245,244,239,.14)} :where(.aud-c,.c-skin) .r6band{position:absolute;top:2px;height:8px;border-radius:4px;background:rgba(245,244,239,.2);transform-origin:0 50%} :where(.aud-c,.c-skin) .r6dot{position:absolute;top:1px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--k-ink);box-shadow:0 0 0 2px var(--k-r1)} :where(.aud-c,.c-skin) .r6ring{position:absolute;inset:-5px;border:2px solid var(--k-ink);border-radius:50%;visibility:hidden} :where(.aud-c,.c-skin) .r6ft{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 8px;padding-top:4px} :where(.aud-c,.c-skin) .r6leg{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;color:var(--k-sub)} :where(.aud-c,.c-skin) .r6leg i{width:14px;height:7px;border-radius:4px;background:rgba(245,244,239,.2)} :where(.aud-c,.c-skin) .kz .r6top{background:#2C2C29;border-color:#2C2C29;font-weight:700} :where(.aud-c,.c-skin) .r6top .k6tk,:where(.aud-c,.c-skin) .r6btn .k6tk,:where(.aud-c,.c-skin) .e6tk .k6tk,:where(.aud-c,.c-skin) .u6mv .k6tk{color:#84C07C} :where(.aud-c,.c-skin) .r6ph{position:absolute;right:0;top:0;display:flex;flex-direction:column;gap:6px;padding:8px;border-radius:18px;border:3px solid #3A3A37;background:#1B1B1A;overflow:hidden} :where(.aud-c,.c-skin) .r6fhd{display:flex;align-items:center;gap:5px;height:20px;font-size:9.5px;color:var(--k-sub);white-space:nowrap} :where(.aud-c,.c-skin) .kz .z5av.r6fav{width:18px;height:18px} :where(.aud-c,.c-skin) .r6pl{display:block;height:8px;border-radius:4px;background:rgba(245,244,239,.08)} :where(.aud-c,.c-skin) .r6pl:nth-of-type(2){width:70%} :where(.aud-c,.c-skin) .r6sc{position:absolute;left:0;top:0;z-index:5;width:150px;height:266px;display:flex;flex-direction:column;gap:6px;padding:9px;border-radius:14px;background:#F1F0E9;color:#171717;box-shadow:0 10px 24px rgba(0,0,0,.35)} :where(.aud-c,.c-skin) .r6th{position:relative;flex:1;min-height:0;border-radius:9px;overflow:hidden;background:var(--k-cbg)} :where(.aud-c,.c-skin) .r6big{font:900 18px/1.05 var(--display);letter-spacing:-.01em} :where(.aud-c,.c-skin) .r6sub{font-size:9px;line-height:1.25;color:#5C5B56} :where(.aud-c,.c-skin) .r6q{font-size:11px;font-weight:700} :where(.aud-c,.c-skin) .r6btn{display:flex;justify-content:center;padding:7px 8px;border-radius:999px;background:#171717;color:#F1F0E9;font:700 10.5px/1.2 "Instrument Sans",Arial,Helvetica,sans-serif} :where(.aud-c,.c-skin) .s6st{position:relative;flex:none;width:100%} :where(.aud-c,.c-skin) .s6ph{position:absolute;left:0;top:0;z-index:1;border-radius:16px;overflow:hidden;background:var(--k-cbg);border:3px solid #171717;box-shadow:0 10px 24px rgba(0,0,0,.18)} :where(.aud-c,.c-skin) .kz .s6box{position:absolute;right:0;top:0;z-index:3;display:flex;flex-direction:column;gap:9px;border:1px dashed #A9A89F} :where(.aud-c,.c-skin) .s6edge{position:absolute;left:-1px;top:-1px;overflow:visible;pointer-events:none} :where(.aud-c,.c-skin) .s6edge rect{fill:none;stroke:var(--k-ink);stroke-width:1.5} :where(.aud-c,.c-skin) .s6hd{display:flex;align-items:center;justify-content:space-between;gap:8px} :where(.aud-c,.c-skin) .s6tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px} :where(.aud-c,.c-skin) .s6shot{position:relative;z-index:2;min-width:0;display:flex;flex-direction:column;gap:4px;padding:7px 7px 6px;border-radius:8px;background:#fff;border:1px solid var(--k-line);box-shadow:0 4px 10px rgba(0,0,0,.08)} :where(.aud-c,.c-skin) .s6shot .lab2{font-size:8px} :where(.aud-c,.c-skin) .s6shot b{font:900 15px/1 "Instrument Sans",Arial,Helvetica,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap} :where(.aud-c,.c-skin) .s6bars{display:flex;align-items:flex-end;gap:2px;height:16px} :where(.aud-c,.c-skin) .s6bars i{flex:1;border-radius:1px;background:#171717;transform-origin:50% 100%} :where(.aud-c,.c-skin) .s6ft{display:flex;justify-content:center;font-size:12px;font-weight:700} :where(.aud-c,.c-skin) .s6ring{position:absolute;inset:-2px;border:2px solid var(--k-ink);border-radius:13px;pointer-events:none;visibility:hidden} :where(.aud-c,.c-skin) .e6hd{display:flex;align-items:center;gap:8px} :where(.aud-c,.c-skin) .e6hd .lab2{flex:1;min-width:0} :where(.aud-c,.c-skin) .kz .z5av.e6av{width:26px;height:26px} :where(.aud-c,.c-skin) .e6bars{position:relative;display:flex;flex-direction:column;gap:3px;padding-top:14px} :where(.aud-c,.c-skin) .e6r{position:relative;isolation:isolate;display:grid;grid-template-columns:18px minmax(0,104px) minmax(0,1fr) 34px;align-items:center;gap:8px;padding:5px 8px;margin-inline:-8px;border-radius:8px} :where(.aud-c,.c-skin) .e6th{position:relative;width:18px;height:32px;border-radius:4px;overflow:hidden;background:var(--k-cbg)} :where(.aud-c,.c-skin) .e6l{display:flex;align-items:center;flex-wrap:wrap;gap:3px 5px;font-size:12px;line-height:1.2} :where(.aud-c,.c-skin) .e6b{display:inline-block;padding:3px 5px;border-radius:999px;background:#84C07C;color:#131313;font:700 8.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase} :where(.aud-c,.c-skin) .e6t{position:relative;height:8px;border-radius:4px;background:rgba(245,244,239,.08)} :where(.aud-c,.c-skin) .e6f{position:absolute;left:0;top:0;bottom:0;border-radius:4px;transform-origin:0 50%} :where(.aud-c,.c-skin) .e6v{display:inline-flex;justify-content:flex-end;align-items:flex-start;font:900 13px/1 "Instrument Sans",Arial,Helvetica,sans-serif;font-variant-numeric:tabular-nums} :where(.aud-c,.c-skin) .e6us{position:absolute;overflow:visible;pointer-events:none;z-index:2} :where(.aud-c,.c-skin) .e6us line{stroke:rgba(245,244,239,.55);stroke-width:1.5} :where(.aud-c,.c-skin) .e6ul{position:absolute;font:9px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--k-sub);white-space:nowrap} :where(.aud-c,.c-skin) .e6cards{display:grid;grid-template-columns:1fr 1fr;gap:8px} :where(.aud-c,.c-skin) .e6c{display:flex;flex-direction:column;gap:3px;min-width:0} :where(.aud-c,.c-skin) .e6c b{font-size:14px;line-height:1.15} :where(.aud-c,.c-skin) .e6tk{display:flex;align-items:center;gap:5px} :where(.aud-c,.c-skin) .u6card{display:flex;flex-direction:column;align-items:center;gap:12px} :where(.aud-c,.c-skin) .u6hd{display:flex;align-items:center;justify-content:space-between;gap:8px;align-self:stretch} :where(.aud-c,.c-skin) .u6num{position:relative;font:900 40px/1 "Instrument Sans",Arial,Helvetica,sans-serif;letter-spacing:-.02em;font-variant-numeric:tabular-nums} :where(.aud-c,.c-skin) .u6n{display:inline-flex} :where(.aud-c,.c-skin) .u6n>*{overflow:hidden} :where(.aud-c,.c-skin) .u6ring{position:absolute;inset:-6px -10px;border:2px solid var(--k-ink);border-radius:12px;pointer-events:none;visibility:hidden} :where(.aud-c,.c-skin) .u6q{position:relative;height:50px} :where(.aud-c,.c-skin) .u6s{position:absolute;left:0;bottom:0;width:40px;display:flex;flex-direction:column;align-items:center;gap:4px} :where(.aud-c,.c-skin) .u6s .n6you{margin:0} :where(.aud-c,.c-skin) .u6me{z-index:2} :where(.aud-c,.c-skin) .kz .u6mv{background:#2C2C29;border-color:#2C2C29;color:#F1F0E9;font-weight:700} :where(.aud-c,.c-skin) .u6up{display:flex;flex-direction:column;gap:6px} :where(.aud-c,.c-skin) .u6uh{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px} :where(.aud-c,.c-skin) .u6uh .k6sw>span{justify-content:flex-start} :where(.aud-c,.c-skin) .u6pct{font-variant-numeric:tabular-nums} :where(.aud-c,.c-skin) .u6tr{display:block;height:6px;border-radius:3px;background:var(--k-r2);overflow:hidden} :where(.aud-c,.c-skin) .u6tr i{display:block;height:100%;background:var(--k-ink);transform-origin:0 50%} :where(.aud-c,.c-skin) .x6w{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center} :where(.aud-c,.c-skin) .kz .x6b{align-self:center;gap:8px} :where(.aud-c,.c-skin) .x6ar{display:inline-block} :where(.aud-c,.c-skin) .x6inv{margin:0;max-width:300px;font-size:12.5px;color:var(--k-sub)} :where(.aud-c,.c-skin) [data-k="nour-before"],:where(.aud-c,.c-skin) [data-k="nour-after"],:where(.aud-c,.c-skin) :has(> .z6lp[data-k="nour-before"]),:where(.aud-c,.c-skin) :has(> .z6lp[data-k="nour-after"]){--k-cbg:#0000FF} :where(.aud-c,.c-skin) .kz.v3[data-demo="head"] .kzs{min-height:0} :where(.aud-c,.c-skin) .h7st{min-height:240px} :where(.aud-c,.c-skin) .m5cta.h7cta{top:188px} :where(.aud-c,.c-skin) .h7hd .m5hl{font-size:30px;line-height:1.05} :root{--ink:#131313; --ink-2:#1C1C1A; --paper:#F5F4EF; --sub:#B4B4AE; --faint:#7E7D77; --line:#2C2C29; --cream:#F1F0E9; --cream-ink:#171717; --cream-sub:#5C5B56; --cream-line:#D3D2C9; --yel:#84C07C; --display:"Instrument Sans",Arial,Helvetica,sans-serif; --body:"Instrument Sans",Arial,Helvetica,sans-serif; --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --scene:520px; --nav:64px; --gut:16px; color-scheme:dark;} *{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav) + 8px);-webkit-text-size-adjust:100%} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{margin:0;background:var(--ink);color:var(--paper);font:400 17px/1.55 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden} a{color:inherit} .sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} .wrap{max-width:1120px;margin-inline:auto;padding-inline:var(--gut)} @media (min-width:600px){:root{--gut:32px}} .nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;height:var(--nav);background:rgba(19,19,19,.82);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s} .nav.scrolled{border-bottom-color:var(--line)} .nav .wrap{height:100%;display:flex;align-items:center;gap:20px} .mark{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font:900 22px/1 var(--display);letter-spacing:-.02em} .mark i{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--yel);color:var(--ink);font:900 17px/1 var(--display);font-style:normal} .tabs{display:flex;gap:2px;padding:3px;border-radius:999px;background:var(--ink-2);border:1px solid var(--line)} .tabs button{appearance:none;border:0;background:transparent;color:var(--sub);font:600 14px/1 var(--body);padding:10px 16px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:color .15s,background-color .2s} .tabs button[aria-selected="true"]{background:var(--paper);color:var(--ink)} .tabs button:hover:not([aria-selected="true"]){color:var(--paper)} .nav .tabs{margin-inline:auto} .nav .btn{margin-left:auto} .nav .tabs + .btn{margin-left:0} .tabs-m{display:none} @media (max-width:860px){.nav .tabs{display:none} .nav .tabs + .btn{margin-left:auto} .tabs-m{display:flex;justify-content:center;padding:12px var(--gut) 0} .tabs-m .tabs{width:100%;max-width:420px} .tabs-m .tabs button{flex:1;padding:12px 10px;font-size:13.5px}} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;border:0;background:var(--yel);color:var(--ink);font:700 16px/1 var(--body);text-decoration:none;cursor:pointer;transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s;white-space:nowrap} .btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px -10px rgba(226,222,71,.55)} .btn:active{transform:scale(.96);transition-duration:.07s} .btn.sm{min-height:40px;padding:0 18px;font-size:15px} .on-cream .btn{background:var(--cream-ink);color:var(--yel)} .on-cream .btn:hover{box-shadow:0 8px 24px -12px rgba(0,0,0,.45)} .link{font:600 16px/1 var(--body);color:var(--paper);text-decoration:none;border-bottom:1.5px solid rgba(245,244,239,.35);padding-bottom:3px;transition:border-color .2s;background:none;border-top:0;border-left:0;border-right:0;cursor:pointer} .link:hover{border-bottom-color:var(--yel)} .link span{display:inline-block;transition:transform .2s cubic-bezier(.22,1,.36,1)} .link:hover span{transform:translateX(4px)} :where(a,button,[tabindex]):focus-visible{outline:2px solid var(--yel);outline-offset:3px;border-radius:8px} .on-cream :where(a,button,[tabindex]):focus-visible{outline-color:var(--cream-ink)} .moon{background:var(--ink);overflow:hidden} .moon.gone{height:0;padding:0;overflow:hidden} .moon.gone .scene{visibility:hidden} .nav:not(.dark){background:rgba(241,240,233,.86);color:var(--cream-ink)} .nav.scrolled:not(.dark){border-bottom-color:var(--cream-line)} .nav:not(.dark) .mark i{background:var(--cream-ink);color:var(--yel)} .nav:not(.dark) .btn,.tabs-m.on-cream .btn{background:var(--cream-ink);color:var(--yel)} .nav:not(.dark) .btn:hover{box-shadow:0 8px 24px -12px rgba(0,0,0,.45)} .nav:not(.dark) .tabs,.on-cream .tabs{background:#E6E5DD;border-color:var(--cream-line)} .nav:not(.dark) .tabs button,.on-cream .tabs button{color:var(--cream-sub)} .nav:not(.dark) .tabs button[aria-selected="true"],.on-cream .tabs button[aria-selected="true"]{background:var(--cream-ink);color:var(--cream)} .nav:not(.dark) .tabs button:hover:not([aria-selected="true"]),.on-cream .tabs button:hover:not([aria-selected="true"]){color:var(--cream-ink)} .nav:not(.dark) :where(a,button):focus-visible{outline-color:var(--cream-ink)} .nav{transition:background-color .3s,color .3s,border-color .3s} .tabs-m.on-cream{background:var(--cream);color:var(--cream-ink)} .on-cream .link{color:var(--cream-ink);border-bottom-color:rgba(23,23,23,.3)} .band{padding-block:clamp(40px,5.5vw,80px)} .band.on-cream{background:var(--cream);color:var(--cream-ink)} .band + .band:not(.on-cream):not(.flush){border-top:1px solid var(--line)} .on-cream + .band,.band + .on-cream{border-top:0!important} .split{display:grid;grid-template-columns:minmax(0,1fr) var(--scene);gap:clamp(32px,5vw,72px);align-items:center} .split.flip{grid-template-columns:var(--scene) minmax(0,1fr)} .split.flip .copy{order:2} .solo{display:flex;flex-direction:column;align-items:center;text-align:center} .solo .scene{width:min(100%,var(--scene))} .eyebrow{display:inline-flex;align-items:center;gap:10px;font:600 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--yel);margin:0 0 16px} .eyebrow b{font-weight:600;color:var(--faint)} .on-cream .eyebrow{color:var(--cream-ink)} .on-cream .eyebrow b{color:var(--cream-sub)} .solo .eyebrow{margin-bottom:18px} .copy{max-width:470px} .copy .say{font:900 clamp(30px,3.6vw,42px)/1.04 var(--display);letter-spacing:-.02em;margin:0 0 20px;text-wrap:balance} .copy p:not(.eyebrow):not(.say){margin:0;font-size:clamp(17px,1.5vw,19.5px);line-height:1.6;color:var(--sub)} .on-cream .copy p:not(.eyebrow):not(.say){color:var(--cream-sub)} .copy .say + p,.copy p:not(.eyebrow) + p{margin-top:14px} .acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:26px} @media (max-width:860px){.split,.split.flip{grid-template-columns:minmax(0,1fr);gap:24px} .split.flip .copy{order:0} .split .scene{width:min(100%,var(--scene));justify-self:center} .copy{max-width:560px}} .scene.kz{border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible;margin:0} .scene.kz .kzs{border-radius:0} .scene .kbar{border:0;background:transparent;padding:10px 0 0;justify-content:flex-end;min-height:36px} .scene .kbar span{display:none} .scene .kbar button{font:600 12px/1 var(--body);color:var(--faint);background:transparent;border:1px solid var(--line);border-radius:999px;padding:7px 12px 7px 11px;cursor:pointer;opacity:0;transition:opacity .3s,color .15s,border-color .15s} .scene[data-state="complete"] .kbar button,.scene:hover .kbar button,.scene .kbar button:focus-visible{opacity:1} .scene .kbar button::before{content:"\21BA";margin-right:6px} .scene .kbar button:hover{color:var(--paper);border-color:var(--faint)} .on-cream .scene .kbar button{color:var(--cream-sub);border-color:var(--cream-line)} .on-cream .scene .kbar button:hover{color:var(--cream-ink);border-color:var(--cream-sub)} @media (prefers-reduced-motion:reduce){.scene .kbar{display:none}} .scene [data-cta]{cursor:pointer} .cascade{font:900 clamp(36px,5.6vw,72px)/1.02 var(--display);letter-spacing:-.03em;margin:0 0 clamp(18px,2.5vw,30px)} .cascade .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em} .cascade .ln > span{display:inline-block} .lines .ln > span{transform:translateY(105%)} .lines.in .ln > span{transform:none;transition:transform .5s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--i) * 110ms)} .solo .after{max-width:560px;margin:clamp(14px,2vw,24px) 0 0;color:var(--sub);font-size:clamp(17px,1.5vw,19.5px);line-height:1.6} :where(.aud-b) .scene[data-demo="wall"] .kzs{-webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent)} :where(.aud-b) figure.scene[data-demo="wall"] .kzs,:where(.aud-b) figure.scene[data-demo="pay"] .kzs,:where(.aud-b) figure.scene[data-demo="close"] .kzs{min-height:0} :where(.aud-b) figure.scene[data-demo="wall"] .z3st{min-height:282px} :where(.aud-b) figure.scene[data-demo="pay"] .z3st{min-height:272px} :where(.aud-b) figure.scene[data-demo="close"] .kzc{padding-block:24px 20px} :where(.aud-b) figure.scene[data-demo="hero"] .h3seg,:where(.aud-b) figure.scene[data-demo="moon"] .m6seg{display:none} :where(.aud-b) figure.scene[data-demo="hero"] .kzs{min-height:396px} @media (max-width:520px){:where(.aud-b) figure.scene[data-demo="hero"] .kzs{min-height:376px}} .moon{display:flex;flex-direction:column;align-items:center;padding:clamp(12px,2.5vw,32px) var(--gut) clamp(8px,2vw,24px);position:relative} .moon .scene{width:min(100%,680px)} .versus .wrap{max-width:980px} .band.has-corner{position:relative;padding-bottom:calc(clamp(40px,5.5vw,80px) + 28px)} @media (max-width:860px){section[aria-labelledby="h-brief"] .split.flip .copy{order:2}} .eyebrow.corner{position:absolute;left:max(var(--gut),calc((100% - 1120px)/2 + var(--gut)));bottom:clamp(14px,2vw,26px);margin:0} :where(.aud-b) figure.scene[data-demo="pick"] .kh.s,:where(.aud-b) figure.scene[data-demo="tech"] .kh.s{display:none} .versus .lead{font:900 clamp(26px,3.2vw,38px)/1.12 var(--display);letter-spacing:-.015em;margin:0 0 12px;max-width:820px;text-wrap:balance} .versus .vsub{font-size:clamp(16px,1.6vw,19px);line-height:1.45;margin:0 0 clamp(24px,3.5vw,40px);max-width:640px;opacity:.8;text-wrap:pretty} .vt{width:100%;border-collapse:collapse;font-size:clamp(15.5px,1.4vw,17.5px);line-height:1.45} .vt th{font:600 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;text-align:left;padding:0 18px 16px 0;color:var(--cream-sub)} .vt th:last-child{color:var(--cream-ink)} .vt td{padding:16px 18px 16px 0;border-top:1px solid var(--cream-line);vertical-align:top;width:50%} .vt td:first-child{color:var(--cream-sub)} .vt td:last-child{color:var(--cream-ink);font-weight:600;padding-left:34px;position:relative} .vt td:last-child::before{content:"";position:absolute;left:0;top:17px;width:20px;height:20px;border-radius:50%;background:var(--cream-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3 6-6.4' fill='none' stroke='%2384C07C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat} .vt tr{opacity:1} @media (max-width:640px){.vt thead{display:none} .vt tr{display:block;padding:14px 0;border-top:1px solid var(--cream-line)} .vt td{display:block;width:auto;border:0;padding:0} .vt td:first-child{font-size:14.5px;margin-bottom:8px;text-decoration:line-through;text-decoration-color:rgba(92,91,86,.5)} .vt td:last-child::before{top:1px}} .reveal-row{opacity:0;transform:translateY(14px)} .reveal-row.in{opacity:1;transform:none;transition:opacity .4s cubic-bezier(.33,1,.68,1),transform .4s cubic-bezier(.33,1,.68,1)} .closer{transition:background-color .4s cubic-bezier(.33,1,.68,1),color .4s} .closer:has(.scene.cream){background:var(--cream);color:var(--cream-ink);border-top-color:transparent!important} .closer:has(.scene.cream) .btn{background:var(--cream-ink);color:var(--yel)} .closer:has(.scene.cream) .scene .kbar button{color:var(--cream-sub);border-color:var(--cream-line)} .faq .split{align-items:start} @media (min-width:861px){.faq .split{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}} .faq h2{font:900 clamp(32px,4vw,48px)/1.02 var(--display);letter-spacing:-.02em;margin:0;text-wrap:balance} @media (min-width:861px){.faq h2{position:sticky;top:calc(var(--nav) + 40px)}} .fq{border-top:1px solid var(--line)} .fq:last-child{border-bottom:1px solid var(--line)} .fq button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;background:none;border:0;color:var(--paper);font:700 clamp(17px,1.6vw,19.5px)/1.3 var(--body);text-align:left;cursor:pointer;transform-origin:left center} .fq .chev{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font:500 18px/1 var(--body);color:var(--sub);transition:transform .2s cubic-bezier(.65,0,.35,1),background-color .2s,color .2s,border-color .2s} .fq button[aria-expanded="true"] .chev{transform:rotate(45deg);background:var(--yel);border-color:var(--yel);color:var(--ink)} .fq .ans{height:0;overflow:hidden} .fq .ans p{margin:0;padding:0 48px 24px 0;color:var(--sub);font-size:clamp(16px,1.4vw,17.5px);line-height:1.6;max-width:620px} .why .row{padding-block:clamp(32px,4.5vw,60px);border-top:1px solid var(--line)} .why .row:first-child{border-top:0;padding-top:clamp(20px,3vw,40px)} .why .num{font:600 12px/1 var(--mono);letter-spacing:.12em;color:var(--yel);margin-bottom:14px} .why h2{font:900 clamp(34px,6vw,76px)/1 var(--display);letter-spacing:-.025em;margin:0;max-width:980px;text-wrap:balance} .why .row p{margin:14px 0 0;font-size:clamp(18px,1.8vw,22px);line-height:1.5;color:var(--sub);max-width:640px} .why .row.last{padding-bottom:clamp(48px,6vw,88px)} .why .row.last .acts{margin-top:26px} .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em} .w > span{display:inline-block} .rise .w > span{transform:translateY(105%)} .rise.in .w > span{transform:none;transition:transform .333s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--i) * 50ms)} .why .stack{display:flex;flex-wrap:wrap;gap:.18em .34em} footer{border-top:1px solid var(--line);padding:28px 0 36px;color:var(--faint);font-size:13.5px} footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between} footer .mark{font-size:18px;color:var(--paper)} footer .mark i{width:24px;height:24px;font-size:14px;border-radius:7px} .toast{position:fixed;left:50%;bottom:24px;translate:-50% 0;z-index:40;max-width:calc(100% - 32px);background:var(--paper);color:var(--ink);font:600 14px/1.4 var(--body);padding:12px 18px;border-radius:12px;box-shadow:0 12px 32px -12px rgba(0,0,0,.6);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .2s,transform .2s cubic-bezier(.22,1,.36,1)} .toast.on{opacity:1;transform:none} [hidden]{display:none!important} /* ---------- site: one page, two audiences ---------- */ html.gated{overflow:hidden} html.k-dl .gate{display:none!important} .nav .wrap{gap:14px} .aud-sw{display:flex;gap:2px;padding:3px;border-radius:999px;background:#E6E5DD;border:1px solid var(--cream-line);margin-inline:auto} .aud-sw button{appearance:none;border:0;background:transparent;color:var(--cream-sub);font:600 14px/1 var(--body);padding:10px 15px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:color .15s,background-color .2s} .aud-sw button[aria-pressed="true"]{background:var(--cream-ink);color:var(--cream)} .aud-sw button:hover:not([aria-pressed="true"]){color:var(--cream-ink)} .nav .aud-sw + .btn{margin-left:0} .t-st{display:none} @media (max-width:560px){.aud-sw .t-lg{display:none}.aud-sw .t-st{display:inline}.aud-sw button{padding:10px 13px}} @media (max-width:440px){.nav .nav-cta{display:none}.aud-sw{margin-right:0}} @media (max-width:520px){.tabs-m .t-lg{display:none}.tabs-m .t-st{display:inline}} .tabs-m{display:flex;justify-content:center;padding:12px var(--gut) 0} .tabs-m .tabs{width:100%;max-width:520px} .tabs-m .tabs button{flex:1;padding:12px 10px;font-size:14px} /* the lift: one screen of night sky under the question, then the chosen side's moon header, scaled to fill it (Refai, 14 Oct: "full screen") */ .lift{position:relative;height:calc(100svh - var(--nav));min-height:480px;overflow:hidden;background:var(--ink)} .lift .stars{position:absolute;inset:0;width:100%;height:100%;display:block} .lift .stars .tw{animation:s-tw 3.2s ease-in-out infinite;animation-delay:var(--d)} @keyframes s-tw{0%,100%{opacity:1}50%{opacity:.25}} @media (prefers-reduced-motion:reduce){.lift .stars .tw{animation:none}} #lift .lift-s{position:absolute;inset:0} #lift figure.scene{position:absolute;inset:0;margin:0;width:auto;max-width:none;border:0;border-radius:0;box-shadow:none;background:transparent} #lift .kz{background:transparent} #lift .kzs{position:absolute;inset:0;display:block;min-height:0;background:transparent;overflow:visible;border-radius:0} #lift .kzc{position:absolute;left:50%;top:0;width:380px;max-width:none;margin:0;transform-origin:50% 0} #lift .kbar{display:none} /* blocks: the page moves a screen at a time (Refai, 14 Oct: "a forced stroll... it's in blocks") */ html{scroll-snap-type:y mandatory;scroll-padding-top:var(--nav)} html.gated{scroll-snap-type:none} .lift,.site main .band,.site .why .row,.site .tabs-m{scroll-snap-align:start;scroll-snap-stop:always} .site footer{scroll-snap-align:end} .site main .band,.site .why .row{min-height:calc(100svh - var(--nav));display:flex;flex-direction:column;justify-content:center;padding-block:clamp(20px,3vh,56px)} .site main .band.has-corner{padding-bottom:calc(clamp(20px,2.4vh,44px) + 28px)} @media (min-width:900px){.site main .band.has-corner{padding-bottom:clamp(20px,3vh,56px)}.site main .band .eyebrow.corner{bottom:clamp(12px,2vh,22px)}} /* every scene is scaled to fill its block, up or down, from its top edge; fitScenes() sets it */ .site figure.scene[data-k]{transform-origin:50% 0} .site main .band > .wrap{width:100%} .site .tabs-m{--tabs:60px;height:var(--tabs);box-sizing:border-box} .site .tabs-m + [role="tabpanel"] > .band:first-child{min-height:calc(100svh - var(--nav) - 60px);scroll-snap-align:none} .site .why .row{border-top:0} /* one column, centred: copy over scene (Refai, 14 Oct: "This was not a horizontal it was vertical") */ .site .split,.site .split.flip{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:clamp(14px,2.4vh,30px)} .site .split.flip .copy,.site section[aria-labelledby] .split.flip .copy{order:0} .site .split .copy{max-width:640px;margin-inline:auto} .site .split .copy p{margin-inline:auto} .site .acts{justify-content:center} .site .split .scene{width:min(100%,var(--scene));justify-self:center} .site .find-g{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:18px} .site .find-g p{margin-inline:auto} .site .faq .split{grid-template-columns:minmax(0,1fr);text-align:left} .site .faq h2{position:static;text-align:center} .site .faq .fqs{width:100%;max-width:720px} .site .versus .wrap{text-align:center} .site .versus .lead,.site .versus .vsub{margin-inline:auto} .site .vt{max-width:860px;margin-inline:auto;text-align:left} /* wide screens (landscape, 1024 px and up): copy on the left, scene on the right, the scene sized to the block height */ @media (min-width:1024px) and (min-aspect-ratio:4/3){ .site .wrap.split{max-width:1360px} .site .split,.site .split.flip{grid-template-columns:minmax(0,1fr) var(--sw,var(--scene));justify-items:start;text-align:left;align-items:center;gap:clamp(32px,5vw,72px)} .site .split .copy{max-width:560px;margin-inline:0} .site .split .copy p{margin-inline:0} .site .split .acts{justify-content:flex-start} .site .split .scene{width:var(--scene);justify-self:start} /* blocks whose words come after the scene (place, the creator close): the words go left too */ .site .band > .wrap.duo{display:grid;max-width:1360px;grid-template-columns:minmax(0,1fr) var(--sw,var(--scene));grid-template-rows:1fr auto auto 1fr;column-gap:clamp(32px,5vw,72px);text-align:left} .site .wrap.duo > figure.scene{grid-column:2;grid-row:1 / 5;align-self:center;width:var(--scene);justify-self:start;margin:0} .site .wrap.duo > .after{grid-column:1;grid-row:2;margin:0;max-width:560px;text-align:left} .site .wrap.duo > .link{grid-column:1;grid-row:3;justify-self:start;margin-top:clamp(18px,2.5vw,28px)} } /* Refai 14 Oct: fill the screen and let the copy carry more weight. */ .site .campaign-overview .wrap.split,.site section[aria-labelledby="h-pick"] .wrap.split{max-width:none;padding-inline:clamp(24px,3vw,64px)} .site .campaign-overview .copy,.site section[aria-labelledby="h-pick"] .copy{max-width:none} .site .campaign-overview .copy .say,.site section[aria-labelledby="h-pick"] .copy .say{font-size:clamp(38px,4.3vw,78px);line-height:1.04;letter-spacing:-.035em;text-wrap:pretty} .site .campaign-overview .copy p:not(.eyebrow):not(.say),.site section[aria-labelledby="h-pick"] .copy p:not(.eyebrow):not(.say){font-size:clamp(20px,1.85vw,30px);line-height:1.45;max-width:600px} .site .brief-stage{max-width:none;display:flex;justify-content:center;padding-inline:clamp(16px,3vw,64px)} .site .brief-stage figure.scene{margin-inline:auto;width:min(100%,760px);flex:none} .site figure[data-demo="brief"] .kzc{max-width:640px} .site figure[data-demo="brief"] .b3h{font-size:38px} .site figure[data-demo="place"] .kzc{max-width:600px} .site figure[data-demo="pick"] .z5av[data-k="unbox"]{background:#D12020} .site figure[data-demo="pick"] .z5av[data-k="outfit"]{background:#0000FF} .site figure[data-demo="pick"] .z5av[data-k="ring"]{background:#84C07C} .site figure[data-demo="pick"] .z5av[data-k="jacks"]{background:#098C4D} .site figure[data-demo="pick"] .z5av[data-k="gamer"]{background:#B7A0EF} @media(max-width:1023px),(max-aspect-ratio:4/3){ .site .campaign-overview .copy,.site section[aria-labelledby="h-pick"] .copy{max-width:680px} .site .campaign-overview .copy .say,.site section[aria-labelledby="h-pick"] .copy .say{font-size:clamp(34px,5.2vw,62px)} } .site figure[data-demo="place"] .q3lines div{font-size:36px;line-height:1.08;letter-spacing:-.035em} .site figure[data-demo="place"] .q3lines{text-align:center;gap:5px} .site figure[data-demo="place"] .q3one{font-size:52px;text-align:center} .site figure[data-demo="place"] .q3svg{top:140px;height:calc(100% - 140px)} .site figure[data-demo="place"] .q3end{top:68px} .site figure[data-demo="pay"] .y3s{font-size:48px;line-height:1.05} .site figure[data-demo="pay"] .y3small.kh{font-size:42px;line-height:1.04} .site figure[data-demo="pay"] .y3fighter{position:absolute;left:-90px;top:-60px;width:140px;height:160px;overflow:visible;visibility:hidden;z-index:5} .site .aud-b section[aria-labelledby="h-pay"] .wrap{max-width:none} .site .aud-b figure[data-demo="pay"]{width:min(100%,900px)} .site .aud-b figure[data-demo="pay"] .kzc{max-width:720px} .site .aud-b figure[data-demo="pay"] .z3st{min-height:500px} .site .aud-b figure[data-demo="pay"] .y3cac{font-size:140px} .site .aud-b figure[data-demo="pay"] .y3end{justify-content:center;gap:22px} .site .aud-b .cac-insights{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} .site .aud-b .cac-insight{align-items:flex-start;text-align:left;padding:18px 14px;gap:12px} .site .aud-b .cac-insight h3{font-size:21px;line-height:1.08;letter-spacing:-.025em;margin:0} .site .aud-b .cac-insight p{font-size:15px;line-height:1.4;margin:0;color:#C6C5BD} .site .aud-b .cac-insight p span{font:inherit;color:inherit} .site .aud-b :is(.versus,.merge-before) .wrap{max-width:1500px;padding-inline:clamp(24px,4vw,72px)} .site .aud-b :is(.versus,.merge-before) .lead{font-size:clamp(40px,4.4vw,72px);max-width:1200px;line-height:1.04} .site .aud-b :is(.versus,.merge-before) .vsub{font-size:clamp(21px,1.9vw,29px);max-width:1000px} .site .aud-b :is(.versus,.merge-before) .vt{max-width:none;font-size:clamp(19px,1.7vw,26px)} .site .aud-b :is(.versus,.merge-before) .vt th{font-size:18px;padding-bottom:20px} .site .aud-b :is(.versus,.merge-before) .vt td{padding-block:21px;padding-right:30px} .site .aud-b :is(.versus,.merge-before) .vt td:last-child::before{top:25px} @media(max-width:640px){ .site .aud-b .cac-insights{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .site .aud-b .cac-insight{padding:12px 10px;gap:8px} .site .aud-b .cac-insight h3{font-size:18px} .site .aud-b .cac-insight p{font-size:14px} .site .aud-b figure[data-demo="pay"] .z3st{min-height:650px} .site .aud-b figure[data-demo="pay"] .y3cac{font-size:106px} .site .aud-b :is(.versus,.merge-before) .vt td{padding:7px 0} .site .aud-b :is(.versus,.merge-before) .vt td:first-child{font-size:18px} .site .aud-b :is(.versus,.merge-before) .vt td:last-child{padding-left:30px} .site .aud-b :is(.versus,.merge-before) .vt td:last-child::before{top:11px} } .site .aud-b .oldway-act{position:relative;width:min(100%,420px);height:135px;margin:0 0 4px} .site .aud-b .oldway-act svg{position:absolute;left:0;top:0;width:340px;height:150px;overflow:visible} .site .aud-b .oldway-act strong{position:absolute;left:145px;top:52px;font-size:30px;letter-spacing:-.03em} .site .aud-b .oldway-act strong span{position:absolute;left:-4px;right:-4px;top:53%;height:3px;background:#D12020;transform:scaleX(0)} .site .aud-b .oldway-act button{position:absolute;left:0;bottom:0;border:0;background:none;font:12px var(--body);color:var(--cream-sub);cursor:pointer} .site .aud-b .vt td.slashed .oldway-text{text-decoration:line-through;text-decoration-color:rgba(92,91,86,.5);text-decoration-thickness:1px} @media(max-width:640px){.site .aud-b .oldway-act{height:125px}.site .aud-b .oldway-act svg{width:300px;height:132px}.site .aud-b .oldway-act strong{left:125px;top:45px;font-size:26px}} /* Comparison and campaign dashboard are now two phases of one block. */ .site .unified-place{position:relative;overflow:hidden} .site .merge-before{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:3;color:var(--cream-ink);background:var(--cream);transform-origin:50% 50%} .site .aud-b .merge-before>.wrap{width:100%;max-width:1300px;padding:24px 36px;text-align:center;transform-origin:50% 50%;flex:none} .site .aud-b .merge-before .lead{font:900 clamp(36px,4vw,66px)/1.04 var(--display);letter-spacing:-.03em;margin:0 auto 14px;max-width:1150px} .site .aud-b .merge-before .vsub{font-size:clamp(19px,1.8vw,26px);line-height:1.4;margin:0 auto 8px;max-width:1100px} .site .aud-b .merge-before .oldway-act{height:108px;margin-bottom:0} .site .aud-b .merge-before .oldway-act svg{width:300px;height:132px;top:-12px} .site .aud-b .merge-before .oldway-act strong{top:34px;left:132px;font-size:28px} .site .aud-b .merge-before .vt{font-size:clamp(18px,1.5vw,23px);text-align:left} .site .aud-b .merge-before .vt th{padding-bottom:12px} .site .aud-b .merge-before .vt td{padding-block:13px} .site .aud-b .merge-before .vt td:last-child::before{top:16px} .site .merge-after{opacity:0;visibility:hidden} .site .merge-replay{position:absolute;right:24px;bottom:15px;z-index:5;border:1px solid #777;border-radius:999px;padding:8px 14px;background:#F1F0E9;color:#171717;font:13px var(--body);cursor:pointer} .site .unified-place .kbar{visibility:hidden} @media(max-width:640px){.site .aud-b .merge-before>.wrap{padding:20px 24px}.site .aud-b .merge-before .lead{font-size:36px}.site .aud-b .merge-before .vsub{font-size:19px}.site .aud-b .merge-before .vt td{font-size:18px;padding-block:5px}.site .aud-b .merge-before .vt td:last-child::before{top:9px}} @media(max-width:640px){ .site .aud-b .merge-before .vt thead{display:table-header-group} .site .aud-b .merge-before .vt tr{display:table-row;padding:0;border:0} .site .aud-b .merge-before .vt td{display:table-cell;width:50%;font-size:14.5px;line-height:1.35;padding:10px 10px 10px 0;border-top:1px solid var(--cream-line)} .site .aud-b .merge-before .vt td:last-child{padding-left:21px} .site .aud-b .merge-before .vt td:last-child::before{width:15px;height:15px;background-size:15px;top:12px} .site .aud-b .merge-before .vt th{font-size:12px} .site .aud-b .merge-before .lead{font-size:32px} .site .aud-b .merge-before .vsub{font-size:16px} } /* the k mark without the yellow (Refai, 14 Oct: "the logo should be not having the yellow") */ .site .b5sell .b5logo{width:48px;height:48px} .mark i{background:var(--paper);color:var(--ink)} .nav:not(.dark) .mark i{color:var(--cream)} /* Klyp's own type for the small labels, not the mono (Refai, 14 Oct: "welcome to klyp is not our font") */ .site .eyebrow,.site .vt th,.site .why .num{font-family:var(--body);font-size:13px;letter-spacing:.06em} @media (max-width:640px){.site .vt tr{padding-block:9px}.site .vt td:first-child{margin-bottom:4px}} /* the welcome question */ .gate{--gb:16px;--ga:.62;position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:24px var(--gut);background:rgba(19,19,19,var(--ga));-webkit-backdrop-filter:blur(var(--gb));backdrop-filter:blur(var(--gb));color:var(--paper);outline:0} .g-in{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:680px} .g-mark{font-size:24px;color:var(--paper)} .g-eye{font:600 13px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--yel);margin:24px 0 16px} .g-q{font:900 clamp(36px,6.4vw,68px)/1.02 var(--display);letter-spacing:-.025em;margin:0;text-wrap:balance} .g-sub{margin:16px 0 30px;font-size:clamp(17px,1.6vw,19px);line-height:1.5;color:var(--sub)} .g-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:12px} .g-pill,.g-disc{display:inline-grid;place-items:center;min-height:56px;padding:0 30px;border-radius:999px;border:0;background:var(--paper);color:var(--ink);font:700 17px/1 var(--body);white-space:nowrap} .g-pill{cursor:pointer;transition:box-shadow .2s cubic-bezier(.22,1,.36,1),background-color .2s} .g-pill:hover{background:#FFFFFF;box-shadow:0 0 0 4px rgba(245,244,239,.18),0 12px 30px -12px rgba(245,244,239,.5)} .g-pill:focus-visible{outline:2px solid var(--yel);outline-offset:4px} .g-disc{position:fixed;left:0;top:0;z-index:3;padding:0;overflow:hidden;pointer-events:none} .g-rocket{position:fixed;left:0;top:0;z-index:4;width:84px;height:168px;visibility:hidden;pointer-events:none} .g-rb,.g-rb svg{display:block;width:100%;height:100%;overflow:visible} .g-trail{position:fixed;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible} .g-puff{position:fixed;left:0;top:0;z-index:3;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:rgba(245,244,239,.6);pointer-events:none} /* creator side: the text-only "Find briefs" band, and headlines the copy carries instead of the scene */ .find-g{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:end} .find-g h2{font:900 clamp(40px,6vw,76px)/1 var(--display);letter-spacing:-.025em;margin:0;text-wrap:balance} .find-g p{margin:0;font-size:clamp(17px,1.5vw,19.5px);line-height:1.6;color:var(--sub);max-width:520px} @media (max-width:860px){.find-g{grid-template-columns:minmax(0,1fr);gap:18px}} :where(.aud-c) figure.scene[data-demo="numbers"] .kh.s,:where(.aud-c) figure.scene[data-demo="runs"] .kh.s,:where(.aud-c) figure.scene[data-demo="feed"] .kh.s{display:none} .wide-scene{--scene:560px} .closer h2.vis{font:900 clamp(32px,4vw,48px)/1.02 var(--display);letter-spacing:-.02em;margin:0 0 clamp(18px,2.5vw,28px);text-wrap:balance} .closer .solo > .link{margin-top:clamp(18px,2.5vw,28px)} .closer .after,.closer .solo > .link{transition:color .4s cubic-bezier(.33,1,.68,1),border-color .4s} .closer:has(.scene.cream) .after{color:var(--cream-sub)} .closer:has(.scene.cream) .link{color:var(--cream-ink);border-bottom-color:rgba(23,23,23,.28)} .closer:has(.scene.cream) .link:hover{border-bottom-color:var(--cream-ink)} .closer:has(.scene.cream) :where(a,button,[tabindex]):focus-visible{outline-color:var(--cream-ink)} footer .link{font-size:14px} /* scene patches (hero $$$, earn in full, four ways to get paid) */ .h6amt .odx{display:inline-block} .y3full{font:900 44px/1.05 var(--display);letter-spacing:-.03em;color:var(--k-ink);text-align:center} .d6ways{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:14px} .d6wl{display:flex;flex-wrap:wrap;justify-content:center;gap:6px} /* Readable tasks become the same icons, then converge on Klyp. */ .site .aud-b .merge-before>.wrap{max-width:1120px} .site .oldway-label{font:700 16px/1.2 var(--display);text-transform:uppercase;letter-spacing:.12em;margin:0 0 16px} .site .aud-b .merge-before .lead{font-size:clamp(40px,5.2vw,80px);margin-bottom:30px} .site .old-task-stage{position:relative;width:100%;margin:auto} .site .old-task-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} .site .old-task{display:flex;align-items:center;gap:18px;text-align:left;min-height:94px;border:1px solid #D5D4CA;border-radius:20px;padding:10px 18px;background:#FAF9F5;transform-origin:50% 50%} .site .old-task-icon{display:block;flex:0 0 76px;width:76px;height:76px} .site .old-task-icon svg{width:100%;height:100%;overflow:visible} .site .old-task-text{font:650 clamp(20px,1.85vw,28px)/1.25 var(--display);letter-spacing:-.02em} .site .oldway-hub{position:absolute;left:50%;top:15%;width:250px;transform:translate(-50%,-50%);visibility:hidden;text-align:center} .site .oldway-hub img{display:block;width:112px;height:112px;border-radius:24px;margin:0 auto 18px} .site .oldway-hub strong{display:block;font:800 36px/1.1 var(--display);letter-spacing:-.03em} .site .faq .split{display:flex!important;flex-direction:column;align-items:center;max-width:1100px;margin-inline:auto} .site .faq .fqs{max-width:900px;margin-inline:auto;align-self:center} .site .faq h2{width:100%;text-align:center;margin-inline:auto} .site .aud-b section[aria-labelledby="h-tech"]{padding-bottom:80px} .site .aud-b section[aria-labelledby="h-tech"]>.wrap{max-width:1800px} .site .aud-b section[aria-labelledby="h-tech"] .copy{max-width:none} .site .aud-b #h-tech{font-size:clamp(56px,6vw,104px);line-height:1.01;letter-spacing:-.045em} @media(max-width:640px){ .site .aud-b .merge-before .lead{font-size:36px;margin-bottom:22px} .site .oldway-label{font-size:12px;margin-bottom:10px} .site .old-task-grid{grid-template-columns:1fr;gap:8px} .site .old-task{min-height:60px;padding:7px 12px;gap:13px;border-radius:14px} .site .old-task-icon{flex-basis:46px;width:46px;height:46px} .site .old-task-text{font-size:18px} .site .oldway-hub img{width:90px;height:90px} .site .oldway-hub strong{font-size:30px} .site .aud-b #h-tech{font-size:clamp(44px,11.5vw,66px)} .site .aud-b figure[data-demo="tech"] .t3r{font-size:13.5px} } /* Creator side shares the brand type scale and full-width scene framing. */ .site .aud-c .copy .say{font:900 clamp(38px,4.3vw,78px)/1.04 var(--display);letter-spacing:-.035em} .site .aud-c .copy>p:not(.say){font-size:clamp(20px,1.85vw,30px);line-height:1.5} .site .aud-c .creator-center{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:1500px;gap:26px} .site .aud-c .creator-center figure{width:min(100%,900px);margin-inline:auto;flex:none} .site .aud-c .creator-center>.after{max-width:1000px;font-size:clamp(22px,2vw,30px);line-height:1.45} .site .aud-c .creator-earn .kzc{max-width:700px} .site .aud-c .creator-earn .y3full{font-size:clamp(56px,6vw,90px)} .site .aud-c .creator-earn .y3small{font-size:34px} .site .aud-c .creator-earn .z3st{min-height:430px} .site .aud-c .creator-earn .y3end{justify-content:center;gap:28px} .site .aud-c .creator-earn .y6foot{gap:18px} .site .aud-c .creator-earn .y3lead,.site .aud-c .creator-earn .y6g{font-size:22px} .site .aud-c .creator-earn .y3s{font-size:48px} .site .aud-c .creator-earn .y3cac{font-size:140px} .site .aud-c .creator-place .kzc{max-width:620px} .site .aud-c .creator-place .q3lines,.site .aud-c .creator-place .q3one{font-size:42px} .site .aud-c .on-cream .kz{--k-bg:#F1F0E9;--k-ink:#171717;--k-sub:#5C5B56;--k-r1:#FAF9F4;--k-r2:#E9E8E0;--k-line:#D3D2C9;--k-acc:#171717;--k-acc-ink:#84C07C;background:var(--k-bg)} .site .aud-c .creator-browse .kzs{padding:0;min-height:0} .site .aud-c .creator-browse .kzc{max-width:none;width:100%;padding:0} .site .aud-c .creator-browse figure{max-width:1060px;width:100%;overflow:visible} .site .aud-c .creator-browse h2{font:900 clamp(38px,5vw,76px)/1.05 var(--display);letter-spacing:-.035em;margin:0} .site .cb-app{border:1px solid #454541;border-radius:24px;overflow:hidden;background:#202020;color:#F5F4EF;text-align:left;font-family:var(--body)} .site .cb-top{display:flex;align-items:center;gap:14px;padding:20px 26px;border-bottom:1px solid #454541} .site .cb-logo{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#F5F4EF;color:#171717;font:bold 25px var(--display)} .site .cb-name{font-size:23px}.site .cb-example{font-size:12px;color:#B4B4AE;border:1px solid #454541;border-radius:99px;padding:4px 10px;margin-left:auto} .site .cb-profile{display:flex;align-items:center;gap:8px;font-size:15px}.site .cb-profile .z5av{width:34px;height:34px} .site .cb-body{position:relative;height:460px} .site .cb-list,.site .cb-brief,.site .cb-pay{position:absolute;inset:0;padding:26px} .site .cb-filters{display:flex;gap:10px;margin-bottom:22px;font-size:16px}.site .cb-filters span{padding:9px 18px;border-radius:99px;border:1px solid #454541}.site .cb-filters .active{background:#F5F4EF;color:#171717} .site .cb-viewport{overflow:hidden;height:283px}.site .cb-track{display:flex;flex-direction:column;gap:12px} .site .cb-row{display:flex;align-items:center;gap:18px;min-height:94px;padding:16px 20px;border:1px solid #454541;border-radius:16px;background:#282825} .site .cb-row b{font-size:23px}.site .cb-row small{display:block;color:#B4B4AE;font-size:15px;margin-top:6px}.site .cb-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:13px;flex:none} .site .cb-icon svg{width:28px;height:28px}.site .cb-meta{margin-left:auto;font-size:18px}.site .cb-open{font-size:15px;padding:9px 12px;border-radius:99px;background:#F5F4EF;color:#171717;white-space:nowrap} .site .cb-caption{color:#B4B4AE;text-align:center;margin-top:18px;font-size:17px} .site .cb-brief-heading{display:flex;align-items:center;gap:16px;margin-bottom:22px}.site .cb-brief-heading small{font-size:14px;color:#B4B4AE}.site .cb-brief-heading h3{font:800 34px/1.1 var(--display);margin:4px 0} .site .cb-brief-grid{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid #454541;gap:12px;padding:18px 0}.site .cb-brief-grid small{display:block;font-size:14px;color:#B4B4AE;margin-bottom:8px}.site .cb-brief-grid b{font-size:19px} .site .cb-instruction{font-size:19px;margin:20px 0!important}.site .cb-pitch{border:1px solid #5C5B56;border-radius:14px;padding:16px;font-size:18px;min-height:95px}.site .cb-pitch small{display:block;color:#B4B4AE;font-size:13px;margin-bottom:8px}.site .cb-pitch span{display:block} .site .cb-send{display:block;margin:18px 0 0 auto;padding:13px 24px;border:0;border-radius:99px;background:#84C07C;color:#171717;font:700 18px var(--body);cursor:pointer}.site .cb-send span{margin-left:20px} .site .cb-pay{text-align:center}.site .cb-sent{display:inline-flex;align-items:center;gap:8px;color:#84C07C;font-size:16px}.site .cb-sent svg{width:18px;height:18px}.site .cb-pay h3{font:900 clamp(32px,3.3vw,48px)/1.05 var(--display);letter-spacing:-.03em;margin:20px 0 12px}.site .cb-pay>p{margin:0 auto 24px;font-size:20px;color:#B4B4AE} .site .cb-pay-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.site .cb-pay-card{border-radius:18px;min-height:192px;padding:20px 12px;display:flex;flex-direction:column;align-items:center;gap:14px;color:#171717}.site .cb-pay-card svg{width:32px;height:32px}.site .cb-pay-card b{font:800 23px/1.1 var(--display)}.site .cb-pay-card small{font-size:15px;line-height:1.35}.site .cb-note{display:block;margin-top:24px;color:#B4B4AE;font-size:13px} .site .tone-0{background:#DED4EE;color:#171717}.site .tone-1{background:#CCDDE9;color:#171717}.site .tone-2{background:#E9D39B;color:#171717}.site .tone-3{background:#C7DECE;color:#171717} @media(max-width:640px){ .site .aud-c .copy .say{font-size:clamp(34px,8vw,48px)}.site .aud-c .copy>p:not(.say){font-size:20px} .site .aud-c .creator-center>.after{font-size:22px} .site .aud-c .creator-browse h2{font-size:36px} .site .cb-top{padding:14px;gap:10px}.site .cb-name{font-size:18px}.site .cb-example{display:none}.site .cb-profile{margin-left:auto}.site .cb-profile b{display:none} .site .cb-body{height:620px}.site .cb-list,.site .cb-brief,.site .cb-pay{padding:18px 14px} .site .cb-filters{gap:6px;font-size:12px}.site .cb-filters span{padding:8px 10px} .site .cb-viewport{height:450px}.site .cb-row{flex-wrap:wrap;gap:10px;padding:14px;min-height:132px}.site .cb-row b{font-size:18px}.site .cb-row small{font-size:13px}.site .cb-icon{width:42px;height:42px}.site .cb-meta{margin-left:0;font-size:15px}.site .cb-open{margin-left:auto;font-size:13px}.site .cb-caption{font-size:15px} .site .cb-brief-grid{grid-template-columns:1fr 1fr;gap:18px}.site .cb-brief-grid b{font-size:16px}.site .cb-instruction{font-size:17px}.site .cb-pitch{font-size:16px}.site .cb-send{font-size:16px} .site .cb-pay h3{font-size:34px}.site .cb-pay>p{font-size:18px}.site .cb-pay-grid{grid-template-columns:1fr 1fr;gap:10px}.site .cb-pay-card{min-height:160px;padding:18px 10px}.site .cb-pay-card b{font-size:21px}.site .cb-pay-card small{font-size:14px}.site .cb-note{font-size:12px} .site .aud-c .creator-earn .y3full{font-size:52px}.site .aud-c .creator-earn .y3cac{font-size:110px} } /* Follow-up: contrast, restrained brand palette, larger brief and persistent signup. */ .site .on-cream .fq button,.site .on-cream .fq .chev{color:#171717} .site .on-cream .fq .ans{color:#5C5B56} .site .on-cream .fq{border-color:#D3D2C9} .site .cb-pay-card{background:#282825;color:#F5F4EF;border:1px solid #454541;border-radius:14px;align-items:flex-start;text-align:left;padding:22px;gap:20px;position:relative;min-height:205px} .site .cb-pay-card>span{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:#84C07C;color:#171717} .site .cb-pay-card small{color:#B4B4AE;max-width:20ch} .site .cb-pay-card:before{content:"";position:absolute;left:22px;right:22px;top:0;height:3px;background:#84C07C} .site .tone-0,.site .tone-1,.site .tone-2,.site .tone-3{background:#84C07C;color:#171717} .site .cb-pay-card.tone-0,.site .cb-pay-card.tone-1,.site .cb-pay-card.tone-2,.site .cb-pay-card.tone-3{background:#282825;color:#F5F4EF} .site .aud-c section[aria-labelledby="c-h-feed"] .split{display:flex;flex-direction:column;gap:44px;text-align:center;max-width:1500px} .site .aud-c section[aria-labelledby="c-h-feed"] .copy{max-width:1100px} .site .aud-c section[aria-labelledby="c-h-feed"] .copy p{max-width:1000px;margin-inline:auto} .site .aud-c section[aria-labelledby="c-h-feed"] figure{width:100%;max-width:1050px!important;scale:1!important;margin-bottom:0!important} .site .aud-c section[aria-labelledby="c-h-feed"] .kzc{max-width:100%;padding:0} .site .aud-c section[aria-labelledby="c-h-feed"] .kzs{padding:0;min-height:0} .site .aud-c section[aria-labelledby="c-h-feed"] .kz{font-size:24px} .site .aud-c section[aria-labelledby="c-h-feed"] .g6card{padding:30px} .site .creator-join h2{font:900 clamp(48px,6vw,90px)/1.02 var(--display);letter-spacing:-.04em} .site .creator-join p{font-size:clamp(22px,2vw,30px)} .site .creator-join .acts{justify-content:center;flex-wrap:wrap} .site .creator-sticky{position:fixed;z-index:70;bottom:22px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:22px;padding:10px 12px 10px 24px;background:#F5F4EF;color:#171717;border:1px solid #D3D2C9;border-radius:99px;box-shadow:0 8px 40px #0003;font-size:16px} .site .creator-sticky .btn{background:#171717;color:#84C07C;white-space:nowrap} .site .creator-sticky summary{cursor:pointer;white-space:nowrap;padding:12px;list-style:none;font-weight:700} .site .creator-sticky details>div{position:absolute;right:0;bottom:calc(100% + 10px);padding:12px;background:#F5F4EF;border:1px solid #D3D2C9;border-radius:18px;min-width:220px;box-shadow:0 8px 40px #0003} .site .creator-sticky details button{display:block;border:0;background:none;padding:14px;font:600 16px var(--body);color:#171717;cursor:pointer;width:100%;text-align:left} .site .aud-c:has(.creator-sticky) .band:last-of-type{padding-bottom:140px} @media(max-width:640px){.site .creator-sticky{bottom:12px;width:calc(100% - 24px);gap:8px;padding:8px 10px;border-radius:24px;justify-content:space-between}.site .creator-sticky strong{font-size:14px;max-width:70px}.site .creator-sticky .btn{padding:0 16px;min-height:44px}.site .creator-sticky summary{font-size:14px;padding:10px}.site .cb-pay-card{padding:16px;min-height:175px;gap:14px}.site .cb-pay-card:before{left:16px;right:16px}.site .cb-pay-card b{font-size:20px}} .site .aud-c section[aria-labelledby="c-h-feed"] .g6hd{font-size:28px;gap:18px;padding-bottom:20px}.site .aud-c section[aria-labelledby="c-h-feed"] .g6av{width:60px;height:60px}.site .aud-c section[aria-labelledby="c-h-feed"] .g6r{font-size:26px;padding:22px 0;min-height:68px}.site .aud-c section[aria-labelledby="c-h-feed"] .g6r .ks{font-size:25px}.site .aud-c section[aria-labelledby="c-h-feed"] .k6tk{color:#171717}.site .aud-c section[aria-labelledby="c-h-feed"] .ktag{font-size:13px} @media(max-width:640px){.site .aud-c section[aria-labelledby="c-h-feed"] .g6card{padding:20px}.site .aud-c section[aria-labelledby="c-h-feed"] .g6hd{font-size:18px;gap:10px}.site .aud-c section[aria-labelledby="c-h-feed"] .g6av{width:38px;height:38px}.site .aud-c section[aria-labelledby="c-h-feed"] .g6r,.site .aud-c section[aria-labelledby="c-h-feed"] .g6r .ks{font-size:18px;padding-block:16px}.site .creator-sticky strong{max-width:145px}} .site .aud-c section[aria-labelledby="c-h-feed"] .g6hd b{font-size:28px;text-align:left} .site .aud-c section[aria-labelledby="c-h-feed"] .g6r{grid-template-columns:minmax(160px,.45fr) 1fr 28px;text-align:left} .site .aud-c section[aria-labelledby="c-h-feed"] .g6r b{font-size:26px} .site .aud-c section[aria-labelledby="c-h-feed"] .g6r .k6tk{width:24px;height:24px} .site .aud-c section[aria-labelledby="c-h-feed"] .g6q{font-size:22px} @media(max-width:640px){.site .aud-c section[aria-labelledby="c-h-feed"] .g6hd b{font-size:18px}.site .aud-c section[aria-labelledby="c-h-feed"] .g6r{grid-template-columns:95px 1fr 18px;gap:10px}.site .aud-c section[aria-labelledby="c-h-feed"] .g6r b{font-size:18px}.site .aud-c section[aria-labelledby="c-h-feed"] .g6r .k6tk{width:18px;height:18px}} /* Refai: interaction, not a timed walkthrough. */ .site .creator-sticky{width:max-content;max-width:calc(100% - 24px)} .site .creator-sticky strong{max-width:430px} .site .cb-step{font:inherit;letter-spacing:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;transition:color .2s} .site .cb-step.active{color:#84C07C}.site .cb-step:disabled{opacity:1;cursor:default} .site .cb-step:focus-visible,.site .cb-open:focus-visible,.site .glass-tap:focus-visible{outline:3px solid #84C07C;outline-offset:6px} .site .cb-open{font:600 15px var(--body);border:1px solid #77776B;border-radius:99px;background:transparent;color:inherit;padding:10px 16px;cursor:pointer} .site .cb-viewport{overflow:auto}.site .cb-row{min-height:104px} .site .on-cream .cb-step.active{background:#171717;border-radius:12px;padding:0 12px} .site .aud-c section[aria-labelledby="c-h-feed"] .g6card{background:#F5F4EF;color:#171717} .site .aud-c section[aria-labelledby="c-h-feed"] .g6r .ks{color:#5C5B56} .site .aud-c section[aria-labelledby="c-h-feed"] .g6q{font-size:clamp(22px,2.4vw,36px)} .site .aud-c section[aria-labelledby="c-h-feed"] .g6qc{font-size:inherit;padding:14px 24px;white-space:nowrap;background:#F5F4EF;color:#171717;border:2px solid #171717;box-shadow:0 8px 24px #0002} .site .glass-tap{position:relative;display:block;margin:32px auto 0;border:0;border-radius:99px;padding:18px 30px;background:#84C07C;color:#171717;font:700 20px var(--body);cursor:pointer} .site .glass-tap:disabled{cursor:default} .site .aud-c section[aria-labelledby="c-h-feed"] .g6st{overflow:hidden} @media(max-width:640px){.site .creator-sticky strong{font-size:12px;max-width:185px}.site .creator-sticky .btn{font-size:13px;padding:0 12px}.site .cb-open{font-size:13px;padding:8px}.site .aud-c section[aria-labelledby="c-h-feed"] .g6qc{font-size:22px;padding:12px 16px}.site .glass-tap{font-size:17px;padding:16px 20px}.site .cb-step{display:inline}.site .tabs{width:100%}} .site .campaign-overview .h3win{--k-r1:#353633;--k-r2:#42433F;--k-line:#5B5D55;--k-ink:#F5F4EF;--k-sub:#CBCCC3;--k-acc:#84C07C;--k-acc-ink:#171717;background:#353633;color:#F5F4EF;border-color:#5B5D55} .site .campaign-overview .h5crs{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 8px} .site .campaign-overview .h5cr .z5av{width:70px;height:70px} .site .campaign-overview .h5cr small{font-size:11px} .site .campaign-overview .h5pn.ov:first-child{gap:2px} .site .campaign-overview .h5pn.ov .h5row{padding:3px 4px;font-size:11px} .site .campaign-overview .h5pn.ov .h5stamp{font-size:9px;padding:2px 5px} .site .campaign-overview .h5py{display:grid;grid-template-columns:28px 1fr auto;gap:3px 7px;padding:7px 4px;border-radius:8px} .site .campaign-overview .h5py .z5av{grid-row:span 2;width:28px;height:28px} .site .campaign-overview .h5py small{grid-column:2/4;font-size:10px} .site .campaign-overview .h5py>span{grid-column:2;font-size:12px} .site .campaign-overview .h5py em{grid-column:3;font-size:9px} .site .campaign-overview .h3wh .kpill{color:#F5F4EF;border-color:#77796F} .site .campaign-overview .z3st{min-height:460px} .site .campaign-overview .h5py .z5av{grid-column:1;grid-row:1 / 3} .site .campaign-overview .h5py small{grid-row:1;white-space:nowrap} .site .campaign-overview .h5py>span:not(.z5av){grid-row:2;grid-column:2} .site .campaign-overview .h5py em{grid-row:2;grid-column:3} /* 22 Oct (Mohamed): "delete the 1 no surpirses 2 browse apply etc no need for them": no numbered section labels on the creator side */ .site .aud-c .eyebrow.corner,.site .aud-c .eyebrow.section-label{display:none!important} /* 22 Oct (Mohamed): the brief's glass shatters (scene-feed.js): glassy shards with a sheen, and cracks that read on the cream card */ .site .aud-c section[aria-labelledby="c-h-feed"] .g6glass{border-radius:0;background:none;backface-visibility:visible} .site .aud-c section[aria-labelledby="c-h-feed"] .g6glass>b{position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(205,216,222,.5) 46%,rgba(255,255,255,.3) 70%,rgba(225,232,236,.66))} .site .aud-c section[aria-labelledby="c-h-feed"] .g6cr path{stroke:rgba(23,23,23,.5);stroke-width:1.2;stroke-linecap:round} .site .aud-c section[aria-labelledby="c-h-feed"] .g6cr .g6rg{stroke-width:1} .site .aud-c section[aria-labelledby="c-h-feed"] .g6st{overflow:visible} /* 23 Oct (Mohamed): "the size here is completely off for desktop adjust please but keep mobile as is". "Find out where you stand." (creator tab, last section): on desktop the scene kept the 420-440px stage height of the other scenes, leaving a tall empty black box around one button. Same fix the brand page's closing scene already has: no minimum height, so the stage fits its content. Desktop only; phones unchanged. */ @media (min-width:900px){ :where(.aud-c,.c-skin) figure.scene[data-demo="a_close"] .kzs{min-height:0} :where(.aud-c,.c-skin) figure.scene[data-demo="a_close"] .kzc{padding-block:24px 20px} :where(.aud-c,.c-skin) figure.scene[data-demo="a_close"] .kzs{zoom:1.25} } /* 23 Oct (Mohamed): "the waitlist counter is bullshit too we need to take that out completely no reason for it". The place-in-line card is hidden in the two creator scenes that showed it: "Find out where you stand." (close: 1,240 → 1,239) and "Your numbers could be better than you think." (a_wait: 1,240 → 968, "Moved up 272"). The rest of each scene plays as before. */ :where(.aud-c,.c-skin) .c6line,:where(.aud-c,.c-skin) .u6card{display:none !important} /* Phone-first layout: shared safe margins and native readable scene sizes. */ .phone-insight{display:none} .site .aud-b .cac-insight h3 span{font:inherit;color:inherit} @media(max-width:640px){ html{scroll-snap-type:y proximity} .site{--phone-gutter:24px} .site main .band,.site main .band.has-corner,.site .aud-b section[aria-labelledby="h-tech"],.site .why .row{min-height:0;padding-top:64px;padding-bottom:64px;scroll-snap-stop:normal} .site main .band.has-corner{padding-bottom:96px} .site main .band>.wrap,.site .campaign-overview .wrap.split,.site section[aria-labelledby="h-pick"] .wrap.split,.site .brief-stage{padding-left:var(--phone-gutter);padding-right:var(--phone-gutter);width:100%;max-width:none} .site .split{gap:36px} .site main .band .eyebrow.corner{left:24px;bottom:24px} .site .split .scene,.site .brief-stage figure.scene{width:100%;max-width:100%;margin-inline:0;scale:1;transform:none} .site figure.scene .kzc{max-width:none;width:100%;padding:0} .site figure.scene .kzs{min-height:0;padding:0} .site figure.scene .kbar{padding:16px 0 0} .site figure.scene .kbar button{font-size:14px;min-height:44px;padding:8px 16px} .site .campaign-overview .copy .say,.site section[aria-labelledby="h-pick"] .copy .say{font-size:clamp(36px,10vw,44px);line-height:1.07} .site .copy p:not(.say):not(.eyebrow){font-size:19px;line-height:1.5} /* Large two-across task cards retain all twelve steps and the approval reveals. */ .site .aud-b figure[data-demo="tech"] .z3st{min-height:900px} .site .aud-b .t3win{border:0;background:none;border-radius:0;overflow:visible} .site .aud-b .t3log{top:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .site .aud-b figure[data-demo="tech"] .t3r{height:130px;text-align:left;white-space:normal;align-content:start;align-items:start;display:flex;flex-wrap:wrap;padding:14px 12px;gap:8px;font-size:18px;line-height:1.25;border:1px solid #3A3A37;background:#202020;border-radius:16px} .site .aud-b .t3r>span:not(.tk):not(.t3you),.site .aud-b .t3r>b{flex-basis:100%;order:2} .site .aud-b .t3r .tk{width:20px;height:20px}.site .aud-b .t3r .tk svg{width:13px;height:13px} .site .aud-b .t3you{font-size:12px;padding:2px 7px} .site .aud-b .t3rail,.site .aud-b .t3dot{display:none} .site .aud-b .t3foot{font-size:14px;flex-wrap:wrap;gap:6px} .site .aud-b .t3pop{width:calc(100% - 16px);left:8px;margin:0;padding:18px} .site .aud-b .t3pop small,.site .aud-b .t3ab div,.site .aud-b .t3pop>span{font-size:14px}.site .aud-b .t3ab b{font-size:15px}.site .aud-b .t3btn{font-size:16px;padding:12px} /* CAC: short, legible summaries instead of a miniature desktop grid. */ .site .aud-b .desktop-insight{display:none}.site .aud-b .phone-insight{display:inline} .site .aud-b figure[data-demo="pay"] .z3st{min-height:650px} .site .aud-b figure[data-demo="pay"] .y3small.kh{font-size:34px} .site .aud-b figure[data-demo="pay"] .y3end{gap:28px} .site .aud-b .cac-insights{gap:12px} .site .aud-b .cac-insight{padding:16px 12px;gap:10px;border-radius:16px;min-height:162px} .site .aud-b .cac-insight h3{font-size:21px;line-height:1.12}.site .aud-b .cac-insight h3 span{font:inherit;color:inherit} .site .aud-b .cac-insight p{font-size:16px;line-height:1.4} /* Creator results use a two-line card, keeping every metric readable. */ .site .aud-b figure[data-demo="pick"] .z3st{min-height:612px} .site .aud-b .p3top{flex-wrap:wrap;gap:12px}.site .aud-b .p3top .kpill{font-size:12px} .site .aud-b .kseg button{font-size:14px;min-height:44px;padding:8px 12px} .site .aud-b .p3hd{display:none} .site .aud-b .p3r{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:44px 42px;gap:8px 12px;padding:10px 12px} .site .aud-b .p3r .p3av{width:44px;height:44px}.site .aud-b .p3n{text-align:left}.site .aud-b .p3n b{font-size:16px;overflow-wrap:anywhere}.site .aud-b .p3sub{font-size:13px} .site .aud-b .p3m{grid-column:1/-1;width:100%}.site .aud-b .p3m>div{justify-content:space-between;width:100%;gap:6px} .site .aud-b .p3fa{font-size:22px}.site .aud-b .p3fb span{font-size:19px;align-items:flex-start;min-width:60px}.site .aud-b .p3fb small{font-size:12px}.site .aud-b .p3fb span:nth-child(2):after{content:"engagement";font:11px var(--mono);font-weight:400;color:#B4B4AE}.site .aud-b .p3bar{display:none} /* Brief inputs and connected creators: two per row with larger labels. */ /* 28 Oct (Mohamed): "the brief send sell needs to be a bit smaller to fit on a phone screen" (was 670px tall, 30-40px heading, grid at 100px). */ .site .aud-b figure[data-demo="brief"] .z3st{min-height:clamp(440px,calc(100svh - 190px),540px)} .site .aud-b figure[data-demo="brief"] .b3h{font-size:clamp(26px,7.6vw,34px);white-space:nowrap} .site .aud-b .b3grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:10px;top:84px} .site .aud-b .b3src{padding:14px;font-size:14px;border-radius:16px}.site .aud-b .b3src b{font-size:17px}.site .aud-b .b3src small{font-size:12px}.site .aud-b .b3src:nth-child(5){grid-column:span 2} .site .aud-b .b3txt{font-size:17px;white-space:normal;line-height:1.25}.site .aud-b .b3wa span{font-size:13px}.site .aud-b .b3url{font-size:13px}.site .aud-b .b3v svg{max-height:84px} .site .aud-b .b6c small{font-size:14px} } /* Keep the opening copy inside safe margins while the moon remains full bleed. */ html.gated .site .creator-sticky{visibility:hidden;pointer-events:none} @media(max-width:640px){ #lift .h7hd{padding-inline:var(--lift-copy-inset,28px)} } /* 15 Oct review: labels belong to the section that follows, not the previous footer. */ .site .section-label{position:static;grid-column:1/-1;flex-basis:100%;margin:0 0 20px!important;text-align:left;font-size:13px!important;line-height:1.2!important} .site .has-label>.wrap.split,.site .has-label>.wrap.brief-stage{flex-wrap:wrap} .site .has-label>.wrap.split>.section-label{width:100%} .site .aud-b figure[data-demo="pay"] .y3mid{display:none} .site .aud-b figure[data-demo="pay"] .z3st{min-height:300px} .site .cac-explainer h2{font-size:clamp(36px,5vw,72px);text-align:center;margin-bottom:32px} .site .cac-explainer .cac-insights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} .site .cac-explainer .cac-insight{display:flex;flex-direction:column;background:#202020;border:1px solid #3A3A37;border-radius:16px;padding:24px} .site .z6lp video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit} @media(max-width:640px){ .site main .band.has-label{padding-block:48px} .site .has-label>.wrap.split{display:flex;flex-direction:column;gap:24px} .site .has-label>.wrap.split>.section-label{margin-bottom:0!important} .site .cac-explainer .cac-insights{grid-template-columns:1fr 1fr;gap:12px} /* Match the compact creator comparison: one row per creator, all metrics alongside. */ .site .aud-b figure[data-demo="pick"] .z3st{min-height:342px} .site .aud-b .p3r{display:flex;flex-wrap:nowrap;gap:7px;padding:9px 8px;grid-template-rows:none} .site .aud-b .p3r .p3av{width:30px;height:30px;flex:none} .site .aud-b .p3n{flex:1;min-width:0}.site .aud-b .p3n b{font-size:12px;overflow-wrap:normal;white-space:nowrap}.site .aud-b .p3sub{font-size:10px;white-space:nowrap} .site .aud-b .p3m{width:131px;flex:none}.site .aud-b .p3fb span{font-size:14px;min-width:0;align-items:center}.site .aud-b .p3fb small{font-size:9px}.site .aud-b .p3fb span:nth-child(2):after{font-size:9px;content:'eng.'}.site .aud-b .p3fa{font-size:18px} .site .aud-b .p3hd{display:flex;font-size:10px;margin-top:12px}.site .aud-b .p3top{gap:8px}.site .aud-b .kseg button{font-size:12px;padding-inline:8px}.site .aud-b .p3top .kpill{font-size:10px} /* Same scrolling checklist and focus cards as the creator admin animation. */ .site .aud-b figure[data-demo="tech"] .z3st{min-height:350px} .site .aud-b .t3win{border:1px solid #3A3A37;background:#202020;border-radius:16px;overflow:hidden} .site .aud-b .t3log{display:block;top:6px;padding-left:30px} .site .aud-b figure[data-demo="tech"] .t3r{height:24px;display:flex;flex-wrap:nowrap;align-items:center;align-content:normal;padding:0;gap:7px;font-size:13px;line-height:1.15;border:0;background:none;border-radius:0;white-space:nowrap} .site .aud-b .t3r>span:not(.tk):not(.t3you),.site .aud-b .t3r>b{flex-basis:auto;order:0} .site .aud-b .t3r .tk{width:13px;height:13px}.site .aud-b .t3r .tk svg{width:9px;height:9px}.site .aud-b .t3you{font-size:10px;padding:2px 5px} .site .aud-b .t3rail,.site .aud-b .t3dot{display:block}.site .aud-b .t3pop{width:calc(100% - 24px);left:12px;padding:16px}.site .aud-b .t3foot{font-size:12px} /* Keep both interactive creator sections within a typical phone's visible page area. */ .site main section.creator-browse,.site main section[aria-labelledby="c-h-feed"]{padding-top:24px;padding-bottom:104px} .site .aud-c .creator-browse .creator-center,.site .aud-c section[aria-labelledby="c-h-feed"] .split{gap:16px} .site .aud-c .creator-browse h2,.site .aud-c section[aria-labelledby="c-h-feed"] .copy .say{font-size:30px;line-height:1.05} /* 28 Oct (Mohamed, iPhone): "Why is this heading slightly smaller size in the mobile?": "No surprises" back to the 34px of the other creator headings */ .site .aud-c section[aria-labelledby="c-h-feed"] .copy .say{font-size:34px} .site .aud-c section[aria-labelledby="c-h-feed"] .copy p:not(.say){font-size:16px;line-height:1.35;margin-top:12px} .site .cb-top{padding:10px 12px;gap:8px}.site .cb-logo{width:26px;height:26px;font-size:20px}.site .cb-name{font-size:16px}.site .cb-profile .z5av{width:26px;height:26px} .site .cb-body{height:404px}.site .cb-list,.site .cb-brief,.site .cb-pay{padding:12px} .site .cb-filters{display:none}.site .cb-viewport{height:338px}.site .cb-track{gap:8px}.site .cb-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:5px 8px;min-height:70px;padding:10px}.site .cb-icon{width:28px;height:28px;border-radius:8px}.site .cb-icon svg{width:18px;height:18px}.site .cb-row b{font-size:14px}.site .cb-row small{font-size:11px;margin-top:3px}.site .cb-meta{grid-column:2;font-size:11px;display:flex;gap:6px}.site .cb-meta small{margin:0;font-size:11px}.site .cb-open{grid-column:3;grid-row:1/3;min-height:44px;font-size:11px;padding:8px}.site .cb-caption{font-size:13px;margin-top:12px} .site .cb-brief-heading{margin-bottom:10px;gap:10px}.site .cb-brief-heading h3{font-size:24px}.site .cb-brief-heading small{font-size:11px}.site .cb-brief-grid{gap:10px;padding:10px 0}.site .cb-brief-grid small{font-size:11px;margin-bottom:3px}.site .cb-brief-grid b{font-size:14px}.site .cb-instruction{font-size:14px;margin:10px 0!important}.site .cb-pitch{font-size:13px;padding:10px;min-height:64px}.site .cb-pitch small{margin-bottom:4px}.site .cb-send{margin-top:10px;padding:10px 16px;font-size:14px;min-height:44px} .site .cb-sent{font-size:12px}.site .cb-pay h3{font-size:26px;margin:10px 0 6px}.site .cb-pay>p{font-size:14px;margin-bottom:12px}.site .cb-pay-card{min-height:104px;padding:12px;gap:8px}.site .cb-pay-card>span{width:26px;height:26px;border-radius:8px}.site .cb-pay-card svg{width:18px;height:18px}.site .cb-pay-card b{font-size:16px}.site .cb-pay-card small{font-size:12px}.site .cb-note{font-size:11px;margin-top:10px} .site .aud-c section[aria-labelledby="c-h-feed"] .g6card{padding:16px}.site .aud-c section[aria-labelledby="c-h-feed"] .g6hd{padding-bottom:12px;gap:10px}.site .aud-c section[aria-labelledby="c-h-feed"] .g6av{width:28px;height:28px}.site .aud-c section[aria-labelledby="c-h-feed"] .g6hd b{font-size:16px}.site .aud-c section[aria-labelledby="c-h-feed"] .g6r{min-height:44px;padding:10px 0;grid-template-columns:86px 1fr 18px;gap:6px}.site .aud-c section[aria-labelledby="c-h-feed"] .g6r b,.site .aud-c section[aria-labelledby="c-h-feed"] .g6r .ks{font-size:16px}.site .aud-c section[aria-labelledby="c-h-feed"] .ktag{display:none}.site .aud-c section[aria-labelledby="c-h-feed"] .g6qc{font-size:18px;padding:10px 14px}.site .glass-tap{font-size:14px;padding:12px 18px;min-height:44px;margin-top:16px} } @media(max-width:640px){.site .aud-c section[aria-labelledby="c-h-feed"] .g6r{font-size:16px;line-height:1.25}.site .aud-c section[aria-labelledby="c-h-feed"] .g6r .ks{padding:0}} /* 17 Oct (Mohamed): slightly slimmer compare bar on phones (62px to about 56px); the button keeps its 44px tap height. */ @media(max-width:640px){.site .creator-sticky{padding:5px 6px 5px 14px}} /* Restored moon-completion prompt; one permanent CAC-to-numbers screen. */ .brand-question[hidden]{display:none} .brand-question{position:fixed;inset:0;z-index:180;display:flex;align-items:center;justify-content:center;padding:28px;background:#1115;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)} html.brand-question-open{overflow:hidden} .brand-why{display:flex;align-items:center;justify-content:center;gap:20px;padding:24px 32px;border:0;border-radius:99px;background:#84C07C;color:#171717;font:700 clamp(20px,2.5vw,30px)/1.15 Inter,Arial,sans-serif;cursor:pointer;box-shadow:0 8px 40px #0003;min-height:64px} .brand-why:focus-visible{outline:3px solid #F5F4EF;outline-offset:6px} .brand-why:active{transform:scale(.97)} .site main .brand-cac{position:relative;height:calc(100dvh - var(--brand-header-height,64px));min-height:0;padding:0;display:block;overflow:hidden;scroll-margin-top:0} .site main .brand-cac>.wrap{position:relative;width:100%;height:100%;max-width:none;padding:0} .site .brand-cac figure{position:absolute;inset:0;scale:1!important;width:100%!important;height:100%;max-width:none;margin:0!important;transform:none!important} .site .brand-cac .kzs{position:absolute;inset:0;min-height:0!important;padding:0!important;display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity .3s ease} .site .brand-cac .kzc{width:100%;max-width:780px} .site .brand-cac .z3st{min-height:300px!important} .site .brand-cac .section-label{display:none} .site .brand-cac .kbar{position:absolute;bottom:16px;right:max(24px,calc((100% - 1096px)/2));padding:0;z-index:3} .site .brand-cac .brand-stats{position:absolute;inset:0;display:flex;align-items:center;padding:24px 0 64px;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s .3s} .site .brand-cac .brand-stats{pointer-events:none} .site .brand-cac .brand-stats>.wrap{pointer-events:auto} .site .brand-cac.show-numbers .kzs{opacity:0;pointer-events:none} .site .brand-cac.show-numbers .brand-stats{opacity:1;visibility:visible;transition:opacity .3s ease} .site .lift-b .m5btn{max-width:calc(100% - 40px);padding-inline:20px;cursor:pointer;pointer-events:auto} .site .lift-b .m5lb{font-size:14px} .site .lift-b .m5btn:focus-visible{outline:3px solid #171717;outline-offset:5px;border-radius:99px} html.creator-hero-visible .creator-sticky{visibility:hidden;pointer-events:none} .site .creator-hero,.site .tabs-m + [role="tabpanel"] > .band.creator-hero:first-child{min-height:0;padding-block:48px} .site .creator-hero .split{gap:24px} .site .aud-c [data-demo="proof"] .w6top{display:none} @media(max-width:640px){ .brand-why{font-size:21px;padding:22px 24px;max-width:350px;gap:14px;text-align:left} .site .brand-cac .kzc{max-width:380px} .site .brand-cac .z3st{min-height:270px!important} .site .brand-cac .kbar{bottom:10px} .site .brand-cac .kbar button{min-height:32px;padding:5px 12px;font-size:12px} .site main .creator-hero,.site .tabs-m + [role="tabpanel"] > .band.creator-hero:first-child{padding-top:24px;padding-bottom:24px} .site .creator-hero .split{gap:16px} .site .creator-hero .copy .say{font-size:38px;line-height:1.05} .site .creator-hero .copy p:not(.say){font-size:18px;line-height:1.45;margin-top:16px} .site .creator-hero .kbar{padding-top:0} } @media(prefers-reduced-motion:reduce){.site .brand-cac .kzs,.site .brand-cac .brand-stats{transition:none}} /* 17 Oct (Mohamed): no closing "Slash your CAC." caption (CAC struck through in red) after the slash; the numbers follow the falling letters directly. Hidden, not removed, so nothing in the scene moves; brand scene only (the creator "Slash the CUT" scene uses the same class). */ .site .aud-b figure[data-demo="pay"] .y3small{visibility:hidden!important} /* Stats remain real text at every size, without scaling a desktop canvas. */ .site .brand-stats{padding-block:48px;scroll-margin-top:8px;min-height:0} .site .aud-b #brand-cac .brand-stats>.wrap{max-width:1160px;text-align:left} .site .brand-stats .stats-eyebrow{color:#84C07C;font-size:14px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;text-align:center;margin:0 0 16px} .site .brand-stats h2{font-size:clamp(34px,4.6vw,60px);line-height:1.06;letter-spacing:-.045em;text-align:center;max-width:860px;margin:0 auto 36px;text-wrap:balance} .site .stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} .site .stat-card{min-width:0;padding:28px 24px 20px;background:#232321;border:1px solid #41413B;border-radius:20px;display:flex;flex-direction:column;gap:24px} .site .stat-number{display:flex;align-items:baseline;gap:8px;font-size:clamp(48px,5vw,68px);line-height:1;font-weight:750;letter-spacing:-.055em;color:#84C07C;white-space:nowrap} .site .stat-number small{font-size:18px;letter-spacing:-.02em} .site .stat-copy{flex:1;display:flex;flex-direction:column;min-width:0} .site .brand-stats h3{font-size:22px;line-height:1.15;letter-spacing:-.025em;margin:0 0 10px;color:#F5F4EF} .site .brand-stats p{font-size:17px;line-height:1.45;color:#C6C6BD;margin:0} .site .stat-source{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;font-size:13px;line-height:1.35;color:#C6C6BD;text-decoration:underline;text-underline-offset:4px;margin-top:auto;padding-top:18px} .site .stat-source:hover{color:#84C07C} .site .stats-next{display:flex;align-items:center;justify-content:center;gap:24px;width:fit-content;max-width:100%;min-height:52px;margin:32px auto 0;padding:16px 24px;border-radius:99px;background:#84C07C;color:#171717;font-size:18px;font-weight:700;line-height:1.2;text-decoration:none;text-align:center} @media(max-width:800px){ .site .brand-stats{padding-block:48px} .site .brand-stats h2{margin-bottom:24px} .site .stats-grid{grid-template-columns:1fr;gap:12px} .site .stat-card{display:grid;grid-template-columns:100px minmax(0,1fr);padding:22px 18px;gap:16px;align-items:start;border-radius:16px} .site .stat-number{font-size:48px;display:block;line-height:1.05} .site .stat-number small{display:block;font-size:18px;margin-top:4px;letter-spacing:0} .site .brand-stats h3{font-size:21px} .site .brand-stats p{font-size:16px;line-height:1.4} .site .stat-source{font-size:12px;padding-top:12px} .site .stats-next{font-size:17px} } @media(max-width:380px){ .site .stat-card{grid-template-columns:86px minmax(0,1fr);gap:12px;padding:20px 16px} .site .stat-number{font-size:42px} .site .brand-stats h3{font-size:19px} } .site .brand-stats[hidden]{display:none} .site #how-klyp-works{scroll-margin-top:16px} .site .brand-stats a:focus-visible{outline:3px solid #F5F4EF;outline-offset:5px} /* Keep the three sourced cards and continuation inside the same phone viewport. */ .site .stat-card:last-child .stat-number{display:block} .site .stat-card:last-child .stat-number small{display:block;margin-top:4px} @media(max-width:800px){ .site .brand-cac .brand-stats{padding:16px 0 52px} .site .brand-cac .brand-stats>.wrap{padding-inline:24px;width:100%} .site .brand-stats .stats-eyebrow{font-size:12px;margin-bottom:10px} .site .brand-stats h2{font-size:30px;line-height:1.05;margin-bottom:16px} .site .stats-grid{gap:8px} .site .stat-card{grid-template-columns:76px minmax(0,1fr);padding:12px;gap:12px} .site .stat-number{font-size:38px} .site .stat-number small{font-size:13px;white-space:normal} .site .brand-stats h3{font-size:18px;line-height:1.1;margin-bottom:6px} .site .brand-stats p{font-size:14px;line-height:1.3} .site .stat-source{font-size:11px;line-height:1.25;min-height:32px;padding-top:8px} .site .stats-next{font-size:16px;min-height:44px;padding:12px 20px;margin-top:16px} } @media(max-width:800px) and (max-height:740px){ .site .brand-cac .brand-stats{padding-top:10px} .site .brand-stats .stats-eyebrow{font-size:11px;margin-bottom:6px} .site .brand-stats h2{font-size:26px;margin-bottom:10px} .site .stat-card{padding:9px 10px;gap:10px} .site .brand-stats h3{font-size:16px;margin-bottom:4px} .site .brand-stats p{font-size:13px;line-height:1.25} .site .stat-source{padding-top:5px;min-height:26px} .site .stats-next{margin-top:10px} } /* Desktop admin demo uses its available width and real-size type. */ @media(min-width:641px){ .site .aud-b section[aria-labelledby="h-tech"]>.wrap{max-width:1500px} .site .aud-b section[aria-labelledby="h-tech"] figure.scene{width:100%;max-width:760px;scale:1;transform:none;margin:0 auto;min-width:0} .site .aud-b figure[data-demo="tech"] .kzc{width:100%;max-width:none;padding:0;gap:0} .site .aud-b figure[data-demo="tech"] .kzs{min-height:0;padding:0;overflow:visible} .site .aud-b figure[data-demo="tech"] .z3st{min-height:580px} .site .aud-b figure[data-demo="tech"] .t3win{border-radius:22px} .site .aud-b figure[data-demo="tech"] .t3log{top:16px;padding-left:44px;padding-right:18px} .site .aud-b figure[data-demo="tech"] .t3r{height:42px;gap:10px;font-size:clamp(18px,1.45vw,22px);line-height:1.25} .site .aud-b figure[data-demo="tech"] .t3r .tk{width:20px;height:20px} .site .aud-b figure[data-demo="tech"] .t3r .tk svg{width:13px;height:13px} .site .aud-b figure[data-demo="tech"] .t3you{font-size:12px;padding:4px 8px} .site .aud-b figure[data-demo="tech"] .t3rail{left:22px} .site .aud-b figure[data-demo="tech"] .t3dot{left:18px;width:9px;height:9px} .site .aud-b figure[data-demo="tech"] .t3foot{font-size:17px;gap:7px;align-items:center} .site .aud-b figure[data-demo="tech"] .t3foot .kpill{font-size:12px!important;padding:4px 10px!important} .site .aud-b figure[data-demo="tech"] .t3pop{left:24px;width:calc(100% - 48px);margin-left:0;padding:24px;gap:18px;border-radius:20px} .site .aud-b figure[data-demo="tech"] .t3pop small{font-size:14px;line-height:1.4} .site .aud-b figure[data-demo="tech"] .t3ab{gap:12px} .site .aud-b figure[data-demo="tech"] .t3ab div{padding:14px;gap:6px;font-size:16px} .site .aud-b figure[data-demo="tech"] .t3ab b{font-size:18px} .site .aud-b figure[data-demo="tech"] .t3ab .z5av{width:60px;height:60px} .site .aud-b figure[data-demo="tech"] .t3d{font-size:18px;gap:18px;line-height:1.4} .site .aud-b figure[data-demo="tech"] .t3btn{font-size:17px;padding:13px 22px;min-height:44px} .site .aud-b figure[data-demo="tech"] .t3big{font-size:36px} .site .aud-b figure[data-demo="tech"] .t5ps{font-size:16px;gap:10px} .site .aud-b figure[data-demo="tech"] .t5ps .z5av{width:38px;height:38px} .site .aud-b figure[data-demo="tech"] .kbar{padding-top:18px} .site .aud-b figure[data-demo="tech"] .kbar button{font-size:15px;min-height:44px;padding:10px 18px} } @media(min-width:1024px) and (min-aspect-ratio:4/3){ .site .aud-b section[aria-labelledby="h-tech"]>.wrap.split{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,4vw,64px)} .site .aud-b #h-tech{font-size:clamp(48px,4.7vw,72px)} .site .aud-b section[aria-labelledby="h-tech"] .copy p{font-size:clamp(18px,1.65vw,24px)} } /* Desktop creator review trial. No rules apply to brands or widths below 1024px. */ @media(min-width:1024px){ html.creator-desktop{--creator-clear:112px;--creator-height:calc(100svh - var(--nav));scroll-snap-type:none} html.creator-screens{scroll-snap-type:none;scroll-padding-top:var(--nav)} html.creator-desktop .site #c-p-works>.band{box-sizing:border-box;min-height:var(--creator-height);padding:24px 0 var(--creator-clear);justify-content:center;scroll-margin-top:0} html.creator-desktop .site #c-p-works>.band>.wrap{max-width:1200px;padding-inline:40px} html.creator-screens .site #c-p-works>.band:not(.faq){height:var(--creator-height)} html.creator-desktop #c-p-works>.band>.wrap>.section-label{display:none!important} html.creator-desktop .site #c-p-works .split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;align-items:center;text-align:left} html.creator-desktop .site #c-p-works .split .copy{margin:0;max-width:none} html.creator-desktop .site #c-p-works figure.scene{scale:1!important;margin-bottom:0!important;max-width:100%;width:100%;overflow:visible} html.creator-desktop .site #c-p-works .kzs{min-height:0!important;padding:0!important;overflow:visible} html.creator-desktop .site #c-p-works .kzc{max-width:none;width:100%;padding:0;margin:0} html.creator-desktop .site #c-p-works .kbar{margin-top:12px;padding:0;justify-content:flex-end} html.creator-desktop .site #c-p-works .creator-hero{position:relative;padding-top:92px} html.creator-desktop .creator-hero>.tabs-m{position:absolute;inset:0 0 auto;height:60px;scroll-snap-align:none} html.creator-desktop .site .creator-hero figure.scene{width:460px;justify-self:start} html.creator-desktop .site .creator-hero .h6st{height:322px!important} html.creator-desktop .site .creator-hero .h6tile,html.creator-desktop .site .creator-hero .h6ring{width:315px!important;height:300px!important;left:72px!important} html.creator-desktop .site .creator-hero .h6brief{width:460px;font-size:12px;box-sizing:border-box} html.creator-desktop .site .creator-hero .h6brief .lab2,html.creator-desktop .site .creator-hero .h6brief .ktag,html.creator-desktop .site .creator-hero .h6brief .ks{font-size:12px} html.creator-desktop .site .creator-hero .h6amt{font-size:0} html.creator-desktop .site .creator-hero .h6amt>*{display:none} html.creator-desktop .site .creator-hero .h6amt:after{content:'$$$';font-size:24px} /* 28 Oct: no amounts on the creator side, only $ signs (Refai, 14 Oct) */ html.creator-desktop .site #c-p-works section[aria-labelledby='c-h-feed'] .split{display:flex;gap:18px} html.creator-desktop .site #c-p-works section[aria-labelledby='c-h-feed'] figure{max-width:900px!important} html.creator-desktop .site #c-p-works .cb-filters{display:none} html.creator-desktop .site #c-p-works .cb-viewport{height:auto;overflow:visible} html.creator-desktop .site #c-p-works .cb-body{height:395px} html.creator-desktop .site #c-p-works .cb-row{padding-block:8px;min-height:86px} html.creator-desktop .site #c-p-works .cb-caption{text-align:center} html.creator-desktop .site #c-p-works .creator-center{gap:18px} html.creator-desktop .site #c-p-works .t3r:not(.on){color:var(--sub)} html.creator-desktop .site #c-p-works [data-state="complete"] .w6kl{color:var(--k-ink)!important} html.creator-desktop .site #c-p-works .w6on{color:var(--k-ink)} html.creator-desktop .site #c-p-works .w6dot{position:relative;right:auto;bottom:auto;display:inline-block;width:.16em;height:.16em;margin-left:.03em} html.creator-desktop .site #c-p-works section[aria-labelledby='c-h-proof'] figure{width:560px;margin-inline:auto} html.creator-desktop .site #c-p-works .p3hd>span:last-child{width:210px} html.creator-desktop .site #c-p-works .p3hd i:last-child{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} html.creator-desktop .site #c-p-works .p3m{width:210px} html.creator-desktop .site #c-p-works .p3fb{width:100%;display:grid;grid-template-columns:repeat(3,1fr)} html.creator-desktop .site #c-p-works figure[data-demo='numbers'] .z3st{height:388px;min-height:388px} html.creator-desktop .site #c-p-works .faq .split{display:flex;text-align:center;gap:24px} html.creator-desktop .site #c-start{padding:24px 0 0!important;justify-content:space-between} html.creator-desktop .site #c-start>.wrap{flex:1;justify-content:center;gap:0} html.creator-desktop .site #c-start h2{margin:0 0 24px} html.creator-desktop .site #c-start p{margin:0 0 32px} html.creator-desktop .site #c-start footer{width:100%;box-sizing:border-box;scroll-snap-align:none} html.creator-desktop .site .creator-sticky{display:flex!important} html.creator-desktop .site .creator-sticky.desktop-hidden{display:none!important} html.creator-desktop .lift-c .m5hd,html.creator-desktop .lift-c .m3h{text-align:center} html.creator-desktop .lift-c .desktop-moon-group{transform:translate(-40px,-59.2px) scale(1.4);transform-origin:0 0} @media(max-height:780px){ html.creator-desktop .site #c-p-works section[aria-labelledby='c-h-feed'] .g6card{padding-block:16px} html.creator-desktop .site #c-p-works section[aria-labelledby='c-h-feed'] .g6r{padding-block:12px;min-height:48px} html.creator-desktop .site #c-p-works section[aria-labelledby='c-h-feed'] .glass-tap{margin-top:14px} html.creator-desktop .site #c-p-works .creator-browse .cb-row{padding-block:2px;min-height:70px} html.creator-desktop .site #c-p-works .creator-browse .cb-body{height:335px} html.creator-desktop .site #c-p-works .creator-hero{padding-bottom:var(--creator-clear);padding-top:92px} } } @media(min-width:1024px){ html.creator-screens{scroll-snap-type:none} html.creator-screens.creator-free-faq{scroll-snap-type:none} html.creator-desktop .site #c-p-works .cb-row:nth-child(n+4){display:none} html.creator-desktop .site #c-p-works .t3r:not(.on){color:var(--k-sub)} html.creator-desktop .site #c-p-works figure[data-demo='runs'] .kzc{gap:0} html.creator-desktop .site #c-p-works .creator-hero .h6st{flex-shrink:0} } @media(min-width:1024px){ html.creator-desktop:not(.gated) .site .creator-sticky:not(.desktop-hidden){visibility:visible;pointer-events:auto} html.creator-desktop .site #c-p-works .creator-hero figure.scene{width:460px!important} html.creator-desktop .site #c-p-works .creator-hero .h6brief{align-self:flex-start} html.creator-desktop .site #c-p-works .creator-hero .h6brief *{font-size:12px} html.creator-desktop .site #c-p-works .creator-hero .h6bn{font-size:15px} html.creator-desktop .site #c-p-works .creator-hero .h6amt{font-size:0} html.creator-desktop .site #c-p-works .creator-hero .h6amt:after{font-size:24px} @media(max-height:780px){ html.creator-desktop .site #c-p-works .creator-hero .h6st{height:284px!important} html.creator-desktop .site #c-p-works .creator-hero .h6tile,html.creator-desktop .site #c-p-works .creator-hero .h6ring{height:272px!important;top:4px!important} html.creator-desktop .site #c-p-works .creator-hero .h6brief{padding:8px 12px} } } @media(min-width:1024px){ html.creator-desktop .site #c-p-works .cb-caption{max-width:none;width:100%} html.creator-desktop .site #c-p-works>.band>.wrap{flex-shrink:0} @media(max-height:780px){ html.creator-desktop .site #c-p-works .creator-browse .cb-row{min-height:58px} html.creator-desktop .site #c-p-works .creator-browse .cb-body{height:299px} } } @media(min-width:1024px){ html.creator-desktop .site #c-p-works .kbar button{opacity:1} html.creator-desktop .site #c-p-works .kbar{min-height:28px} @media(max-height:780px){ html.creator-desktop .site #c-p-works .creator-hero .h6brief{padding-block:6px} } } @media(min-width:1024px){ html.creator-desktop .site #c-start .acts{margin-top:0} } @media(min-width:1024px){ html.creator-desktop .site #c-p-works .creator-hero .h6brief{width:100%} html.creator-desktop .site #c-p-works figure[data-demo='earn']{overflow:hidden} } /* Approved 16 October: compact application and payment spacing on desktop. */ @media(min-width:1024px){ html.creator-desktop .site #c-p-works .cb-brief,html.creator-desktop .site #c-p-works .cb-pay{padding-block:16px} html.creator-desktop .site #c-p-works .cb-brief-heading{margin-bottom:10px} html.creator-desktop .site #c-p-works .cb-brief-grid{padding-block:10px} html.creator-desktop .site #c-p-works .cb-instruction{margin-block:10px!important} html.creator-desktop .site #c-p-works .cb-pitch{padding-block:10px;min-height:0} html.creator-desktop .site #c-p-works .cb-send{margin-top:10px;padding-block:10px} html.creator-desktop .site #c-p-works .cb-pay h3{margin-block:8px} html.creator-desktop .site #c-p-works .cb-pay>p{margin-bottom:12px} html.creator-desktop .site #c-p-works .cb-pay-card{min-height:0;padding-block:12px;gap:10px} html.creator-desktop .site #c-p-works .cb-note{margin-top:12px} @media(max-height:780px){ html.creator-desktop .site #c-p-works .cb-brief,html.creator-desktop .site #c-p-works .cb-pay{padding-block:8px} html.creator-desktop .site #c-p-works .cb-brief-heading{margin-bottom:0} html.creator-desktop .site #c-p-works .cb-brief-grid{padding-block:4px} html.creator-desktop .site #c-p-works .cb-brief-grid small{margin-bottom:2px} html.creator-desktop .site #c-p-works .cb-instruction{margin-block:4px!important} html.creator-desktop .site #c-p-works .cb-pitch{padding-block:4px} html.creator-desktop .site #c-p-works .cb-pitch small{margin-bottom:2px} html.creator-desktop .site #c-p-works .cb-send{margin-top:4px;padding-block:6px} html.creator-desktop .site #c-p-works .cb-pay h3{margin-block:4px} html.creator-desktop .site #c-p-works .cb-pay>p{margin-bottom:8px} html.creator-desktop .site #c-p-works .cb-pay-card{padding-block:8px;gap:6px} html.creator-desktop .site #c-p-works .cb-note{margin-top:8px} } } @media(min-width:1024px){html.creator-screens{overflow-anchor:none}} @media(min-width:1024px){ /* Keep the astronaut's feet and flag planted on the moon at their shifted x positions. */ html.creator-desktop .lift-c .desktop-moon-ground-as{transform:translateY(3.6px)} html.creator-desktop .lift-c .desktop-moon-ground-flag{transform:translateY(7.2px)} } /* 17 Oct (Mohamed): slimmer compare bar on desktop; scenes grow into the space it frees (creator-desktop.js growScenes). */ @media(min-width:1024px){ html.creator-desktop .site .creator-sticky{bottom:16px;gap:16px;padding:6px 6px 6px 20px} html.creator-desktop .site .creator-sticky strong{font-size:14px} html.creator-desktop .site .creator-sticky .btn{min-height:38px;padding:0 16px;font-size:14px} html.creator-desktop .site #c-p-works>.band.cgrow-band>.wrap{max-width:1360px} html.creator-desktop .site #c-p-works>.band.cgrow-band .split:not(.flip){grid-template-columns:minmax(0,532px) minmax(0,1fr)} html.creator-desktop .site #c-p-works figure.scene[data-cgrow]{scale:var(--cgrow)!important;margin-bottom:var(--cgrow-mb)!important} } /* Brand side, desktop: brand-desktop.js moves one screen per gesture, so the browser's own snapping is switched off only while that is running (html.brand-screens), otherwise it fights the scroll inside screens taller than the window. */ html.brand-screens{scroll-snap-type:none} /* 17 Oct (Mohamed): brand side on phones (640px and under) stops at every section, one swipe at a time, as tablets (641-1023px) already do with the browser's own snapping. Toggled by brand-mobile.js (html.brand-phone-screens). Sections taller than the screen still scroll freely inside; the footer keeps its own end snap. */ @media(max-width:640px){ html.brand-phone-screens{scroll-snap-type:y mandatory} html.brand-phone-screens .site #aud-b section{scroll-snap-stop:always} } /* 22 Oct (Mohamed): "the word submissions is cut off a bit": the four steps in the How Klyp works window size to their words (the spare width is still shared out), so "✓ Submissions" fits even while the window is at its narrowest. */ .site .campaign-overview .h3trk{grid-template-columns:repeat(4,auto)} /* 22 Oct (Mohamed, iPhone): How Klyp works says only "Track everything, chase nothing." on phones, and its animation is bigger. */ .site .campaign-overview .say .say-m{display:none} @media(max-width:640px){ .site .campaign-overview .say .say-d{display:none} .site .campaign-overview .say .say-m{display:inline} /* the whole screen in one view under the top bar: the copy, then the animation grows into all the height that is left (never under 380px), a little wider too (12px side margins instead of 24px; the copy keeps its 24px) */ .site main .campaign-overview{min-height:calc(100svh - 64px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));padding:22px 0 10px;display:flex;flex-direction:column} .site .campaign-overview>.wrap.split{flex:1;display:flex;flex-direction:column;gap:18px;min-height:0;padding-inline:12px} .site .campaign-overview .copy{padding-inline:12px} .site .campaign-overview figure.scene{flex:1;display:flex;flex-direction:column;min-height:0;width:100%;max-width:none;margin:0} .site .campaign-overview figure.scene .kzs{flex:1;min-height:380px!important} .site .campaign-overview figure.scene .kzc{max-width:none} .site .campaign-overview figure.scene .z3st{min-height:0!important} .site .campaign-overview figure.scene .kbar{padding:4px 0 0;min-height:0;justify-content:flex-end;border:0;background:transparent} .site .campaign-overview figure.scene .kbar>span{display:none} .site .campaign-overview figure.scene .kbar button{min-height:30px;padding:4px 12px;font-size:12px} /* 22 Oct, later (Mohamed): "Still too much spacing i can't see the full animation - delete the how klyp works up top": no eyebrow on phones, a tighter heading, sub-line and button, so the animation gets the height */ .site .campaign-overview .copy .eyebrow{display:none} .site main .campaign-overview{padding-top:14px} .site .campaign-overview>.wrap.split{gap:14px} .site .campaign-overview .copy .say{font-size:34px;margin:0} .site .campaign-overview .copy p:not(.eyebrow):not(.say){font-size:16px;line-height:1.35;margin-top:8px} .site .campaign-overview .copy .acts{margin-top:12px} .site .campaign-overview .copy .acts .btn{min-height:44px;padding-block:10px} .site .campaign-overview figure.scene .kzs{min-height:320px!important} } /* 28 Oct (Mohamed, iPhone): "why does the scroll stopper sometimes break?". On phones the creator side only had the browser's loose snapping (proximity), which stops at a section only when a swipe happens to end near one. It now stops at every section, one swipe at a time, as the brand side has done since 17 Oct (creator-mobile.js toggles html.creator-phone-screens). The tab bar rides with the first section under it; sections taller than the screen still scroll freely inside. */ @media(max-width:640px){ html.creator-phone-screens{scroll-snap-type:y mandatory} html.creator-phone-screens .site #aud-c section.band{scroll-snap-align:start;scroll-snap-stop:always} html.creator-phone-screens .site #aud-c .tabs-m{scroll-snap-align:none} html.creator-phone-screens .site #c-p-works>section.band:first-child, html.creator-phone-screens .site #c-p-read>section.band:first-child{scroll-margin-top:60px} } /* 29 Oct (Mohamed, iPhone): "Stand out" and "How do you compare to creators like you?" each fit one phone screen: tighter heading, line and spacing; "Stand out" shows four creators on phones (build_site.py); the comparison card and friend's phone a little smaller. */ @media(max-width:640px){ .site .aud-c section[aria-labelledby="c-h-numbers"],.site .aud-c section[aria-labelledby="c-h-open"]{padding-top:20px;padding-bottom:20px} .site .aud-c section[aria-labelledby="c-h-numbers"] .copy .say,.site .aud-c section[aria-labelledby="c-h-open"] .copy .say{font-size:30px;line-height:1.04} .site .aud-c section[aria-labelledby="c-h-numbers"] .copy p:not(.say):not(.eyebrow),.site .aud-c section[aria-labelledby="c-h-open"] .copy p:not(.say):not(.eyebrow){font-size:15.5px;line-height:1.38;margin-top:8px} .site .aud-c section[aria-labelledby="c-h-numbers"] .split,.site .aud-c section[aria-labelledby="c-h-open"] .split{gap:14px} .site .aud-c section[aria-labelledby="c-h-numbers"] figure.scene .kbar,.site .aud-c section[aria-labelledby="c-h-open"] figure.scene .kbar{padding-top:4px} } @media(max-width:640px){ .site .aud-c section[aria-labelledby="c-h-numbers"] figure.scene .z3st{min-height:0!important;height:232px;flex:none} .site .aud-c section[aria-labelledby="c-h-numbers"] figure.scene .kzs{min-height:0!important} .site .aud-c section[aria-labelledby="c-h-open"] figure.scene .kzs{zoom:.88} } /* 17 Oct (Mohamed): creator moon intro, cleaned up to match the brand intro. 1. Desktop: no 1.4x enlargement of the rocket, astronaut and flag (creator-desktop.css .desktop-moon-group and its two ground nudges). The dotted trail and planet were never enlarged, so the rocket flew off its own trail and across the headline. Now the same composition as the brand intro and as phones. Delete these three selectors to bring the enlargement back. */ @media(min-width:1024px){ html.creator-desktop .lift-c .desktop-moon-group, html.creator-desktop .lift-c .desktop-moon-ground-as, html.creator-desktop .lift-c .desktop-moon-ground-flag{transform:none} /* 2. Desktop: the scene is scaled ~2.2x to fill the screen, which made "Join the waitlist" 92px tall; now about 53px. */ html.creator-desktop .lift-c .m5cta{scale:.58} } /* 3. "Join the waitlist" in the scene takes clicks (it inherited pointer-events:none from .m5cta), opening rank.html#join. */ .site .lift-c .m5btn{cursor:pointer;pointer-events:auto} .site .lift-c .m5btn:focus-visible{outline:3px solid #171717;outline-offset:5px;border-radius:99px} /* 4. The "how you compare" bar stays away while the moon intro fills the screen (creator-moon.js), as on the brand side. */ html.creator-intro-visible .site .creator-sticky{display:none!important} /* 17 Oct (Mohamed): "Log in" and "Sign up" in the top bar (nav-auth.js sets the brand or creator links; since 18 Oct they open auth.html). */ .nav .nav-auth{margin-left:auto;display:flex;align-items:center;gap:4px} .nav .nav-auth + .btn.nav-cta{margin-left:10px} .nav .nav-auth a{display:inline-flex;align-items:center;height:40px;border-radius:999px;font:600 15px/1 var(--body);text-decoration:none;white-space:nowrap} .nav .nav-login{padding:0 12px;color:inherit} .nav .nav-login:hover{background:rgba(23,23,23,.07)} .nav .nav-signup{padding:0 16px;color:#171717;border:1.5px solid #171717} .nav .nav-signup:hover{background:#171717;color:#84C07C} .nav .nav-auth a:focus-visible{outline:3px solid #171717;outline-offset:2px} @media (max-width:440px){ .nav .nav-auth a{height:44px;font-size:14px} .nav .nav-login{padding:0 10px} .nav .nav-signup{padding:0 14px;background:#171717;color:#84C07C;border-color:#171717} } /* 20 Oct (Mohamed, iPhone in the Claude app: "the top bar is scrolling with me but I can see above it, behind it"). When a phone draws the page under the status bar or an app's own header (viewport-fit=cover), the bar sticks below that area (top: safe-area inset), but the page itself started at the very top: content showed above the bar, and the first lines sat under the app's header. The page now starts below that area, and a solid strip in the bar's colour fills it. Where there is no such area (desktop, ordinary phone browsers) the inset is 0 and nothing changes. */ .site{padding-top:env(safe-area-inset-top,0px)} .nav::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:env(safe-area-inset-top,0px);background:#F1F0E9;pointer-events:none} .nav.dark::before{background:#131313} html,html.creator-screens{scroll-padding-top:calc(var(--nav) + env(safe-area-inset-top,0px))} .lift{height:calc(100svh - var(--nav) - env(safe-area-inset-top,0px))} /* 27 Oct (Mohamed): the moon in the middle of the bar (replays the landing) and one button to the other side. */ .nav .wrap{position:relative} .nav .nav-moon{position:absolute;left:50%;top:50%;translate:-50% -50%;width:40px;height:40px;border-radius:50%;border:0;background:transparent;color:inherit;display:grid;place-items:center;cursor:pointer;padding:0} .nav .nav-moon:hover{background:rgba(23,23,23,.07)} .nav.dark .nav-moon:hover{background:rgba(255,255,255,.1)} .nav .nav-moon:focus-visible{outline:3px solid currentColor;outline-offset:2px} .nav .aud-sw.nav-side{margin:0;padding:0;background:none;border:0;gap:0} .nav .nav-side button{height:36px;padding:0 14px;border-radius:999px;border:1.5px solid currentColor;background:transparent;color:inherit;font:600 14px/1 var(--body);opacity:.85} .nav .nav-side button:hover{opacity:1;background:rgba(23,23,23,.07)} .nav .nav-side button[aria-pressed="true"]{display:none} .nav .nav-side .s{display:none} .nav .nav-side button[aria-pressed="false"] + button[aria-pressed="false"]{display:none} @media (max-width:760px){.nav .nav-side .l{display:none}.nav .nav-side .s{display:inline}} @media (max-width:560px){.nav .nav-side button{padding:0 11px;height:34px;font-size:13px}} @media (max-width:400px){.nav .nav-side button{padding:0 9px;font-size:12.5px}} @media (max-width:370px){.nav .wrap{gap:6px}.nav .nav-side button{padding:0 7px}} @media (max-width:440px){ .nav .mark .mk-w{display:none} .nav .wrap{gap:8px} } /* phones: the bar is tight with the moon in the middle. "Join the waitlist" reads "Join" (the hero's button says it in full), the two auth links get a little less padding, and on the narrowest phones the moon steps out of the middle so nothing overlaps. The brand side's "Why creator marketing now?" leaves the bar below 860px for the same reason (it's in the hero too). */ @media (max-width:440px){.nav .nav-signup .jw{display:none}} @media (max-width:380px){.nav .nav-login{padding:0 8px}.nav .nav-signup{padding:0 12px}} /* 27 Oct: the switch now says "I'm a brand →" / "I'm a creator →"; on the narrowest phones (350px and under) that leaves no room for the moon */ @media (max-width:350px){.nav .nav-moon{display:none}} @media (max-width:860px){.nav .nav-cta{display:none}} /* 20 Oct (Mohamed): the moon landing turns into the new hero (hero-morph.js); returning visitors open on the hero (hero-memory.js). The moon scene keeps only its tagline: its second headline and its button are gone, and the brand side's blurred "Why creator marketing now?" question no longer opens (the hero's own button does that job now). */ .lift .m5hl,.lift .m5cta{visibility:hidden!important} .brand-question{display:none!important} html.brand-question-open{overflow:auto!important} #lift .kh-layer{position:absolute;inset:0;pointer-events:none;z-index:20} #lift .kh-host{position:absolute;inset:0;z-index:21} #lift .kh-flag{position:absolute;z-index:22;background:#84C07C;color:#131313;display:flex;align-items:center;justify-content:center;font:900 20px/1 Arial,Helvetica,sans-serif} /* the finished hero: the moon scene is put away, the lift becomes a cream page */ html.k-hero #lift{background:#F1F0E9} html.k-hero #lift .lift-s,html.k-hero #lift .stars{display:none!important} html.k-hero #lift .kh-host{position:relative;inset:auto;height:100%} @media (max-width:600px){ html.k-hero #lift{height:auto!important;min-height:calc(100svh - var(--nav))} html.k-hero #lift .kh-host{height:auto} } /* 20 Oct (Mohamed, phone check): keep the hero and the morph layers inside the lift's own stack, so they scroll under the top bar (z-index 20) instead of over it; and keep the creator "how do you compare" bar off the hero, as it was off the moon. */ #lift{isolation:isolate} html.k-hero-visible .site .creator-sticky{display:none!important} /* 20 Oct (Mohamed, iPhone screenshots: the top line of the hero sat under the top bar). Safari can snap the page so the top of the lift sits under the sticky bar, not honouring the page's scroll-padding. A scroll margin the size of the bar puts the lift's snap position at the very top of the page in every browser (Chrome clamps the doubled offset to 0). */ #lift{scroll-margin-top:var(--nav)} /* 28 Oct: the sidekick cast's happy loops are separate clips in a different pose, so while a loop shows its happy sheet (.lh, switched on by the scenes with autoAlpha) the normal one under it is hidden; before, both showed at once (a double figure). */ .z6lp:has(> .lh[style*="visibility: inherit"]) > .lf{visibility:hidden} /* 28 Oct (Mohamed): "Hire on numbers ... needs to fit on one screen": on phones the section, its line and the four-creator list are trimmed so the heading, toggle and all four rows fit between the top bar and the bottom of a 375×667 screen */ @media (max-width:699px){ .site .aud-b section[aria-labelledby="h-pick"]{padding-top:20px!important;padding-bottom:12px!important;box-sizing:border-box;min-height:calc(100svh - 64px)!important;display:flex!important;flex-direction:column;justify-content:center} .site .aud-b section[aria-labelledby="h-pick"] .copy .say{font-size:clamp(30px,8.4vw,38px)!important;line-height:1.05} .site .aud-b section[aria-labelledby="h-pick"] .copy p:not(.eyebrow):not(.say){font-size:16px!important;line-height:1.4;margin-top:8px} .site .aud-b figure[data-demo="pick"] .z3st{min-height:236px!important} .site .aud-b figure[data-demo="pick"] .kbar{padding-top:4px!important} } /* 29 Oct (Mohamed, after trying light butter): "just revert it back to the way it was. Like, we were just had a cream section, then you scroll and the next section was all background black". The 28 Oct switch to light backgrounds is undone: the dark bands are dark again (build_site.py no longer adds on-cream to them), and the rules that turned their panels, the footer, the hero tile and the page light are gone (the full 28 Oct file is kept as light-before-darkback.css). What stays here is what was asked for separately since: the characters' soft colours instead of bright blue, the "Are you a top creator?" pane-by-pane screens, the bigger creator scenes on desktop, the FAQ answers' wider line (dark grey only on cream), and the creator desktop headings. */ .site .aud-c [data-k="nour-before"],.site .aud-c [data-k="nour-after"],.site .aud-c :has(> .z6lp[data-k="nour-before"]),.site .aud-c :has(> .z6lp[data-k="nour-after"]){--k-cbg:#84C07C} .site .aud-c [data-k="outfit"],.site .aud-c :has(> .z6lp[data-k="outfit"]){--k-cbg:#F5DE9E} .site .aud-c [data-k="gamer"],.site .aud-c :has(> .z6lp[data-k="gamer"]){--k-cbg:#D2C8EA} html.creator-screens .site #c-p-read>.band{box-sizing:border-box;height:var(--creator-height);min-height:var(--creator-height);position:relative} html.creator-screens .site #c-p-read>.band>.tabs-m{position:absolute;inset:0 0 auto;height:60px;scroll-snap-align:none;z-index:3} html.creator-screens .site #c-p-read>.band:first-child{padding-top:60px} html.creator-screens .site #c-p-read>.band>footer{position:absolute;left:0;right:0;bottom:0} html.creator-desktop .site #c-p-works>.band.cgrow-band>.wrap{max-width:1480px} html.creator-desktop .site #c-p-works>.band.cgrow-band .split:not(.flip){grid-template-columns:minmax(0,470px) minmax(0,1fr)} html.creator-desktop .site .aud-c .creator-browse h2{font-size:clamp(38px,4.3vw,78px)} html.creator-desktop .site #c-p-works section[aria-labelledby='c-h-feed'] .copy{text-align:center;margin-inline:auto} html.creator-desktop .site #c-p-works section[aria-labelledby='c-h-feed'] .copy .say, html.creator-desktop .site #c-p-works section[aria-labelledby='c-h-feed'] .copy p{text-align:center;margin-inline:auto} .site .fq .ans p{max-width:820px;text-align:left} .site .on-cream .fq .ans p{color:#3A3935} /* 29 Oct: "Find out where you stand." scene (a_stand, the brand closer's effect): heading, line and button centred; once it floods to cream, the footer inside that band (second tab) switches to ink so the wordmark stays visible. */ .site figure.scene[data-demo="a_stand"] .c3st{align-items:center;text-align:center} .site figure.scene[data-demo="a_stand"] .c3h{text-align:center} .site .closer:has(.scene.cream) footer .mark{color:#171717} .site .closer:has(.scene.cream) footer .mark i{background:#171717;color:#F1F0E9} .site .closer:has(.scene.cream) footer .link{color:#171717;border-bottom-color:rgba(23,23,23,.3)} .site .closer:has(.scene.cream) footer{border-top-color:#D3D2C9!important} /* 29 Oct: "Get in sooner." scene (c_join) centred like "Find out where you stand."; "Use my analytics" grows in under Join the waitlist */ .site figure.scene[data-demo="c_join"] .c3st{align-items:center;text-align:center} .site figure.scene[data-demo="c_join"] .c3h{text-align:center} .site figure.scene[data-demo="c_join"] .c6gh{align-self:center} .site .closer.creator-join .solo > .link{margin-top:clamp(10px,1.6vw,18px)} /* desktop: the creator closer scenes at full size (the creator panes aren't scaled by the page's scene fitting) */ @media(min-width:1024px){ .site figure.scene[data-demo="c_join"] .kzc{max-width:none} .site figure.scene[data-demo="c_join"] .c3st{gap:22px} .site figure.scene[data-demo="c_join"] .c3h{font-size:clamp(56px,5.2vw,84px);line-height:1.02} .site figure.scene[data-demo="c_join"] .c3pl{font-size:clamp(56px,5.2vw,84px)} .site figure.scene[data-demo="c_join"] .c3sub{font-size:clamp(18px,1.5vw,24px)} .site figure.scene[data-demo="c_join"] .c3btn{font-size:20px;padding:18px 34px} .site figure.scene[data-demo="c_join"] .c6gh>span{font-size:17px;padding:12px 24px} } /* 29 Oct (final check): on phones the "Earn in full" scene's footer lay over its Replay button, so taps never reached it; every scene's Replay bar now sits above its scene. */ .site figure.scene .kbar{position:relative;z-index:4} /* The page footer sits above every scene: a scene scaled up to fill its section (fitScenes) carries its Replay bar with it, and that bar must never cover or catch the taps meant for "See the welcome question again". */ .site footer{position:relative;z-index:5} .site .kzs>svg.ks-svg{position:absolute;left:0;top:0;overflow:hidden;pointer-events:none}