/* The cleanup: one shell for every page. One top bar, one Mac window per page, one app row, one card, one main button,
   folds instead of stacked boxes, and on phones a tab bar like an iPhone app. Loaded after style.css on every page.
   Kit classes all start with cl- so they never meet an older rule. Sides use logical properties, so Arabic flips by itself. */
:root{--cl-t1:40px;--cl-t2:26px;--cl-t3:19px;--cl-s2:8px;--cl-s3:12px;--cl-s4:16px;--cl-s5:24px;--cl-s6:32px;--cl-s7:48px;--cl-rad:10px;--cl-bd:1.5px solid var(--ink);--cl-hair:1px solid var(--line);--cl-gold:#fff6d6;--cl-goldline:#e9cf6d}

/* ---------- top bar ---------- */
.cltop .topin{gap:20px;height:56px}
.cltop:after{height:3px}
.cltop .clnav{display:flex;align-items:center;gap:4px;flex:none}
.cltop .clnav>a,.cltop .clnav>.menu>summary{display:inline-flex;align-items:center;gap:4px;padding:6px 10px;border-radius:7px;font-size:14px;color:var(--mute);text-decoration:none}
.cltop .clnav>a:hover,.cltop .clnav>.menu>summary:hover{background:var(--box);color:var(--ink);text-decoration:none}
.cltop .clnav>a[aria-current],.cltop .clnav>.menu>summary.on{color:var(--ink);background:var(--box);box-shadow:inset 0 0 0 1px var(--line);text-decoration:none}
.cltop .clnav>.menu>summary:after{content:none}
.cltop .clnav .navbfl{margin-inline-start:4px}
.cltop .topsearch{flex:1;max-width:260px;width:auto;margin-inline-start:auto}
.cltop .topsearch input{border-color:var(--line);background:#fffdf6;height:36px;border-radius:8px}
.cltop .btngo{flex:none;white-space:nowrap}
.cltop .acctmenu{flex:none}
.cltop .acctmenu>summary.acct,.cltop .topme>summary{width:36px;height:36px;border-radius:50%;border:var(--cl-bd);display:grid;place-items:center;background:var(--paper);color:var(--ink);padding:0}
.cltop .acctmenu>summary.acct:after{content:none}
.cltop .acctmenu .menubox,.cltop .topme .menubox{inset-inline-start:auto;inset-inline-end:0;left:auto}
.acctkeep{padding:4px 6px 6px}
.acctrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:6px}
.acctrow .langbar{margin:0}
.acctrow .topx{display:inline-flex!important}
.acctrow .thm{display:inline-flex!important}
.cltop .plbchip{display:none}
/* The bar split around Pip's notch, like a MacBook menu bar (the owner, 14 Nov 2026; the notch itself is public/notch.css).
   Full width. Left: logo, switch, Today, Browse, Deals. The notch sits in the middle of the page. Right: Makers, Pips, search, Submit, account.
   The nav keeps its one <nav> and lays its links out in the bar (display:contents), so Makers can start the right half. */
.cltop.hasnotch .topin{max-width:none;padding-inline:24px;gap:4px}
.cltop.hasnotch .topin>.logo{margin-inline-end:12px}
.cltop.hasnotch .clnav{display:contents}
.cltop.hasnotch .clnav>.mkmenu{margin-inline-start:auto}
.cltop.hasnotch .clnav>.mkmenu .menubox{inset-inline-start:auto;inset-inline-end:0;left:auto}
.cltop.hasnotch .topsearch{flex:0 1 220px;max-width:220px;margin-inline-start:8px;position:relative}
.cltop.hasnotch .btngo{margin-inline-start:8px}
.cltop.hasnotch .acctmenu{margin-inline-start:8px}
.cltop .srchgo{display:none}
/* Below 1300px the search is an icon; it, or Cmd+K, opens the field under the bar (public/notch.js). */
@media (max-width:1300px){
  .cltop.hasnotch .topsearch{display:flex;flex:none;width:36px;max-width:none}
  .cltop.hasnotch .topsearch>input,.cltop.hasnotch .topsearch>kbd{display:none}
  .cltop.hasnotch .srchgo{all:unset;box-sizing:border-box;display:grid;place-items:center;width:36px;height:36px;border-radius:8px;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer}
  .cltop.hasnotch .srchgo:hover,.cltop.hasnotch .topsearch.open .srchgo{background:var(--box)}
  .cltop.hasnotch .srchgo:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  .cltop.hasnotch .srchgo svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
  .cltop.hasnotch .topsearch.open>input{display:block;position:absolute;top:46px;inset-inline-end:0;width:300px;z-index:50;box-shadow:3px 3px 0 var(--ink);border:1.5px solid var(--ink)}
}
/* Narrower desktops: the pills get tighter and the Black Friday label waits on the Deals page, so both halves keep clear of the notch. */
@media (max-width:1180px){
  .cltop.hasnotch .clnav>a,.cltop.hasnotch .clnav>.menu>summary{padding:6px 8px;font-size:13.5px}
  .cltop.hasnotch .clnav .navbfl{display:none}
}
/* Tablets and small laptops: the notch takes its phone size (public/notch.css), and the bar drops, in this order, the iPip switch,
   the Pips link (it stays in the footer and the phone tab bar), then the MacPip word and the Deals count. Phones (760 and down) are cleanup's. */
@media (min-width:761px) and (max-width:1050px){.cltop.hasnotch .ipswtop{display:none}}
@media (min-width:761px) and (max-width:960px){.cltop.hasnotch .clnav>a[href="/leaderboard/pips"]{display:none}}
@media (min-width:761px) and (max-width:880px){
  .cltop.hasnotch .logow,.cltop.hasnotch .clnav .navn{display:none}
  .cltop.hasnotch .topsearch{display:none}
  .cltop.hasnotch .btngo,.cltop.hasnotch .acctmenu{margin-inline-start:4px}
  .cltop.hasnotch .clnav>a,.cltop.hasnotch .clnav>.menu>summary{padding:6px 6px}
}
@media (max-width:760px){.cltop.hasnotch .btngo{margin-inline-start:auto}.cltop.hasnotch .topin{padding-inline:16px}}

/* ---------- one quiet ticker line for time-limited things ---------- */
.cl-ticker{border-bottom:var(--cl-hair);background:var(--paper);font-size:13px}
.cl-ticker .wrap{display:flex;gap:var(--cl-s5);align-items:center;min-height:34px;overflow:hidden;white-space:nowrap}
.cl-ticker b{font:9.5px var(--pixel);letter-spacing:.08em;padding:2px 6px;border-radius:4px;background:var(--ink);color:var(--paper);margin-inline-end:6px}
.cl-ticker b.bf{background:var(--r)}
.cl-ticker a{text-decoration:underline;text-underline-offset:2px}

/* ---------- the window: one per page, like a Mac app ---------- */
.cl-page{padding:var(--cl-s6) 0 var(--cl-s7)}
.cl-head{display:flex;align-items:flex-end;gap:var(--cl-s4);flex-wrap:wrap;margin-bottom:var(--cl-s5)}
.cl-head h1{font-size:var(--cl-t1);line-height:1.05}
.cl-head p{color:var(--mute);margin-top:6px;max-width:62ch}
.cl-head .cl-end{margin-inline-start:auto;display:flex;gap:8px;align-items:center}
.cl-win{background:var(--paper);border:var(--cl-bd);border-radius:var(--cl-rad);box-shadow:5px 5px 0 var(--ink);overflow:hidden;margin-bottom:var(--cl-s5)}
.cl-wbar{position:relative;height:28px;display:flex;align-items:center;justify-content:center;border-bottom:var(--cl-bd);background:repeating-linear-gradient(180deg,var(--ink) 0 1px,var(--paper) 1px 3px) center/calc(100% - 52px) 15px no-repeat,var(--paper)}
.cl-wbar:before{content:"";position:absolute;inset-inline-start:10px;top:6px;width:13px;height:13px;border:1.5px solid var(--ink);background:var(--paper)}
.cl-wbar>span,.cl-wbar>h2{background:var(--paper);padding:0 10px;font:10px/1 var(--pixel);letter-spacing:.12em;text-transform:uppercase;margin:0}
.cl-wbar .cl-wr{position:absolute;inset-inline-end:8px;top:3px;display:flex;gap:4px}
.cl-tools{display:flex;align-items:center;gap:var(--cl-s3);padding:var(--cl-s3) var(--cl-s5);border-bottom:var(--cl-hair);background:#f6f1e3;flex-wrap:wrap}
.cl-seg{display:inline-flex;border:1px solid var(--ink);border-radius:8px;overflow:hidden;background:var(--paper);max-width:100%}
.cl-seg>a,.cl-seg>button{border:0;background:none;font:13px var(--sans);padding:6px 13px;color:var(--mute);border-inline-end:1px solid var(--line);cursor:pointer;white-space:nowrap;text-decoration:none}
.cl-seg>a:last-child,.cl-seg>button:last-child{border-inline-end:0}
.cl-seg>.on,.cl-seg>[aria-current],.cl-seg>[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.cl-wbody{padding:var(--cl-s5)}
.cl-sec{padding:var(--cl-s5) 0;border-top:var(--cl-hair)}
.cl-sec:first-child{border-top:0;padding-top:0}
.cl-sech{display:flex;align-items:baseline;gap:var(--cl-s3);margin-bottom:var(--cl-s4)}
.cl-sech h2{font-size:22px}
.cl-sech .cl-more{margin-inline-start:auto;font-size:13px;text-decoration:underline;text-underline-offset:2px;color:var(--mute)}

/* ---------- one app row ---------- */
.cl-list{list-style:none;margin:0;padding:0}
.cl-row{display:flex;align-items:center;gap:var(--cl-s3);padding:10px 0;border-top:var(--cl-hair)}
.cl-list>.cl-row:first-child,.cl-list>li:first-child>.cl-row{border-top:0}
.cl-row .cl-rk{width:20px;font:10px var(--pixel);color:var(--faint);text-align:center;flex:none}
.cl-row .cl-grow{flex:1;min-width:0}
.cl-row .cl-nm{font:500 18px/1.15 var(--serif);display:block}
.cl-row .cl-ln{font-size:13px;color:var(--mute);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-row.cl-paid{background:var(--cl-gold);margin:0 calc(var(--cl-s3) * -1);padding:10px var(--cl-s3);border-radius:8px;border-top:0;box-shadow:inset 0 0 0 1px var(--cl-goldline)}
.cl-pill{display:inline-flex;align-items:center;height:20px;padding:0 7px;border:1px solid var(--line);border-radius:6px;font-size:11.5px;color:var(--mute);background:#fffdf6;white-space:nowrap}
.cl-tag{display:inline-flex;align-items:center;height:17px;padding:0 6px;border-radius:4px;font:8.5px var(--pixel);letter-spacing:.08em;border:1px solid var(--ink);background:var(--y);color:var(--ink);white-space:nowrap}
.cl-tag.cl-deal{background:var(--g);color:#fff;border-color:#2f7a45}
.cl-tag.cl-new{background:var(--paper)}

/* ---------- one card ---------- */
.cl-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--cl-s5) var(--cl-s4)}

/* ---------- one main button per screen ---------- */
.cl-go{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 18px;border-radius:8px;border:var(--cl-bd);background:var(--ink);color:var(--paper);font:14px var(--sans);cursor:pointer;white-space:nowrap;position:relative;overflow:hidden;text-decoration:none}
.cl-go:after{content:"";position:absolute;inset-inline:0;bottom:0;height:3px;background:var(--stripes)}
.cl-go:hover{text-decoration:none;filter:brightness(1.15)}
.cl-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;padding:0 14px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--ink);font:13.5px var(--sans);cursor:pointer;white-space:nowrap;text-decoration:none}
.cl-ghost:hover{background:var(--box);text-decoration:none}

/* ---------- folds: secondary things sit here, one line each ---------- */
details.cl-fold{border-top:var(--cl-hair)}
details.cl-fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--cl-s3);padding:14px 0;font:500 18px var(--serif)}
details.cl-fold>summary::-webkit-details-marker{display:none}
details.cl-fold>summary:after{content:"+";margin-inline-start:auto;font:16px var(--sans);color:var(--mute)}
details.cl-fold[open]>summary:after{content:"\2212"}
details.cl-fold>summary small{font:13px var(--sans);color:var(--mute)}
details.cl-fold>summary:hover{color:var(--ink)}
details.cl-fold>.cl-foldin{padding-bottom:var(--cl-s4)}
details.cl-fold>.cl-foldin>section,details.cl-fold>.cl-foldin>aside,details.cl-fold>.cl-foldin>div{margin-top:0}

/* ---------- a stat line instead of stat boxes ---------- */
.cl-stats{display:flex;flex-wrap:wrap;gap:var(--cl-s2) var(--cl-s5);font-size:13px;color:var(--mute)}
.cl-stats b{font:500 20px var(--serif);color:var(--ink);margin-inline-end:5px}

/* ---------- footer: one calm block ---------- */
.clfoot{background:var(--night);color:#d9d2c0;margin-top:var(--cl-s7);padding-bottom:8px}
.clfoot:before{content:"";display:block;height:3px;background:var(--stripes)}
.clfoot a{color:#c8c0ad}
.clfootin{display:grid;grid-template-columns:1.3fr 2.7fr;gap:var(--cl-s5);padding-top:var(--cl-s6);padding-bottom:var(--cl-s5)}
.clfnews h2{color:var(--paper);font-size:20px;margin-bottom:6px}
.clfnews p{font-size:13px;color:#a9a291}
.clfnews p a{color:#d9d2c0}
.clfnews form{display:flex;gap:6px;margin-top:var(--cl-s3);flex-wrap:wrap}
.clfnews input[type=email]{flex:1;min-width:0;height:38px;border-radius:7px;border:1px solid #5a5548;background:#1f1e18;color:#fff;padding:0 10px;font:13px var(--sans)}
.clfnews .btn{min-height:38px;background:var(--paper);color:var(--ink)}
.clfnews .newserr{flex-basis:100%}
.clfcols{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--cl-s5);flex:none}
.clfcols>div{display:flex;flex-direction:column}
.clfcols h3{color:var(--paper);font-size:18px;margin-bottom:var(--cl-s2)}
.clfcols a{font-size:13px;line-height:1.95;color:#c8c0ad;text-decoration:none}
.clfcols a:hover{color:#fff;text-decoration:underline}
.clfoot .footmore,.clfoot .clfeat{border-top:1px solid #34322a;padding-top:10px;padding-bottom:10px}
.clfoot .footmore>summary,.clfoot .clfeat>summary{cursor:pointer;font-size:13px;color:#d9d2c0;list-style:none}
.clfoot .footmore>summary::-webkit-details-marker,.clfoot .clfeat>summary::-webkit-details-marker{display:none}
.clfoot .footmore>summary:after,.clfoot .clfeat>summary:after{content:" +";color:#9c9584}
.clfoot .footmore[open]>summary:after,.clfoot .clfeat[open]>summary:after{content:" \2212"}
.clfoot .clfeat .featured{padding:12px 0 0}
.clfoot .askai{margin-top:0}
.clfoot .foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cl-s3) var(--cl-s5);border-top:1px solid #34322a;padding-top:var(--cl-s4);padding-bottom:var(--cl-s4);font-size:12px;color:#9c9584}
/* A plain line on the dark footer, not the old paper card (style.css .maker), whose paper turned this light text unreadable */
.clfoot .foot .maker{display:flex;align-items:center;gap:8px;padding:0;background:none;border:0;border-radius:0;box-shadow:none;color:#d9d2c0;text-decoration:none}
.clfoot .foot .maker:hover{transform:none;box-shadow:none;text-decoration:underline;text-underline-offset:2px}
.clfoot .foot .maker img{width:26px;height:26px;border-radius:6px}
.clfoot .foot .footbye{margin-inline-start:auto;display:flex;align-items:center;gap:8px;font:9px var(--pixel);letter-spacing:.1em;text-transform:uppercase}
.clfoot .foot .footbye .pipmark{width:22px;height:25px}
.clfoot .langbottom,.clfoot .langfoot{padding-top:8px}

/* ---------- tab bar: phones only ---------- */
.tabbar{display:none}

/* ---------- phone ---------- */
@media (max-width:760px){
  :root{--cl-t1:32px;--cl-t2:23px}
  .cltop .clnav,.cltop .topsearch{display:none!important}
  .cltop .topin{gap:8px;height:52px}
  .cltop .btngo{margin-inline-start:auto}
  .tabbar{display:flex;position:fixed;inset-inline:0;bottom:0;z-index:40;background:var(--paper);border-top:1px solid var(--ink);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font:9px var(--pixel);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);text-decoration:none;padding:2px 0}
  .tabbar a[aria-current]{color:var(--ink)}
  .tabbar a[aria-current] svg{stroke-width:2.1}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .cl-page{padding:var(--cl-s4) 0 var(--cl-s6)}
  .cl-win{box-shadow:3px 3px 0 var(--ink);border-radius:9px}
  .cl-wbody{padding:var(--cl-s4)}
  .cl-tools{padding:var(--cl-s2) var(--cl-s3);flex-wrap:nowrap;overflow-x:auto}
  .cl-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--cl-s4) var(--cl-s3)}
  .clfootin{grid-template-columns:1fr;padding-top:var(--cl-s5)}
  .clfcols{grid-template-columns:1fr 1fr}
  .clfcols>div:last-child{grid-column:1/-1}
  .clfoot .foot .footbye{margin-inline-start:0}
}
@media (min-width:761px) and (max-width:1000px){
  .cltop .topsearch{display:none}
  .cltop .btngo{margin-inline-start:auto}
  .cl-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.clfoot .foot .footbye{position:static;transform:none;inset:auto;opacity:1;animation:none;color:#9c9584}

/* The paid App Page strip: one quiet line, still labeled paid. Doubled classes so it beats the older gold rules and their night copies. */
aside.appstrip.wrap.wrap{background:var(--paper);border:1px solid var(--line);border-inline-start:3px solid var(--y);border-radius:8px;box-shadow:none;padding:6px 12px;gap:10px;margin-top:12px}
aside.appstrip.wrap.wrap .appstriplink .icon{background:var(--box);border:1px solid var(--line);border-radius:6px;width:24px!important;height:24px!important}
aside.appstrip.wrap.wrap .appstriplink strong{font:500 16px var(--serif)}
aside.appstrip.wrap.wrap .appstriplink .tag{font-size:13px;color:var(--mute)}
aside.appstrip.wrap.wrap .goldmark{background:transparent;color:var(--mute);border:1px solid var(--line);font-size:8.5px}
aside.appstrip.wrap.wrap .sp-why{color:var(--mute);font-size:12px}