/* craftrank.org/craftrank-sites: the CraftRank Sites product page */
.csl{color:#b7b7b7}
.csl img{height:auto}
.csl .w{max-width:1200px;margin:0 auto;padding:0 20px}
.csl h1,.csl h2{font-family:Kanit,sans-serif;font-style:italic;font-weight:800;text-transform:uppercase;color:#fff;line-height:1.02}
.csl .hx{display:grid;grid-template-columns:1fr 1.25fr;gap:60px;align-items:center;padding:70px 0 80px}
.csl h1{font-size:clamp(42px,6vw,72px);letter-spacing:-1px}
.csl .hx p{font:500 20px/1.6 Cairo,sans-serif;color:#c9c9c9;margin:20px 0 30px;max-width:520px}
.csl .hx .btn.o{margin-left:10px}
.csl .hx small{display:block;margin-top:16px;font:500 14px Cairo,sans-serif;color:#888}
.csl .sh{position:relative}
.csl .sh .d{width:100%;box-shadow:0 30px 80px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.08)}
.csl .sh .m{position:absolute;right:-24px;bottom:-50px;width:190px;border:6px solid #111;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.csl .blk{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start;padding:90px 0;border-top:1px solid rgba(255,255,255,.06)}
.csl .blk.flip>.art{order:2}
.csl .art{display:flex;justify-content:center;position:sticky;top:40px;padding-top:30px}
.csl .art:before{content:"";position:absolute;width:420px;max-width:100%;aspect-ratio:1;background:radial-gradient(circle,rgba(255,122,26,.22),rgba(255,122,26,0) 65%);top:50%;left:50%;transform:translate(-50%,-50%)}
.csl .art img{position:relative;max-width:100%}
.csl .art .il{width:420px;filter:drop-shadow(0 30px 40px rgba(0,0,0,.55))}
.csl .art .shot{width:100%;border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 70px rgba(0,0,0,.55)}
.csl h2{font-size:clamp(32px,4vw,44px)}
.csl .lead{font:500 18px/1.65 Cairo,sans-serif;color:#c4c4c4;margin:16px 0 26px}
.csl dl{display:grid;grid-template-columns:1fr 1fr;gap:18px 30px;margin:0}
.csl dl div{border-top:1px solid rgba(255,255,255,.1);padding-top:12px}
.csl dt{font:700 16px Cairo,sans-serif;color:#fff}.csl dd{font:500 14px/1.55 Cairo,sans-serif;color:#a3a3a3;margin:4px 0 0}
.csl .regs{display:flex;flex-direction:column;gap:14px;margin-top:26px}
.csl .regs div{display:grid;grid-template-columns:150px 1fr;gap:14px;align-items:start}
.csl .regs b{font:800 italic 15px Kanit,sans-serif;color:var(--a);text-transform:uppercase;padding-top:6px}
.csl .regs p{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.csl .regs span{padding:6px 11px;background:#262626;font:700 13px Cairo,sans-serif;color:#ddd}
.csl .cmd{margin-top:26px;background:#151515;padding:22px 24px;font:500 15px/1.9 ui-monospace,Menlo,Consolas,monospace;color:#ffb27a;overflow-x:auto}
.csl .cmd b{color:#fff;font-weight:500}.csl .cmd i{font-style:normal;color:#777}
.csl .wide{padding-bottom:90px}.csl .wide img{width:100%;border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 70px rgba(0,0,0,.55)}
.csl .duo{display:grid;grid-template-columns:420px 1fr;gap:60px;align-items:start;padding:90px 0;border-top:1px solid rgba(255,255,255,.06)}
.csl .duo>div>p{font:500 18px/1.65 Cairo,sans-serif;color:#bdbdbd;margin-top:16px}
.csl table{width:100%;border-collapse:collapse;background:#252525}
.csl th,.csl td{padding:16px 22px;border-bottom:1px solid rgba(255,255,255,.06);font:600 16px Cairo,sans-serif;color:#ddd;text-align:left}
.csl th{font:800 italic 22px Kanit,sans-serif;color:#fff;text-transform:uppercase}.csl th small{display:block;font:700 15px Cairo,sans-serif;color:var(--a);text-transform:none;margin-top:4px}
.csl td:not(:first-child),.csl th:not(:first-child){text-align:center}.csl .pro{background:#2b2b2b}
.csl details{border-top:1px solid rgba(255,255,255,.1);padding:18px 0}
.csl summary{font:700 18px Cairo,sans-serif;color:#fff;cursor:pointer}
.csl details p{font:500 15px/1.65 Cairo,sans-serif;color:#a8a8a8;margin:8px 0 0}
.csl .end{background:var(--a);margin-top:20px}
.csl .end .w{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:60px;padding-bottom:60px;flex-wrap:wrap}
.csl .end h2{color:#140a02}.csl .end .btn,.volt .csl .end a.btn:not(.o){background:#140a02;color:#fff}
@media (max-width:900px){.csl .hx,.csl .blk,.csl .duo{grid-template-columns:1fr;gap:34px}.csl .blk.flip>.art{order:0}.csl .art{position:relative;padding-top:0}.csl .art:before{width:260px}.csl .blk{padding:60px 0}.csl .art .il{width:260px}.csl dl{grid-template-columns:1fr}.csl .regs div{grid-template-columns:1fr;gap:6px}.csl .sh .m{width:120px;right:-6px;bottom:-30px}.csl .hx .btn.o{margin:10px 0 0}}
.csl .cmpx{padding:90px 0;border-top:1px solid rgba(255,255,255,.06)}
.csl .cmph{display:grid;grid-template-columns:300px 1fr;gap:40px;align-items:center;margin-bottom:30px}
.csl .cmph img{width:300px;filter:drop-shadow(0 26px 34px rgba(0,0,0,.55))}
.csl .cmpw{overflow-x:auto}
.csl .vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.csl .cmpw{background:#191919;border:1px solid rgba(255,255,255,.06);padding:0 18px}
.csl table.vs{min-width:900px;width:100%;border-collapse:separate;border-spacing:0;background:transparent;table-layout:fixed}
.csl .vs th,.csl .vs td{padding:13px 10px;border:0;border-bottom:1px solid rgba(255,255,255,.055);text-align:center!important;vertical-align:middle;font:600 15px/1.3 Cairo,sans-serif;color:#9a9a9a;background:transparent}
.csl .vs tbody tr:last-child>*{border-bottom:0}
.csl .vs tbody tr:hover>*{background:rgba(255,255,255,.025)}
.csl .vs td>span{display:inline-flex;align-items:center;gap:6px}
.csl .vs td .lu{flex:none}
.csl .vs thead th{padding:26px 10px 18px;font:800 italic 14px/1.2 Kanit,sans-serif;text-transform:uppercase;color:#bdbdbd;border-bottom-color:rgba(255,255,255,.12)}
.csl .vs thead th:first-child,.csl .vs tbody th{width:200px;text-align:left!important}
.csl .vs tbody th{font:700 15px Cairo,sans-serif;text-transform:none;color:#fff;white-space:nowrap}
.csl .vs tbody th .ic{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:#242424;vertical-align:middle;margin-right:12px}
.csl .vs tbody th .ic img{width:28px;height:28px;object-fit:contain}
.csl .vs .us{position:relative;background:linear-gradient(rgba(255,122,26,.11),rgba(255,122,26,.11)),#1f1f1f;border-left:1px solid rgba(255,122,26,.35);border-right:1px solid rgba(255,122,26,.35)}
.csl .vs tbody tr:hover>.us{background:linear-gradient(rgba(255,122,26,.15),rgba(255,122,26,.15)),#1f1f1f}
.csl .vs thead th.us{color:var(--a);font-size:16px;padding-left:6px;padding-right:6px;border-top:1px solid rgba(255,122,26,.35)}
.csl .vs thead th.us:before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:4px;background:var(--a)}
.csl .vs tbody tr:last-child>.us{border-bottom:1px solid rgba(255,122,26,.35)}
.csl .vs td.y{color:#86e9a4}.csl .vs td.n{color:#8a8a8a}.csl .vs td.n .lu{color:#ff7d7d}
.csl .vs td.us{color:#fff;font-weight:800}.csl .vs td.us.y .lu{color:#86e9a4}
.csl .fine{font:500 13px/1.6 Cairo,sans-serif;color:#888;margin-top:14px}
@media (max-width:900px){.csl .cmpw{padding:0}.csl .vs thead th:first-child,.csl .vs tbody th{width:170px}.csl .vs tbody th .ic{margin-right:8px}.csl .cmph{grid-template-columns:1fr}.csl .cmph img{width:200px}.csl .vs tbody th{position:sticky;left:0;background:#1c1c1c;z-index:1}}
/* v2 layout: centred hero, admin screens, feature grid, colours, category views, "and the rest" */
.csl .hz{text-align:center;padding:76px 0 40px}
.csl .hz h1{font-size:clamp(40px,6.4vw,82px);max-width:15ch;margin:0 auto}
.csl .hz>p{font:500 20px/1.6 Cairo,sans-serif;color:#c9c9c9;margin:22px auto 30px;max-width:60ch}
.csl .hz .hb{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.csl .hz small{display:block;margin-top:16px;font:500 14px Cairo,sans-serif;color:#888}
.csl .hshot{position:relative;margin:56px auto 0;max-width:1100px}
.csl .hshot>img{display:block;width:100%;height:auto;max-height:620px;object-fit:cover;object-position:top;box-shadow:0 40px 90px rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.08)}
.csl .hshot .m{position:absolute;right:-30px;bottom:-40px;width:200px;max-height:none;border:6px solid #111}
.csl .facts{list-style:none;margin:70px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 34px}
.csl .facts li{display:flex;align-items:center;gap:10px;font:700 16px Cairo,sans-serif;color:#e6e6e6}
.csl .facts img{width:44px;height:44px;object-fit:contain}
.csl .sec{padding:90px 0;border-top:1px solid rgba(255,255,255,.06)}
.csl .sh2{max-width:760px;margin-bottom:34px}
.csl .sh2 p{font:500 18px/1.6 Cairo,sans-serif;color:#bdbdbd;margin:14px 0 0}
.csl .pair{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.csl figure{margin:0}
.csl .pair img,.csl .fgrid img,.csl .accs img{display:block;width:100%;height:auto;border:1px solid rgba(255,255,255,.08)}
.csl .pair figcaption{font:500 15px/1.55 Cairo,sans-serif;color:#aaa;margin-top:12px}
.csl .fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.csl .fgrid article{background:#1b1b1b;padding:0 0 18px}
.csl .fgrid img{aspect-ratio:16/10;object-fit:cover;object-position:left top;border:0}
.csl .fgrid h3{font:800 italic 20px/1.1 Kanit,sans-serif;text-transform:uppercase;color:#fff;margin:16px 18px 6px}
.csl .fgrid p{font:500 15px/1.5 Cairo,sans-serif;color:#aaa;margin:0 18px}
.csl .split{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
.csl .ticks{list-style:none;padding:0;margin:20px 0 0}
.csl .ticks li{position:relative;padding:7px 0 7px 26px;font:600 16px/1.45 Cairo,sans-serif;color:#d8d8d8}
.csl .ticks li:before{content:"";position:absolute;left:0;top:14px;width:10px;height:10px;background:var(--a)}
.csl .sw{display:flex;gap:10px;margin-top:26px}
.csl .sw button{width:40px;height:40px;border:0;background:var(--k);cursor:pointer;outline:2px solid transparent;outline-offset:3px}
.csl .sw button.on,.csl .sw button:focus-visible{outline-color:#fff}
.csl .views{display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px;align-items:start}
.csl .views img{display:block;width:100%;height:auto;background:#0b0b0c;border:1px solid rgba(255,255,255,.08)}
.csl .views figcaption{font:500 15px/1.5 Cairo,sans-serif;color:#aaa;margin-top:12px}.csl .views figcaption b{display:block;font:800 italic 18px Kanit,sans-serif;text-transform:uppercase;color:#fff;margin-bottom:2px}
.csl .cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.csl .cols3 h3{font:800 italic 22px/1 Kanit,sans-serif;text-transform:uppercase;color:#fff;margin:0}
.csl .demo .dh{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:28px}
.csl .demo h2{margin-top:0}.csl .demo .lead{max-width:640px;margin-bottom:0}.csl .demo .dh .btn{flex:none}
.csl .dg{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.csl .dg a{display:block;background:#1b1b1b;text-decoration:none;padding-bottom:18px;outline:2px solid transparent;transition:outline-color .15s}
.csl .dg a:hover,.csl .dg a:focus-visible{outline-color:var(--a)}
.csl .dg img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.csl .dg b{display:block;font:800 italic 20px/1.1 Kanit,sans-serif;text-transform:uppercase;color:#fff;margin:16px 18px 6px}
.csl .dg span{display:block;font:500 15px/1.5 Cairo,sans-serif;color:#aaa;margin:0 18px}
.csl .more{display:inline-block;margin-top:24px;font:800 italic 16px Kanit,sans-serif;text-transform:uppercase;color:var(--a);text-decoration:none;border-bottom:2px solid var(--a);padding-bottom:2px}
.csl .pw{display:grid;grid-template-columns:240px 1fr;gap:40px;align-items:start}
.csl .pt{display:flex;flex-direction:column;border-left:1px solid rgba(255,255,255,.1)}
.csl .pt button{display:flex;justify-content:space-between;align-items:baseline;gap:12px;background:none;border:0;border-left:3px solid transparent;margin-left:-2px;padding:12px 0 12px 18px;font:800 italic 18px/1.1 Kanit,sans-serif;text-transform:uppercase;color:#8a8a8a;text-align:left;cursor:pointer}
.csl .pt button small{font:700 14px Cairo,sans-serif;color:#666}
.csl .pt button:hover{color:#ddd}
.csl .pt button[aria-selected=true]{color:#fff;border-left-color:var(--a)}
.csl .pt button[aria-selected=true] small{color:var(--a)}
.csl .pt button:focus-visible{outline:2px solid var(--a);outline-offset:2px}
.csl .pg{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.csl .pg[hidden]{display:none}
.csl .pv{position:relative;background:#242424;border:1px solid rgba(255,255,255,.05);padding:20px 22px 18px;display:flex;flex-direction:column;gap:8px;min-height:150px;transition:border-color .15s,background .15s}
.csl .pv:before{content:"";position:absolute;left:-1px;top:-1px;width:44px;height:4px;background:var(--a);transform:skewX(-20deg);transform-origin:left top}
.csl .pv:hover{border-color:rgba(255,255,255,.14);background:#272727}
.csl .pv b{font:800 italic 21px/1.05 Kanit,sans-serif;text-transform:uppercase;color:#fff}
.csl .pv span{font:500 14.5px/1.5 Cairo,sans-serif;color:#b8b8b8;flex:1}
.csl .pv small{display:flex;flex-wrap:wrap;gap:5px;padding-top:12px;margin-top:4px;border-top:1px solid rgba(255,255,255,.07)}
.csl .pv small i{font:700 12px/1 Cairo,sans-serif;font-style:normal;color:#cfcfcf;background:#303030;padding:5px 7px}
.csl .pv small i.n{color:#8d8d8d;background:none;padding-left:2px}
.csl .pv small i.any{color:var(--a);background:rgba(255,122,26,.1)}
@media (max-width:900px){.csl .pw{grid-template-columns:1fr;gap:18px}.csl .pt{flex-direction:row;overflow-x:auto;border-left:0;border-bottom:1px solid rgba(255,255,255,.1);scrollbar-width:none}.csl .pt button{flex:none;border-left:0;border-bottom:3px solid transparent;margin:0 0 -1px;padding:10px 14px;font-size:15px}.csl .pt button[aria-selected=true]{border-bottom-color:var(--a)}.csl .pg{grid-template-columns:1fr 1fr;gap:10px}.csl .pv{padding:16px 14px 14px;min-height:0}.csl .pv b{font-size:17px}.csl .pv span{font-size:13.5px}}
@media (max-width:520px){.csl .pg{grid-template-columns:1fr}}
@media (max-width:900px){.csl .demo .dh{display:block}.csl .demo .dh .btn{margin-top:20px}.csl .dg{grid-template-columns:1fr 1fr;gap:12px}.csl .dg b{font-size:16px;margin:10px 10px 4px}.csl .dg span{font-size:13px;margin:0 10px}.csl .dg a{padding-bottom:12px}.csl .pair,.csl .fgrid,.csl .split,.csl .views,.csl .cols3{grid-template-columns:1fr}.csl .hshot .m{display:none}.csl .facts{justify-content:flex-start}.csl .hz{text-align:left}.csl .hz .hb{justify-content:flex-start}.csl .hz h1,.csl .hz>p{margin-left:0}}
/* ---- v3 (Figma "Sites page, blurred product + script"): big word, hand-written second line, blurred product behind ---- */
@font-face{font-family:Yellowtail;src:url(../fonts/yellowtail-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
.csx{background:#0b0b0c}
.xb{position:relative;overflow:hidden;background:#0b0b0c center/cover no-repeat;padding:110px 16px}
.xb:before{content:"";position:absolute;inset:0;background:linear-gradient(#0b0b0c,rgba(11,11,12,0) 220px,rgba(11,11,12,0) calc(100% - 220px),#0b0b0c),radial-gradient(ellipse at center,rgba(11,11,12,.15),rgba(11,11,12,.88) 75%);pointer-events:none}
.xb>*{position:relative}
.xs{position:absolute!important;border:2px solid rgba(255,255,255,.06);transform:rotate(45deg);pointer-events:none}
.xs.a{width:420px;height:420px;left:-140px;top:70px}.xs.b{width:300px;height:300px;right:-90px;bottom:50px}
.csx .xw{position:relative;display:inline-block;margin:0;font:800 italic clamp(64px,12vw,170px)/.86 Kanit,sans-serif;text-transform:uppercase;color:#fff;letter-spacing:-.02em}
.csx .xw.m{font-size:clamp(54px,8.5vw,120px)}
.xsc{position:absolute;right:-.35em;bottom:-.62em;font:400 .56em/1 Yellowtail,cursive;letter-spacing:0;text-transform:none;color:var(--a);transform:rotate(-7deg);white-space:nowrap;text-shadow:0 6px 18px rgba(0,0,0,.6)}
.xw.m .xsc{font-size:.52em;right:auto;left:.3em;bottom:-.66em}
.xh,.xc{text-align:center}
.xh{padding-top:140px}
.xsub{max-width:600px;margin:70px auto 28px;font:500 18px/1.65 Cairo,sans-serif;color:#bdbdbd}
.xc .xsub{margin-top:64px}
.xbt{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.xmark{display:inline-block;margin:36px 0 0;padding-top:12px;border-top:1px solid #333;font:800 italic 14px Kanit,sans-serif;text-transform:uppercase;letter-spacing:.12em;color:#777}
.xshot{display:block;width:100%;height:auto;border:1px solid #2c2c2c;box-shadow:0 30px 70px rgba(0,0,0,.7)}
.xhs{max-width:1000px;margin:70px auto 0}
.xds{position:relative;max-width:1000px;margin:70px auto 0}
.xds>input{position:absolute;opacity:0;pointer-events:none}
.xds .xhs{margin:0}
.xdt{display:flex;justify-content:center;gap:10px;margin-bottom:22px;flex-wrap:wrap}
.xdt label{display:flex;flex-direction:column;align-items:center;min-width:190px;padding:10px 20px;background:#151515;border:1px solid #2c2c2c;cursor:pointer;font:800 italic 18px/1.1 Kanit,sans-serif;text-transform:uppercase;color:#bbb;transition:border-color .15s,color .15s}
.xdt small{font:600 13px Cairo,sans-serif;text-transform:none;color:#888;margin-top:2px}
.xdt label:hover{color:#fff}
#xds-f:checked~.xdt [for=xds-f],#xds-e:checked~.xdt [for=xds-e]{border-color:var(--a);color:#fff;box-shadow:inset 0 -3px 0 var(--a)}
#xds-f:focus-visible~.xdt [for=xds-f],#xds-e:focus-visible~.xdt [for=xds-e]{outline:2px solid #fff;outline-offset:2px}
.xds .xde,#xds-e:checked~.xdf{display:none}
#xds-e:checked~.xde{display:block}
.xds>a{display:block}
@media (max-width:600px){.xds{margin-top:44px}.xdt{flex-wrap:nowrap;gap:8px;margin-bottom:14px}.xdt label{flex:1;min-width:0;padding:8px 6px;font-size:15px}.xdt small{font-size:11.5px}}
.xf{padding:44px 0 10px}
.xr{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:center;width:min(1080px,100%);margin:0 auto}
.xb.flip .xr{grid-template-columns:1.15fr .85fr}.xb.flip .xt{order:2}
.csx .xt .xw{margin-bottom:70px}
.xp{font:500 17px/1.65 Cairo,sans-serif;color:#c4c4c4;margin:0}
.xl{list-style:none;padding:0;margin:20px 0 0}
.xl li{padding:10px 0;border-top:1px solid #262626;font:600 15.5px/1.45 Cairo,sans-serif;color:#ddd}
.xl li b{display:inline-block;min-width:92px;margin-right:10px;font:800 italic 15px Kanit,sans-serif;text-transform:uppercase;color:var(--a)}
.xmore{display:inline-block;margin-top:20px;font:800 italic 15px Kanit,sans-serif;text-transform:uppercase;color:var(--a);border-bottom:2px solid var(--a);text-decoration:none}
.xpay{background:#0b0b0c;padding:10px 0 90px}
.xpay .pw{margin-top:0}
.xc .dg{margin-top:10px;text-align:left}
.mk{display:grid;grid-template-columns:300px minmax(0,1fr);gap:28px;align-items:start;margin:10px 0 30px;text-align:left}
.mk>input{position:absolute;opacity:0;pointer-events:none}
.mkp{background:#141414;border:1px solid #2c2c2c;padding:20px 20px 16px}
.mkg+.mkg{margin-top:18px;padding-top:16px;border-top:1px solid #242424}
.mkg h3{margin:0 0 10px;font:800 italic 15px/1 Kanit,sans-serif;text-transform:uppercase;color:#fff}
.mko{display:flex;flex-wrap:wrap;gap:8px}
.mko label{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 12px;background:#1c1c1c;border:1px solid #333;cursor:pointer;font:700 14px Cairo,sans-serif;color:#ccc;transition:border-color .15s,color .15s}
.mko label:hover{color:#fff;border-color:#555}
.mko label em{font:800 italic 10px Kanit,sans-serif;font-style:normal;text-transform:uppercase;padding:1px 5px;background:var(--a);color:#000}
.mko-colour{display:grid;grid-template-columns:repeat(6,1fr)}.mko-colour label{padding:0;height:40px;justify-content:center;background:none}
.mko-colour i{display:block;width:calc(100% - 8px);height:30px}
.mko-picture,.mko-logo{display:grid;grid-template-columns:1fr 1fr}
.mko-picture label{flex-direction:column;align-items:stretch;padding:4px;gap:4px;font-size:12px}
.mko-picture img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.mko-picture span{padding:0 4px 2px}
.mko-logo label{justify-content:center;height:74px;padding:6px;background:#101010}.mko-logo img{max-height:60px;width:auto;max-width:100%;object-fit:contain}
.mkn{margin:16px 0 0;font:500 13px/1.5 Cairo,sans-serif;color:#888}
.mkv figure{display:none;margin:0}
.mkv img{display:block;width:100%;height:auto;border:1px solid #2c2c2c;border-top:0;box-shadow:0 30px 70px rgba(0,0,0,.7)}
.mkb{display:flex;align-items:center;justify-content:space-between;gap:10px;height:34px;padding:0 6px 0 14px;background:#1a1a1a;border:1px solid #2c2c2c;font:600 13px Cairo,sans-serif;color:#999}
.mkb a{padding:3px 10px;font:800 italic 12px Kanit,sans-serif;text-transform:uppercase;color:#fff;border:1px solid #444}.mkb a:hover{border-color:var(--a)}
.mkv figcaption{margin-top:12px;font:600 14px Cairo,sans-serif;color:#aaa}
@media (max-width:900px){.mk{grid-template-columns:1fr}.mkv{order:-1}.mko-picture,.mko-logo{grid-template-columns:repeat(4,1fr)}.mko-logo label{height:56px}.mko-logo img{max-height:44px}}
.xc .dgh{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin:56px 0 18px;text-align:left}.xc .dgh:first-child{margin-top:10px}
.xc .dgh a{font:800 italic 30px/1 Kanit,sans-serif;text-transform:uppercase;color:#fff;text-decoration:none}.xc .dgh a:hover{color:var(--a)}
.xc .dgh span{font:600 15px Cairo,sans-serif;color:#aaa}
.xcmp{padding-top:90px;text-align:center}.xcmp .cmpw{text-align:left}.xcmp .fine{text-align:left}
.xprice{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:10px;text-align:left}
.xpc{border:1px solid #2c2c2c;background:rgba(10,10,10,.78);padding:30px}
.xpc.pro{border-color:var(--a)}
.xpc>b{font:800 italic 18px Kanit,sans-serif;text-transform:uppercase;color:#fff}
.xpr{font:800 italic 56px/1.05 Kanit,sans-serif;color:#fff;margin:6px 0 4px}.xpr small{font:600 16px Cairo,sans-serif;color:#999;margin-left:10px}
.xpc .xl li{font-size:15px}
.xfaq{margin-top:56px;text-align:left}
.xfaq h3{font:800 italic 24px Kanit,sans-serif;text-transform:uppercase;color:#fff;margin:0 0 10px}
.xend{padding:140px 16px 150px}.xend .xbt{margin-top:100px}
@media (max-width:900px){
  .xb{padding:80px 16px}.xh{padding-top:90px}
  .xr,.xb.flip .xr{grid-template-columns:1fr;gap:34px}.xb.flip .xt{order:0}
  .xt{text-align:center}.xt .xl{text-align:left}
  .xprice{grid-template-columns:1fr}
  .xs.a{width:240px;height:240px}.xs.b{display:none}
  .xl li b{display:block;min-width:0;margin:0 0 2px}.csx .xt .xw{margin-bottom:56px}
  .xsc{right:-.1em}
}
/* type sizes exactly as the Figma page (1440 wide); they scale down only below that */
.csx .xw{font-size:min(170px,12vw)}
.csx .xw.m{font-size:min(120px,8.5vw)}
.csx .xh .xsc,.csx .xend .xsc{font-size:min(96px,6.8vw);right:-30px;bottom:-70px}
.csx .xw.m .xsc{font-size:min(74px,5.2vw);left:40px;bottom:-56px}
.csx .xsub,.csx .xp{font:500 18px/1.6 Cairo,sans-serif}
.csx .xl li{font:600 16px/1.45 Cairo,sans-serif}
.csx .xl li b{font-size:15px}
.csx .xpr{font-size:56px}
@media (min-width:901px){.csx .xt .xw{margin-bottom:100px}}
.csx .xfaq summary{font:700 17px Cairo,sans-serif;color:#eee}
@media (max-width:900px){.csx .xw{font-size:clamp(54px,15vw,120px)}.csx .xw.m{font-size:clamp(48px,13vw,96px)}.csx .xh .xsc,.csx .xend .xsc{font-size:.56em;right:-.1em;bottom:-.62em}.csx .xw.m .xsc{font-size:.56em;left:.3em;bottom:-.66em}.csx .xsub,.csx .xp{font-size:16.5px}}
/* the last band runs straight into the footer, and the hand-written line keeps clear of the buttons */
.csx+.ft,.csx~.ft{margin-top:0}
.csx .xend{margin-bottom:0}
.csx .xend .xbt{margin-top:120px}
/* hand-written line: Mr Dafoe (owner's pick), a little bigger since it is a narrow signature face */
@font-face{font-family:"Mr Dafoe";src:url(../fonts/mr-dafoe-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
.csx .xsc{font-family:"Mr Dafoe",Yellowtail,cursive;letter-spacing:.01em}
.csx .xh .xsc,.csx .xend .xsc{font-size:min(120px,8.5vw);bottom:-80px}
.csx .xw.m .xsc{font-size:min(92px,6.5vw);bottom:-62px}
@media (max-width:900px){.csx .xh .xsc,.csx .xend .xsc{font-size:.72em;bottom:-.66em}.csx .xw.m .xsc{font-size:.72em;bottom:-.7em}}
/* room under the taller signature line */
@media (min-width:901px){.csx .xt .xw{margin-bottom:130px}.csx .xh .xsub{margin-top:110px}.csx .xc .xsub{margin-top:100px}.csx .xend .xbt{margin-top:150px}.csx .xcmp .xsub{margin-top:100px}}

/* winter sale above the hero word: just the words, with ice snowflakes on both sides */
.xsale{position:relative;display:flex;flex-direction:column;align-items:center;width:max-content;max-width:100%;margin:0 auto 64px;padding:0 120px;line-height:1}
.xsale b{font:800 italic clamp(40px,5.4vw,72px)/.9 Kanit,sans-serif;text-transform:uppercase;letter-spacing:-.01em;color:#eaf6ff;text-shadow:0 0 26px rgba(120,190,255,.55),0 4px 0 #2d6fae}
.xsale span{margin-top:12px;font:800 italic clamp(18px,2vw,26px)/1 Kanit,sans-serif;text-transform:uppercase;color:#fff}
.xsale s{color:#7f93aa;margin-right:6px}
.xsale .sf{position:absolute;pointer-events:none;filter:drop-shadow(0 8px 16px rgba(0,0,0,.6))}
.xsale .sf.a{left:0;top:-34px;width:110px;height:auto;transform:rotate(-14deg)}.xsale .sf.b{left:58px;bottom:-30px;width:62px;height:auto}
.xsale .sf.c{right:62px;top:-30px;width:56px;height:auto}.xsale .sf.d{right:0;bottom:-26px;width:100px;height:auto;transform:rotate(12deg)}
@media (max-width:600px){.xsale{padding:0 64px;margin-bottom:44px}.xsale b{font-size:34px;white-space:nowrap}.xsale .sf.a{width:64px;top:-22px}.xsale .sf.b{width:38px;left:26px;bottom:-18px}.xsale .sf.c{width:36px;right:30px;top:-18px}.xsale .sf.d{width:58px;bottom:-16px}}