/* iPip's cleanup kit: MacPip's feat/cleanup kit (its public/cleanup.css, the shell in its functions/[[path]].js page() and the
   rules in the shared notes, cleanup-design-rules.md), ported to iPip for remix B (mockups/v4/remix-b, picked 14 Nov 2026).
   One top bar split like the top of a MacBook screen around Pip's island (public/notch.css), one Mac window per page, one app row,
   one main black button with the stripe, folds instead of stacked boxes, a night footer and, on phones, a tab bar.
   Loaded after ipip.css and site.css on every page, so its tokens turn the older pages cream as well.
   Sides use logical properties, so right-to-left pages flip by themselves. Paid things are always labeled Featured. */

@font-face{font-family:"EB Garamond";src:url("/fonts/EBGaramond-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"EB Garamond";src:url("/fonts/EBGaramond-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Silkscreen;src:url("/fonts/Silkscreen-400.woff2") format("woff2");font-display:swap}

/* ---------- tokens: MacPip's, exactly (no extra accent on iPip) ---------- */
:root,:root[data-theme=light]{color-scheme:light;
  --cream:#f1ebdd;--paper:#faf6ec;--box:#e6dfcd;--box2:#d6cdb8;--ink:#1d1b17;--mute:#5f5a4e;--faint:#6b6556;--line:#cfc6b1;--screen:#f4f5f0;--plastic:#e9e2d0;--night:#14140f;--nightink:#e9e3d3;
  --r:#e8483f;--o:#f08a2c;--y:#f3c63f;--g:#4fb06a;--b:#3e8fd6;--v:#8a5bb8;--gold:#e7b52e;--gold-bg:#fff6d6;--gold-line:#e9cf6d;--tool:#f6f1e3;
  --stripes:linear-gradient(90deg,var(--g) 0 16.66%,var(--y) 16.66% 33.33%,var(--o) 33.33% 50%,var(--r) 50% 66.66%,var(--v) 66.66% 83.33%,var(--b) 83.33%);
  --serif:"EB Garamond","Apple Garamond",Garamond,Georgia,serif;--sans:Geneva,Verdana,"DejaVu Sans",sans-serif;--pixel:Silkscreen,Monaco,monospace;
  --bevel:inset 1px 1px 0 #fffdf6,inset -1px -1px 0 var(--box2),0 1px 0 rgba(40,34,20,.35);--hard:5px 5px 0 var(--ink);
  --ease:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.34,1.56,.64,1);--focus:0 0 0 3px rgba(62,143,214,.35);
  --cl-s1:4px;--cl-s2:8px;--cl-s3:12px;--cl-s4:16px;--cl-s5:24px;--cl-s6:32px;--cl-s7:48px;--cl-hair:1px solid var(--line);--cl-bd:1.5px solid var(--ink);--xptrack:#3b3a31;
  /* the older pages' names, pointed at the same cream and ink */
  --ink2:var(--mute);--ink3:var(--faint);--wall-base:var(--cream);--wall:var(--cream);--font:var(--sans);--font-display:var(--serif);--label:var(--ink);--hair:var(--line);--chip:var(--box);--seg-bg:var(--box);--blob:var(--paper);--blob-ink:var(--ink);--dock-pill:var(--box);
  --gl-fill:var(--paper);--gl-blur:none;--gl-in:none;--gl-out:3px 3px 0 var(--ink);--gl-rim:var(--ink);--gl-spec:none;--badge:var(--r)}
/* Night, MacPip's dark beige */
:root[data-theme=dark]{color-scheme:dark;
  --cream:#231f12;--paper:#2a261c;--box:#352f1f;--box2:#433c29;--ink:#e3e0db;--mute:#a09b90;--faint:#979183;--line:#48402d;--screen:#26251e;--plastic:#3a3424;--night:#0e0d08;
  --gold-bg:#3a3117;--gold-line:#8f7428;--tool:#302b20;--hard:5px 5px 0 #0b0a06;--xptrack:#1a170e;
  --bevel:inset 1px 1px 0 rgba(255,236,200,.08),inset -1px -1px 0 var(--box2),0 1px 0 rgba(0,0,0,.35);--gl-out:3px 3px 0 #0b0a06}
/* CRT green: the site goes green, the apps keep their real colours */
:root[data-theme=crt]{color-scheme:dark;
  --cream:#061006;--paper:#0a170a;--box:#0f230f;--box2:#163316;--ink:#7dff8a;--mute:#4fbf5a;--faint:#3f9f4a;--line:#1e4a22;--screen:#0a170a;--plastic:#0f230f;--night:#030803;--nightink:#7dff8a;
  --r:#7dff8a;--o:#7dff8a;--y:#7dff8a;--g:#7dff8a;--v:#7dff8a;--b:#7dff8a;--gold:#7dff8a;--gold-bg:#0f230f;--gold-line:#3f9f4a;--tool:#0d1d0d;--hard:5px 5px 0 #000;--bevel:none;--xptrack:#031003;--gl-out:3px 3px 0 #000}
:root[data-theme=crt] body{text-shadow:0 0 6px rgba(125,255,138,.35)}

/* ---------- base ---------- */
body.cl{background:var(--cream);color:var(--ink);font:15px/1.55 var(--sans);-webkit-font-smoothing:antialiased;font-feature-settings:normal;overflow-x:clip}
html{overflow-x:clip}
.cl h1,.cl h2,.cl h3{font-family:var(--serif);font-weight:500;letter-spacing:-.01em}
.cl .wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.cl .skip{position:fixed;inset-inline-start:12px;top:-60px;z-index:80;padding:10px 14px;background:var(--ink);color:var(--paper);border-radius:7px;font-size:13.5px}
.cl .skip:focus{top:10px}
.cl :focus-visible{outline:2px solid var(--b);outline-offset:2px}
.cl .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cl main.page{padding:var(--cl-s6) 16px var(--cl-s7)}
.cl main.apppage{padding-top:var(--cl-s6)}
.pipmark{display:block;flex:none}

/* ---------- top bar: split like the top of a MacBook screen around Pip's island (MacPip's .cltop.hasnotch, the same breakpoints) ---------- */
.cltop{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--ink)}
.cltop:after{content:"";position:absolute;inset-inline:0;bottom:-4px;height:3px;background:var(--stripes);pointer-events:none}
.cltop .topin{display:flex;align-items:center;height:56px;max-width:none;padding-inline:24px;gap:4px}
.cltop .logo{display:flex;align-items:center;gap:8px;flex:none;margin-inline-end:12px;color:var(--ink);text-decoration:none}
.cltop .logo .pipmark{width:21px;height:29px;transition:transform .3s var(--spring)}
.cltop .logo:hover .pipmark{transform:translateY(-2px) rotate(-3deg)}
.cltop .logow{font:500 24px/1 var(--serif)}
.cltop .clnav{display:contents}
.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;cursor:pointer;list-style:none;white-space:nowrap}
.cltop .clnav>.menu>summary::-webkit-details-marker{display:none}
.cltop .clnav>a:hover,.cltop .clnav>.menu>summary:hover,.cltop .clnav>.menu[open]>summary{background:var(--box);color:var(--ink)}
.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)}
.cltop .clnav>.mkmenu{margin-inline-start:auto}
.cltop .menu{position:relative}
.cltop .menubox{position:absolute;top:calc(100% + 14px);inset-inline-end:0;width:272px;background:var(--paper);border:1.5px solid var(--ink);border-radius:9px;box-shadow:4px 4px 0 var(--ink);padding:6px;z-index:70;animation:clrise .25s var(--ease) both}
.cltop .menubox a{display:flex;flex-direction:column;padding:8px 10px;border-radius:6px;color:var(--ink);text-decoration:none;font-size:13.5px}
.cltop .menubox a:hover,.cltop .menubox a:focus-visible{background:var(--box)}
.cltop .menubox a small{font-size:11.5px;color:var(--mute)}
.cltop .menubox a strong{font:500 16px/1.15 var(--serif)}
.cltop .menuhead{display:block;font:10px var(--pixel);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);padding:8px 10px 3px}
.cltop .mesep{height:0;margin:4px 0;border-top:1.5px dotted var(--box2)}
@keyframes clrise{from{opacity:0;transform:translateY(-4px)}}
/* search: a field from 1300px, an icon below (public/notch.js opens it, or Cmd+K) */
.cltop .topsearch{position:relative;display:flex;align-items:center;flex:0 1 220px;max-width:220px;margin-inline-start:8px}
.cltop .topsearch input{width:100%;height:36px;padding:0 38px 0 11px;border:1px solid var(--line);border-radius:8px;background:var(--cream);color:var(--ink);font:13px var(--sans)}
.cltop .topsearch input::placeholder{color:var(--faint)}
.cltop .topsearch input:focus{outline:0;border-color:var(--ink);box-shadow:var(--focus)}
.cltop .topsearch kbd{position:absolute;inset-inline-end:9px;top:12px;font:10px var(--pixel);color:var(--faint);pointer-events:none}
.cltop .srchgo{display:none}
.cltop .btngo{flex:none;margin-inline-start:8px}
.cltop .acctmenu{flex:none;margin-inline-start:8px}
@media (max-width:1300px){
  .cltop .topsearch{flex:none;width:36px;max-width:none}
  .cltop .topsearch>input,.cltop .topsearch>kbd{display:none}
  .cltop .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 .srchgo:hover,.cltop .topsearch.open .srchgo{background:var(--box)}
  .cltop .srchgo:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  .cltop .srchgo svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
  .cltop .topsearch.open>input{display:block;position:absolute;top:46px;inset-inline-end:0;width:300px;z-index:50;padding-inline-end:11px;background:var(--paper);box-shadow:3px 3px 0 var(--ink);border:1.5px solid var(--ink)}
}
@media (max-width:1180px){.cltop .clnav>a,.cltop .clnav>.menu>summary{padding:6px 8px;font-size:13.5px}}
/* tablets and small laptops: the island takes its phone size (notch.css), then the bar drops Pips, the word and search */
@media (min-width:761px) and (max-width:960px){.cltop .clnav>a.pipsnav{display:none}}
@media (min-width:761px) and (max-width:880px){
  .cltop .logow{display:none}
  .cltop .topsearch{display:none}
  .cltop .btngo,.cltop .acctmenu{margin-inline-start:4px}
  .cltop .clnav>a,.cltop .clnav>.menu>summary{padding:6px 6px}
}
/* the smallest phones: the island is 88 wide (notch.css), so the right side keeps a little closer */
@media (max-width:374px){.cltop .topin{padding-inline:12px}.cltop .acctmenu{margin-inline-start:6px}}
/* the one main black button, with the stripe (Submit in the bar is the small one) */
.cl-go,.cltop .btngo{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 18px;border:1.5px solid var(--ink);border-radius:8px;background:var(--ink);color:var(--paper);font:14px var(--sans);cursor:pointer;white-space:nowrap;overflow:hidden;text-decoration:none}
.cl-go:after,.cltop .btngo:after{content:"";position:absolute;inset-inline:0;bottom:0;height:3px;background:var(--stripes)}
.cl-go:hover,.cltop .btngo:hover{filter:brightness(1.15);text-decoration:none}
.cltop .btngo{min-height:34px;padding:0 14px;font-size:13.5px}
.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{border-color:var(--ink);background:var(--box)}

/* ---------- the account button: Pip when signed out, MacPip's Pips chip when signed in ----------
   As on MacPip (style.css, 15 Nov: the Pips sit on the face at every width), everything sits on the 36px face and adds no
   width: a thin rainbow bar across the bottom of the face, the level as a tiny ink badge on its top corner, the Pips as an
   ink pill just under it. */
.acctmenu>summary{list-style:none;cursor:pointer;position:relative;display:block}
.acctmenu>summary::-webkit-details-marker{display:none}
.acctmenu .fbox{display:grid;place-items:center;width:36px;height:36px;border:1.5px solid var(--ink);border-radius:50%;background:var(--paper);overflow:hidden;transition:transform .25s var(--spring),box-shadow .25s,border-radius .25s}
.acctmenu .fbox .pipmark{width:20px;height:28px;margin-top:9px}
.acctmenu .fbox.hasphoto img{display:block;width:100%;height:100%;object-fit:cover}
.acctmenu:has(.xcol:not([hidden])) .fbox .pipmark{margin-top:0}
.acctmenu>summary:hover .fbox,.acctmenu[open] .fbox{transform:translateY(-2px) rotate(-3deg);box-shadow:3px 3px 0 var(--ink)}
.acctmenu .xcol{position:absolute;inset-inline-start:4px;bottom:4px;z-index:2;display:block;width:calc(100% - 8px);pointer-events:none}
.acctmenu .xcol[hidden]{display:none}
.acctmenu .xtrack{position:relative;display:block;width:100%;height:5px;background:var(--xptrack);border:1px solid var(--ink);border-radius:1px;overflow:hidden}
.acctmenu .xlv{position:absolute;inset-inline-start:-9px;bottom:24px;font:9px/1 var(--pixel);color:var(--paper);background:var(--ink);padding:2px 3px 1px;border-radius:4px}
.acctmenu .xfill{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p,0%)) 0 0);transition:clip-path .8s var(--ease);background:linear-gradient(90deg,var(--g) 0 20%,var(--y) 20% 40%,var(--o) 40% 60%,var(--r) 60% 80%,var(--v) 80% 90%,var(--b) 90%)}
.acctmenu .xfill:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.45) 0 2px,transparent 2px 70%,rgba(0,0,0,.18) 70%)}
.acctmenu .segs{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1.5px),var(--ink) calc(10% - 1.5px) 10%);pointer-events:none}
.acctmenu .shine{position:absolute;top:0;bottom:0;inset-inline-start:0;width:22%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.85) 45%,rgba(255,255,255,.85) 55%,transparent);transform:translateX(-120%);opacity:0;pointer-events:none}
.acctmenu .xcnt{position:absolute;left:50%;bottom:-12px;z-index:3;transform:translateX(-50%);display:flex;align-items:center;padding:2px 5px 1px;border-radius:8px;background:var(--ink);white-space:nowrap}
.acctmenu .xcnt .xcoin{display:none}
.xcoin{display:inline-block;width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff5b8 0 22%,#f3c63f 24% 62%,#c99a1c 64%);box-shadow:0 0 0 1.2px var(--ink);flex:none}
.acctmenu .xnum{font:9px/1 var(--pixel);color:var(--paper);letter-spacing:0}
.acctmenu.gain .shine{animation:xshine .75s .15s steps(9) forwards}
.acctmenu .plus{position:absolute;inset-inline-end:-6px;top:-12px;z-index:3;font:13px var(--pixel);color:var(--paper);text-shadow:1px 0 var(--ink),-1px 0 var(--ink),0 1px var(--ink),0 -1px var(--ink);pointer-events:none;animation:xplus .9s var(--ease) forwards}
.acctmenu.lvup .xtrack{animation:xrainbow .7s steps(6)}
@keyframes xshine{0%{opacity:1;transform:translateX(-120%)}100%{opacity:1;transform:translateX(520%)}}
@keyframes xplus{0%{opacity:0;transform:translateY(6px)}20%{opacity:1}100%{opacity:0;transform:translateY(-16px)}}
@keyframes xrainbow{0%{box-shadow:0 0 0 2px var(--g)}20%{box-shadow:0 0 0 2px var(--y)}40%{box-shadow:0 0 0 2px var(--o)}60%{box-shadow:0 0 0 2px var(--r)}80%{box-shadow:0 0 0 2px var(--v)}100%{box-shadow:0 0 0 2px var(--b)}}
.acctmenu .acctbox{width:280px;padding:6px}
.acctbox .mewho{padding:8px 10px;font-size:13px;color:var(--mute)}
.acctbox .mewho b{display:block;font:500 17px/1.2 var(--serif);color:var(--ink)}
.acctbox form{margin:0}
.acctbox form button{all:unset;box-sizing:border-box;display:block;width:100%;padding:7px 10px;border-radius:6px;font-size:13px;color:var(--mute);cursor:pointer}
.acctbox form button:hover{background:var(--box);color:var(--ink)}
.cl-themes{display:flex;margin:4px 10px 8px;border:1px solid var(--ink);border-radius:8px;overflow:hidden;background:var(--paper)}
.cl-themes button{flex:1;border:0;background:none;padding:6px 4px;font:12.5px var(--sans);color:var(--mute);cursor:pointer;border-inline-end:1px solid var(--line)}
.cl-themes button:last-child{border-inline-end:0}
.cl-themes button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
@media (prefers-reduced-motion:reduce){.acctmenu .xfill{transition:none}.acctmenu.gain .shine,.acctmenu .plus,.acctmenu.lvup .xtrack{animation:none}}

/* ---------- phones: logo left, the island in the middle, Submit and the account right; a tab bar at the bottom ---------- */
.tabbar{display:none}
@media (max-width:760px){
  .cltop .clnav,.cltop .topsearch{display:none!important}
  .cltop .topin{height:52px;padding-inline:16px;gap:8px}
  .cltop .btngo{margin-inline-start:auto;padding:0 9px;font-size:13px}
  .tabbar{display:flex;position:fixed;inset-inline:0;bottom:0;z-index:55;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;padding:2px 0;font:9px var(--pixel);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);text-decoration:none}
  .tabbar svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .tabbar a[aria-current]{color:var(--ink)}
  .tabbar a[aria-current] svg{stroke-width:2.1}
  body.cl{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .cl .wrap{padding:0 16px}
}

/* ---------- the window: one per page, like a Mac app ---------- */
.cl-win{background:var(--paper);border:var(--cl-bd);border-radius:10px;box-shadow:var(--hard);overflow:hidden}
.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;color:var(--ink)}
.cl-tools{display:flex;align-items:center;gap:var(--cl-s3);padding:var(--cl-s2) var(--cl-s4);border-bottom:var(--cl-hair);background:var(--tool);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>: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-seg i{font:normal 9px var(--pixel);margin-inline-start:4px;opacity:.8}
@media (max-width:760px){.cl-win{box-shadow:3px 3px 0 var(--ink);border-radius:9px}}

/* ---------- one app row ---------- */
.cl-rows{padding:0 var(--cl-s4)}
.cl-row{display:grid;grid-template-columns:20px minmax(0,1fr) auto 34px 46px;gap:var(--cl-s3);align-items:center;padding:10px 0;border-top:var(--cl-hair)}
.cl-rows>.cl-row:first-child,.cl-rows>.cl-pinned:first-child+.cl-row,.cl-rows>.cl-empty+.cl-row{border-top:0}
.cl-row .cl-rk{font:11px var(--pixel);color:var(--faint);text-align:center}
.cl-row .cl-rl{display:flex;align-items:center;gap:var(--cl-s3);min-width:0;color:inherit;text-decoration:none}
.cl-row .cl-rl:hover .cl-nm{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.cl-row .icon{flex:none;width:44px;height:44px;border-radius:11px;border:1px solid var(--ink);background:var(--box);object-fit:cover}
.cl-row .cl-grow{min-width:0}
/* the rows' type is MacPip's list rows (macpip.com .row): the name 20px serif, the line 12.5px, the rank 11px, the price bold */
.cl-row .cl-nm{display:flex;align-items:center;gap:7px;font:500 20px/1.15 var(--serif);min-width:0}
.cl-row .cl-nm>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-row .cl-ln{display:block;font-size:12.5px;line-height:1.55;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-row .sharebtn{color:var(--mute)}.cl-row .sharebtn:hover{color:var(--ink);background:var(--box)}
.cl-row .cl-votes{grid-column:5;font:10px var(--pixel);color:var(--mute);text-align:center;line-height:1.3}
.cl-row .cl-votes b{display:block;font:500 18px/1 var(--serif);color:var(--ink)}
.cl-row.cl-paid{margin:var(--cl-s2) calc(var(--cl-s3) * -1) 0;padding:10px var(--cl-s3);border-radius:8px;border-top:0;background:var(--gold-bg);box-shadow:inset 0 0 0 1.5px var(--gold-line)}
.cl-row.cl-paid+.cl-row{border-top:0}
.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;font-weight:700;line-height:1.3;color:var(--ink);background:var(--paper);white-space:nowrap}
.cl-tag{flex:none;display:inline-flex;align-items:center;height:17px;padding:0 5px;border-radius:4px;font:8.5px/1 var(--pixel);letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--gold-line);background:var(--gold-bg);color:var(--ink);white-space:nowrap}
.cl-tag.cl-gold{background:#e9cf6d;border-color:#1d1b17;color:#1d1b17}
@media (max-width:560px){.cl-row{grid-template-columns:minmax(0,1fr) 34px 46px}.cl-row .cl-rk,.cl-row .cl-pill{display:none}.cl-row .cl-votes{grid-column:3}.cl-rows{padding:0 var(--cl-s3)}}
/* the vote button: MacPip's, 46 by 50, ink on paper; voted is ink */
/* The vote button, MacPip's exactly as macpip.com draws it in its Today window (style.css .vote, .todaywin): 42 by 46, a 1px
   ink line, the box colour with its bevel, the count in Silkscreen 10px; pressed, ink with a pop. 44 by 48 on phones. */
.cl .clvote{--vbevel:inset 1px 1px 0 #fffdf6,inset -1px -1px 0 var(--box2),0 1px 0 rgba(40,34,20,.35);position:relative;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:42px;height:46px;padding:1px 6px;border:1px solid var(--ink);border-radius:9px;background:var(--box);color:var(--ink);box-shadow:var(--vbevel);font:10px var(--pixel);cursor:pointer;overflow:visible;isolation:isolate;transition:transform .2s var(--spring);-webkit-backdrop-filter:none;backdrop-filter:none}
.cl .clvote:before,.cl .clvote:after{content:none}
.cl .clvote svg{position:relative;z-index:1;width:11px;height:11px;fill:currentColor;stroke:none}
.cl .clvote .n{position:relative;z-index:1}
.cl .clvote:hover{transform:translateY(-1px)}
.cl .clvote:active{transform:translateY(1px) scale(.98)}
.cl .clvote.on,.cl .clvote[aria-pressed=true]{background:var(--ink);color:var(--paper);box-shadow:none}
.cl .clvote.on{animation:clvpop .35s var(--spring)}
@keyframes clvpop{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
:root[data-theme=dark] .cl .clvote,:root[data-theme=crt] .cl .clvote{--vbevel:inset 1px 1px 0 rgba(255,236,200,.08),inset -1px -1px 0 rgba(0,0,0,.3),0 1px 0 rgba(0,0,0,.5)}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .cl .clvote{--vbevel:inset 1px 1px 0 rgba(255,236,200,.08),inset -1px -1px 0 rgba(0,0,0,.3),0 1px 0 rgba(0,0,0,.5)}}
@media (max-width:760px){.cl .clvote{width:44px;height:48px}}
@media (prefers-reduced-motion:reduce){.cl .clvote.on{animation:none}}
.cl .clvote[disabled]{opacity:.7}
.voteghost{position:absolute;z-index:1;text-align:center;white-space:nowrap;pointer-events:none;font:10px var(--pixel)}
.votewash{position:absolute;inset:-1px;z-index:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,#4fb06a 0 16.66%,#f3c63f 0 33.33%,#f08a2c 0 50%,#e8483f 0 66.66%,#8a5bb8 0 83.33%,#3e8fd6 0)}
.pixelbit{position:fixed;z-index:65;pointer-events:none}
.voteplus{position:fixed;z-index:65;font:12px var(--pixel);color:var(--ink);text-shadow:1px 1px 0 var(--paper),-1px -1px 0 var(--paper),1px -1px 0 var(--paper),-1px 1px 0 var(--paper);pointer-events:none}
.votepip{position:fixed;z-index:65;display:block;width:24px;height:21px;padding:3px 4px;background:var(--screen);border:1.5px solid var(--ink);border-radius:5px 5px 3px 3px;box-shadow:2px 2px 0 rgba(29,27,23,.28);pointer-events:none}
.votepip svg{display:block;width:100%;height:100%;fill:var(--ink)}

/* ---------- folds instead of stacked boxes ---------- */
.cl-folds details{border-top:var(--cl-hair);padding:var(--cl-s3) 0}
.cl-folds details:last-child{border-bottom:var(--cl-hair)}
.cl-folds summary{display:flex;gap:var(--cl-s3);align-items:baseline;cursor:pointer;list-style:none}
.cl-folds summary::-webkit-details-marker{display:none}
.cl-folds summary b{font:500 18px var(--serif);flex:none}
.cl-folds summary span{flex:1;font-size:13px;color:var(--mute);min-width:0}
.cl-folds summary:after{content:"+";font-size:18px}
.cl-folds details[open] summary:after{content:"\2212"}
.cl-folds details>div{margin-top:var(--cl-s3);font-size:13.5px;color:var(--mute)}
.cl-folds details>div a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.cl-stats{font-size:13px;color:var(--mute)}
.cl-stats b{font:500 20px var(--serif);color:var(--ink)}
.cl-label{font:10px var(--pixel);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin:0 0 var(--cl-s2)}

/* ---------- footer: MacPip's, rule for rule (its cleanup.css .clfoot and style.css .foot, .footmore, .footslogan) ---------- */
.clfoot{background:var(--night);color:#d9d2c0;margin-top:var(--cl-s7);padding-bottom:8px;font-size:13px;line-height:1.55}
.clfoot:before{content:"";display:block;height:3px;background:var(--stripes)}
.clfoot .wrap{max-width:1040px}
.clfoot a{color:#c8c0ad}
.clfoot .clfootin{display:grid;grid-template-columns:1.3fr 2.7fr;gap:var(--cl-s5);padding-top:var(--cl-s6);padding-bottom:var(--cl-s5)}
.clfoot h2,.clfoot h3{font:500 18px var(--serif);margin:0}
.clfnews h2{color:var(--paper);font-size:20px;margin-bottom:6px}
.clfnews p{margin:0;font-size:13px;color:#a9a291}
.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{border-top:1px solid #34322a;padding-top:10px;padding-bottom:10px;font-size:12.5px;color:#c9c3b2}
.clfoot .footmore>summary{cursor:pointer;font-size:13px;color:#d9d2c0;list-style:none;width:max-content;display:inline-flex;align-items:center;min-height:32px}
.clfoot .footmore>summary::-webkit-details-marker{display:none}
.clfoot .footmore>summary:after{content:" +";color:#9c9584;white-space:pre}
.clfoot .footmore[open]>summary:after{content:" \2212"}
.footlinks{display:flex;flex-wrap:wrap;gap:6px 14px;margin:8px 0 12px}.footlinks a{color:inherit;text-decoration:none}.footlinks a:hover{color:#fff;text-decoration:underline}
.clfoot .foot{display:flex;flex-wrap:wrap;justify-content:space-between;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}
.clfoot .foot .maker{display:flex;align-items:center;gap:8px;color:#d9d2c0;text-decoration:none}
.clfoot .foot .maker:hover{text-decoration:underline;text-underline-offset:2px}
.clfoot .foot .maker img{width:26px;height:26px;border-radius:6px}
.clfoot .foot .footslogan{color:var(--paper);font-weight:700;text-decoration:underline;text-decoration-color:rgba(250,246,236,.35);text-underline-offset:3px}.clfoot .foot .footslogan:hover{text-decoration-color:currentColor}
.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}
:root[data-theme] .clfoot .pipmark rect:first-child{fill:#3a3424}
@media (max-width:860px){.clfoot .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 (max-width:760px){.clfoot .footmore>summary,.footlinks a{min-height:44px;display:inline-flex;align-items:center}}

/* ---------- home: MacPip's stage. The stripes sit behind the first screen only, clipped to it, and end at a thin ink rule ---------- */
main.clhome{position:relative;padding:0 0 var(--cl-s5)}
.istage{position:relative;overflow:hidden;background:var(--cream);border-bottom:1.5px solid var(--ink);padding-bottom:var(--cl-s6)}
.ibands{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
/* The stripes run behind the feed, on the start side, leaning the other way, as MacPip's run behind its list window, so
   the hero's words and buttons sit on plain cream (Justinas, 15 Nov: "the text is on the rainbow now and is not readable").
   Their end edge is tied to where the hero starts (the feed column, 448px, and its gap, in the 1180px wrap: max(504px,
   50% - 86px)), 8px short of it at the middle; they lean away from the words above the middle, toward the phone below. */
.ibands .bands{position:absolute;top:-2px;bottom:-2px;inset-inline-start:-200px;width:calc(max(504px, 50% - 86px) - 8px + 200px);display:flex;overflow:hidden;transform:skewX(24deg);animation:bandup .9s var(--ease) both,banddrift 22s ease-in-out .9s infinite alternate;}
.ibands .belt{display:flex;flex:none;width:200%;height:100%;animation:belt 16s linear infinite;will-change:transform}
.ibands .belt i{flex:1;display:block}
.ibands .belt i:nth-child(6n+1){background:var(--g)}.ibands .belt i:nth-child(6n+2){background:var(--y)}.ibands .belt i:nth-child(6n+3){background:var(--o)}.ibands .belt i:nth-child(6n+4){background:var(--r)}.ibands .belt i:nth-child(6n+5){background:var(--v)}.ibands .belt i:nth-child(6n){background:var(--b)}
:root[data-theme=dark] .ibands{opacity:.55}
:root[data-theme=crt] .ibands{display:none}
@keyframes belt{to{transform:translateX(-50%)}}
@keyframes banddrift{to{translate:-26px}}
@keyframes bandup{from{clip-path:inset(100% 0 0)}to{clip-path:inset(0)}}
@media (prefers-reduced-motion:reduce){.ibands .bands,.ibands .belt{animation:none}}
/* phones and tablets: the stripes run along the bottom of the stage, as MacPip's */
@media (max-width:900px){.ibands .bands{top:auto;height:300px;bottom:0;width:150%;inset-inline-start:auto;inset-inline-end:-25%;transform:skewX(-24deg)}}

/* ---------- home: the launch feed on the LEFT, the hero and the big iPhone on the right ---------- */
.ihome{position:relative;z-index:1;display:grid;grid-template-columns:448px minmax(0,1fr);gap:var(--cl-s6);margin-top:var(--cl-s6);align-items:start}
.ifeedcol{position:static;min-width:0}
.irightcol{display:flex;flex-direction:column;gap:var(--cl-s6);min-width:0}
.ifeed .cl-wbar{justify-content:center}
.ifeed .cl-rows[hidden]{display:none}
.ifeed .ifoot{padding:var(--cl-s3) var(--cl-s4);border-top:var(--cl-hair);font-size:13px;color:var(--mute);display:flex;justify-content:space-between;gap:var(--cl-s3);flex-wrap:wrap}
.ifeed .ifoot a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.ifeed .cl-empty{padding:var(--cl-s5) 0;text-align:center;color:var(--mute);font-size:13.5px}
.ifeed .cl-empty b{display:block;font:500 20px var(--serif);color:var(--ink);margin-bottom:4px}
.ifeed .cl-empty .cl-go{margin-top:var(--cl-s3)}
/* the voting clock under the feed, MacPip's, with a tiny iPhone */
.vclock{padding:12px var(--cl-s4) 10px;border-top:var(--cl-hair)}
.vtrack{position:relative;height:6px;margin:22px 10px 8px 0;background:repeating-linear-gradient(90deg,var(--line) 0 2px,transparent 2px 6px)}
.vtrack>i{position:absolute;inset:0;background:linear-gradient(90deg,var(--g) 0 16.66%,var(--y) 0 33.33%,var(--o) 0 50%,var(--r) 0 66.66%,var(--v) 0 83.33%,var(--b) 0);border-radius:1px}
.vme{position:absolute;top:-21px;display:flex;align-items:flex-end;gap:5px;transform:translateX(-6px);white-space:nowrap}
.vme svg{width:11px;height:16px}
.vme b{font:10.5px var(--sans);color:var(--ink);background:var(--paper);padding:0 3px}
.vflag{position:absolute;inset-inline-end:-10px;top:-6px;width:9px;height:9px;background:conic-gradient(var(--ink) 25%,var(--paper) 0 50%,var(--ink) 0 75%,var(--paper) 0);background-size:4.5px 4.5px;border:1px solid var(--ink)}
.vclock p{margin:0;font-size:12px;color:var(--mute)}
/* the hero */
/* The hero's type is MacPip's (style.css .pitch, as macpip.com renders it, Justinas 15 Nov: "the same font as MacPip"):
   the rainbow script hello that flows, the serif headline on two lines, the 17px line under it with its bold, rainbow
   underlined words (.dflink); under the link box, MacPip's trust line (.clh-trust). */
.ihero .hi{display:inline-block;font:400 clamp(34px,5vh,46px)/1.1 Pacifico,cursive;background:linear-gradient(90deg,var(--b),var(--g),var(--y),var(--o),var(--r),var(--v),var(--b));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 6px 2px 0}
@media (prefers-reduced-motion:no-preference){.ihero .hi{animation:ihflow 9s linear infinite}}
@keyframes ihflow{to{background-position:200% 0}}
.ihero h1{margin:2px 0 10px;font-size:clamp(44px,min(4.7vw,7.2vh),62px);line-height:1;letter-spacing:-.015em}
.ihero h1 span{display:block}
.ihero .lede{margin:0 0 var(--cl-s4);max-width:440px;color:#2f2c25;font-size:max(1.04em,17px);line-height:1.55;letter-spacing:.002em;text-wrap:pretty;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:geometricPrecision}
:root[data-theme=dark] .ihero .lede,:root[data-theme=crt] .ihero .lede{color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .ihero .lede{color:var(--ink)}}
.dflink{color:var(--ink);font-weight:700;background:linear-gradient(90deg,#4fb06a,#f2c53d,#f28b30,#ea4b41,#8c5cb8,#3f8fd9) left bottom/100% 2px no-repeat;padding-bottom:1px;text-decoration:none}
/* MacPip's page heads (rules.css .rlkick, pricing.css .prc h1 and .sub): a rainbow script word, the serif headline big,
   the line under it 16.5px */
.doc .pagehead .pkick{margin:0 0 -12px;font:400 40px/1.25 Pacifico,cursive;background:linear-gradient(90deg,#4fb06a,#f2c53d,#f28b30,#ea4b41,#8c5cb8,#3f8fd9);-webkit-background-clip:text;background-clip:text;color:transparent;width:max-content;max-width:100%;padding-right:6px}
html .doc .pagehead h1{font:500 clamp(38px,5vw,58px)/1.05 var(--serif);letter-spacing:normal}
html .doc .pagehead>p:not(.pkick){font-size:16.5px;line-height:1.55;color:var(--mute);max-width:620px}
@media (max-width:760px){.doc .pagehead .pkick{font-size:32px}}
/* The display face is the serif now (MacPip's), which comes in 400 and 500 only: old 750 and 800 headings would be a
   browser-made bold, and their tight tracking was for the old sans. Every serif heading is MacPip's 500, plain tracking. */
html :is(.hero h1,.pagehead h1,.sf-q h1,.sf-done h1,.sf-sheet h2,.feat h3,.dk-brand,.mk-tiles b,.wm,.sw .sw-t,.sf-r-name,.sf-plan .sf-pr b,.sf-gcnt,.win-day h2){font-weight:500;letter-spacing:normal}
.submitrow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cl-s2);max-width:560px;margin:0}
.submitrow .in{flex:1;min-width:0;height:42px;padding:0 12px;border:1px solid var(--ink);border-radius:8px;background:var(--paper);color:var(--ink);font:14px var(--sans)}
.submitrow .in::placeholder{color:var(--faint)}
.submitrow .in:focus{outline:0;box-shadow:var(--focus)}
.submitrow .subfree{min-height:42px}
.slwrap{flex:none}
.slide{position:relative;display:block;width:240px;height:42px;border-radius:21px;border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);padding:0;cursor:pointer;overflow:hidden;touch-action:none}
.slide:after{content:"";position:absolute;inset-inline:0;bottom:0;height:3px;background:var(--stripes)}
.slide .knob{position:absolute;inset-inline-start:4px;top:3px;z-index:2;width:33px;height:33px;border-radius:50%;background:var(--paper);color:var(--ink);display:grid;place-items:center;font-size:19px;cursor:grab}
.slide .shim{position:absolute;inset:0;inset-inline-start:40px;display:flex;align-items:center;justify-content:center;font:13.5px var(--sans);background:linear-gradient(90deg,color-mix(in srgb,var(--paper) 45%,transparent) 0 35%,var(--paper) 50%,color-mix(in srgb,var(--paper) 45%,transparent) 65%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shim 2.4s linear infinite}
.slide.done{background:var(--g)}
.slide.done .shim{color:#1d1b17;background:none;animation:none}
.slide:focus-visible{outline:2px solid var(--b);outline-offset:2px}
[dir=rtl] .slide .knob{transform:scaleX(-1)}
@keyframes shim{from{background-position:120% 0}to{background-position:-80% 0}}
@media (prefers-reduced-motion:reduce){.slide .shim{animation:none;background:none;color:var(--paper)}}
@media (max-width:560px){.submitrow .in{flex-basis:100%}.slwrap{flex:1}.slide{width:100%}}
/* the trust strip: today's six makers, the counts, the live line and what happens after you submit (MacPip's .qk-trust) */
.qk-trust{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin-top:10px;font-size:12.5px;color:var(--mute)}
/* MacPip's restored trust line (its cl-home.css .clh-trust): under the link box, the visits pill drawn at every width */
.clh-trust{margin-top:var(--cl-s4);max-width:440px}
.clh-trust .vpill{min-height:26px;padding:2px 9px 2px 8px;box-shadow:2px 2px 0 var(--ink)}
.clh-trust .vpill:hover b{text-decoration:underline;text-underline-offset:2px}
.qk-count b{font-weight:400}
.qk-faces{display:flex;flex:none;padding:2px 0}
.qk-face{position:relative;display:block;width:24px;height:24px;margin-inline-start:-6px;border-radius:50%;transition:transform .32s var(--spring)}
.qk-face:first-child{margin-inline-start:0}
.qk-face img{display:block;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--paper);background:var(--paper);object-fit:cover;transition:transform .3s var(--spring),border-color .2s,box-shadow .2s}
/* a maker with no picture: their initial, in the same ring */
.qk-ini{display:grid;place-items:center;width:24px;height:24px;box-sizing:border-box;border-radius:50%;border:1.5px solid var(--paper);background:var(--box);color:var(--ink);font:11px/1 var(--pixel);transition:transform .3s var(--spring),border-color .2s,box-shadow .2s}
.qk-face.on .qk-ini,.qk-face:hover .qk-ini,.qk-face:focus-visible .qk-ini{transform:translateY(-3px) scale(1.4);border-color:var(--ring);box-shadow:0 3px 0 rgba(29,27,23,.22)}
.qk-face:focus-visible{outline:0}.qk-face:focus-visible img,.qk-face:focus-visible .qk-ini{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--ink)}
.qk-name::after{content:"";position:absolute;inset-inline-start:50%;top:100%;width:6px;height:6px;margin:-3px 0 0 -4px;background:var(--paper);border:solid var(--ink);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.qk-face:first-child .qk-name::after{inset-inline-start:12px}
.qk-face:nth-child(1){--ring:#4fb06a}.qk-face:nth-child(2){--ring:#f2c53d}.qk-face:nth-child(3){--ring:#f28b30}.qk-face:nth-child(4){--ring:#ea4b41}.qk-face:nth-child(5){--ring:#8c5cb8}.qk-face:nth-child(6){--ring:#3f8fd9}
.qk-name{position:absolute;inset-inline-start:50%;bottom:calc(100% + 8px);z-index:30;display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 8px 3px;border:1.5px solid var(--ink);border-radius:6px;background:var(--paper);box-shadow:2px 2px 0 var(--ink);color:var(--ink);white-space:nowrap;pointer-events:none;opacity:0;transform:translate(-50%,6px) scale(.6);transform-origin:50% 100%;transition:opacity .14s,transform .3s var(--spring)}
.qk-name b{font:11px/1.2 var(--pixel);font-weight:400;letter-spacing:.04em}
.qk-name small{font-size:10.5px;line-height:1.2;color:var(--mute)}
.qk-face:first-child .qk-name{inset-inline-start:0;transform:translate(-4px,6px) scale(.6)}
.qk-face.on,.qk-face:hover,.qk-face:focus-visible{z-index:3}
.qk-face.on img,.qk-face:hover img,.qk-face:focus-visible img{transform:translateY(-3px) scale(1.4);border-color:var(--ring);box-shadow:0 3px 0 rgba(29,27,23,.22)}
.qk-face.on .qk-name,.qk-face:hover .qk-name,.qk-face:focus-visible .qk-name{opacity:1;transform:translate(-50%,-4px) scale(1)}
.qk-face:first-child.on .qk-name,.qk-face:first-child:hover .qk-name,.qk-face:first-child:focus-visible .qk-name{transform:translate(-4px,-4px) scale(1)}
.lt{display:inline-flex;align-items:center;color:var(--ink);white-space:nowrap}
.lt-roll{display:inline-block;height:1.4em;overflow:hidden;vertical-align:middle}
.lt-f{display:flex;align-items:center;gap:5px;height:1.4em;transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.lt-i{display:inline-flex;align-items:center;justify-content:center;width:9px;height:9px;flex:none}
.lt-i svg{width:9px;height:9px;display:block}
.lt-i.g{color:#4fb06a}.lt-i.y{color:#c99a12}.lt-i.b{color:#3f8fd9}.lt-i.p{color:#8c5cb8}
/* the line above the listed apps on the launch card while nobody launches today */
.cl-note.inew{margin:0;padding:10px 14px;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--mute)}
.lt-dot{position:relative;display:block;width:7px;height:7px;border-radius:50%;background:#4fb06a}
.lt-dot:after{content:"";position:absolute;inset:0;border-radius:50%;background:#4fb06a;animation:ltping 1.8s ease-out infinite}
@keyframes ltping{0%{transform:scale(1);opacity:.6}80%,100%{transform:scale(2.6);opacity:0}}
.qk-more summary{list-style:none;cursor:pointer;color:var(--ink);text-decoration:underline;text-underline-offset:2px;padding:4px 0}
.qk-more summary::-webkit-details-marker{display:none}
.qk-more[open]{flex-basis:100%}
.qk-pop{margin-top:6px;width:min(100%,440px);padding:11px 13px;background:var(--paper);border:1.5px solid var(--ink);border-radius:10px;box-shadow:4px 5px 0 rgba(29,27,23,.82);font-size:13px;line-height:1.4;color:var(--ink)}
.qk-pop>b{display:block;font:500 17px/1.15 var(--serif);margin-bottom:3px}
.qk-pop ol{margin:6px 0 0;padding-inline-start:20px}.qk-pop li{margin:5px 0}
@media (prefers-reduced-motion:reduce){.qk-face,.qk-face img,.qk-name,.lt-f{transition:none}.lt-dot:after{animation:none}}
/* the rest of the home page, under the first screen */
.irestwrap{margin-top:var(--cl-s6)}
.irest{display:flex;flex-direction:column;gap:var(--cl-s6)}
.ihair{border-top:var(--cl-hair);padding-top:var(--cl-s5)}
.isec{display:flex;align-items:baseline;justify-content:space-between;gap:var(--cl-s3);margin:0 0 var(--cl-s3)}
.isec h2{font-size:26px;margin:0}
.isec a{font-size:13px;color:var(--mute);text-decoration:underline;text-underline-offset:2px}
.ipipsl{margin:0 0 var(--cl-s3)}
.ipipsl a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
/* Wide screens: the whole big iPhone on the first screen (Justinas, 15 Nov: "on the first home page view you can see the
   whole phone"). The hello and the headline span the column; under them the line, the form, the stat line and the live
   line make one column, and the phone stands beside them at its full size. */
@media (min-width:1100px){
  .ihero{display:grid;grid-template-columns:minmax(0,1fr) 280px;grid-template-rows:auto auto auto auto auto auto 1fr;column-gap:var(--cl-s5);align-items:start}
  .ihero>.hi{grid-column:1/-1;justify-self:start}
  .ihero>h1{grid-column:1/-1}
  .ihero>.lede,.ihero>.submitrow,.ihero>.qk-trust{grid-column:1;min-width:0}
  .ihero>.stage2{grid-column:2;grid-row:3/-1;margin-top:4px}
  .ihero .submitrow .in{flex-basis:100%}
  .ihero .slwrap{flex:1}.ihero .slwrap .slide{width:100%}
  /* pause and next first, so the Help pill (fixed, bottom right) never sits on them */
  .ihero .pctl .pdots{order:3;margin-inline:auto 0}
}
@media (max-width:1060px) and (min-width:901px){.ibands .bands{width:calc(448px - 8px + 200px)}}
@media (max-width:1060px){.ihome{grid-template-columns:400px minmax(0,1fr);gap:var(--cl-s5)}.irest .cphome{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.ihome{grid-template-columns:minmax(0,1fr)}.ifeedcol{order:2}.irightcol{display:contents}.ihero{order:1}}
@media (max-width:900px){.ihero .hi{font-size:34px}.ihero h1{font-size:clamp(40px,11.5vw,62px)}.ihero .lede{font-size:14.5px}}
/* Clear space under the top bar and its rainbow line, as MacPip's stage has above its windows (Justinas, 15 Nov: "make
   sure its not touching there"). .cl .wrap's margin shorthand outranked .ihome's own, so the card sat flush on the bar. */
.istage .ihome{margin-top:var(--cl-s5)}
@media (max-width:760px){.ihero .lede{display:none}.isec h2{font-size:23px}}
@media (max-width:560px){.irest .cphome{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- small bits ---------- */
/* search on Browse: how many icons match */
.hsearch{margin:0 0 var(--cl-s4);font-size:14px;color:var(--mute)}
/* the app page: the maker's profile and X handle, when the owner saved one on their account */
.ap-mk{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.ap-mk:hover{text-decoration-color:var(--ink)}
.ap-x{display:inline-flex;align-items:center;gap:4px;margin-inline-start:8px;padding:1px 7px;border:1px solid var(--line);border-radius:6px;font-size:12.5px;color:var(--ink);text-decoration:none;vertical-align:middle}
.ap-x svg{width:11px;height:11px}
.ap-x:hover{border-color:var(--ink)}
.ap-maker small .ap-x{margin-inline-start:0}

/* candy iPhones, the twin of MacPip's candy Macs (its style.css .candymac): Browse, category pages and New on the home page.
   The phone in a candy colour, the app's screenshot on its screen; a note under it with the icon, name, line, maker, price. */
.cphones{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--cl-s6) var(--cl-s5);list-style:none;margin:0;padding:0}
.cphome{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--cl-s5) var(--cl-s4)}
.candyph{--c:#0f8fb3;--d:#075f7c;position:relative;display:flex;flex-direction:column;min-width:0;height:100%}
.tangerine{--c:#f47a22;--d:#b84a06}.lime{--c:#62ad2f;--d:#35751a}.grape{--c:#6a3fa3;--d:#3e2069}.strawberry{--c:#dc3550;--d:#961b30}.blueberry{--c:#128fbd;--d:#08597e}
.cpbody{position:relative;display:block;width:min(100%,150px);margin:0 auto;padding:8px 7px 6px;border-radius:26px;background:linear-gradient(155deg,color-mix(in srgb,var(--c) 62%,#fff) 0%,var(--c) 42%,var(--d) 100%);box-shadow:inset 2px 2px 0 rgba(255,255,255,.5),inset -2px -3px 0 rgba(0,0,0,.14),4px 6px 0 color-mix(in srgb,var(--d) 45%,var(--box2));transition:transform .32s var(--spring),box-shadow .32s}
.cpbody:before{content:"";position:absolute;inset-inline:16px;top:3px;height:4px;border-radius:4px;background:linear-gradient(rgba(255,255,255,.7),transparent);pointer-events:none}
.candyph:hover .cpbody{transform:translateY(-4px) rotate(-1deg);box-shadow:inset 2px 2px 0 rgba(255,255,255,.5),inset -2px -3px 0 rgba(0,0,0,.14),6px 11px 0 color-mix(in srgb,var(--d) 55%,var(--box2))}
.cpscr{position:relative;display:block;border:2px solid #1d1c18;border-radius:19px;overflow:hidden;background:#000}
.cpisl{position:absolute;z-index:2;top:6px;inset-inline-start:50%;width:32%;height:9px;margin-inline-start:-16%;border-radius:6px;background:#0b0a08}
.cpview{position:relative;display:block;aspect-ratio:9/19.5;overflow:hidden;background:var(--paper)}
.cpshot{display:block;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .5s var(--ease)}
.candyph:hover .cpshot{transform:scale(1.04)}
.cpblank{position:absolute;inset:0;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 14%,var(--paper))}
.cpblank img{width:56px;height:56px;border-radius:13px;border:1px solid var(--ink);box-shadow:3px 3px 0 var(--box2)}
.cpbar{display:flex;justify-content:center;padding:5px 0 1px}
.cpstripe{width:30%;height:4px;border-radius:2px;background:var(--stripes);box-shadow:0 0 0 1px rgba(0,0,0,.2)}
/* an app made for iPad only: a little iPad, landscape */
.candyph.ispad .cpbody{width:100%;padding:8px;border-radius:16px}
.candyph.ispad .cpscr{border-radius:9px}
.candyph.ispad .cpview{aspect-ratio:4/3}
.candyph.ispad .cpisl{top:auto;bottom:auto;inset-inline-start:auto;inset-inline-end:4px;top:50%;width:4px;height:4px;margin:-2px 0 0;border-radius:50%}
.candyph .sharebtn{position:absolute;top:6px;inset-inline-end:0;z-index:3;width:30px;height:30px;border-radius:8px;background:var(--paper);border:1px solid var(--line);color:var(--ink);opacity:0;transition:opacity .2s}
.candyph:hover .sharebtn,.candyph .sharebtn:focus-visible{opacity:1}
@media (hover:none){.candyph .sharebtn{opacity:1}}
.cpcap{flex:1;display:flex;flex-direction:column;margin:12px 2px 0;background:#fffdf6;border:1.5px solid var(--ink);border-radius:4px 14px 4px 4px;box-shadow:2px 3px 0 rgba(40,30,10,.22);color:var(--ink);text-decoration:none;overflow:hidden;transition:transform .32s var(--spring)}
:root[data-theme=dark] .cpcap,:root[data-theme=crt] .cpcap{background:var(--paper)}
.candyph:hover .cpcap{transform:translateY(-2px)}
.cpst{display:block;flex:none;height:6px;background:var(--c);border-bottom:1.5px solid var(--ink)}
.cpin{flex:1;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto 1fr;gap:2px 9px;align-items:center;padding:9px 10px 10px;min-width:0}
.cpin .icon{grid-row:1;width:30px;height:30px;border-radius:7px;border:1px solid var(--ink)}
.cpin strong{min-width:0;font:500 19px/1.12 var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cpin .tag{grid-column:1/-1;font-size:12.5px;line-height:1.33;color:var(--mute);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cpline{grid-column:1/-1;align-self:end;display:flex;justify-content:space-between;align-items:center;gap:6px;padding-top:6px;min-width:0;font-size:12px;color:var(--mute)}
.cpmk{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cppr{flex:none;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--c) 15%,#fff);color:color-mix(in srgb,var(--d) 85%,#000);font-weight:600;white-space:nowrap}
.candyph:hover .cpin strong{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.cpcap:focus-visible{outline:2px solid var(--b);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.cpbody,.cpcap,.cpshot{transition:none}.candyph:hover .cpbody,.candyph:hover .cpcap,.candyph:hover .cpshot{transform:none}}
/* the category chips are public/chips.css, shared byte for byte with MacPip, loaded on browse pages; it also gives the
   room between the device switch and the chips (16px, 12px on phones) */
.cbrowse .cl-empty{padding:var(--cl-s6) 0;text-align:center;color:var(--mute)}
.cbrowse .cl-empty b{display:block;font:500 22px var(--serif);color:var(--ink)}
.cbrowse .cl-empty .cl-ghost{margin-top:var(--cl-s3)}
.cl main.cbmain{padding-left:0;padding-right:0}
@media (max-width:1180px){.cphones{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:900px){.cphones{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.cphones{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--cl-s5) var(--cl-s3)}}
/* the Deals count beside Deals (functions/[[path]].js fills it): a plain number, only while deals run. MacPip's .navn */
.cltop .clnav .navcount{font:9px/1 var(--pixel);font-weight:400;padding:2px 4px;border-radius:4px;background:var(--box);color:var(--ink);margin-inline-start:2px}
@media (min-width:761px) and (max-width:880px){.cltop .clnav .navcount{display:none}}
.tabbar a{position:relative}
.tabbar .navcount{position:absolute;top:0;inset-inline-start:calc(50% + 8px);font:8px/1 var(--pixel);font-weight:400;padding:2px 3px;border-radius:4px;background:var(--ink);color:var(--paper)}
.cbempty .cbpip{display:block;width:34px;margin:0 auto var(--cl-s3)}.cbempty .cbpip .pipmark{width:34px;height:47px}
.cbempty .cl-go{margin-top:var(--cl-s4)}
/* Cloudflare's monthly visits under the launch feed (functions/_visitortile.js, MacPip's badge); a pill on phones */
.vbadge{position:relative;display:flex;align-items:center;gap:8px 14px;margin-top:10px;padding:7px 12px;background:var(--paper);color:var(--ink);border:1.5px solid var(--ink);border-radius:9px;box-shadow:4px 5px 0 rgba(29,27,23,.82)}
.vbn{display:flex;align-items:center;gap:10px;flex:none}
.vbn b{font:600 30px/1 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:-.015em}
.vbl{display:flex;flex-direction:column;gap:2px}.vbl strong{font:600 14px/1.15 var(--sans)}.vbl small{font-size:12px;color:var(--mute);white-space:nowrap}
.vbadge .vbspark{flex:1 1 0;min-width:0;height:30px;margin:0}
.vbf{display:flex;flex-direction:column;align-items:flex-start;gap:2px;flex:0 1 auto;min-width:0;font-size:12px;font-weight:600;color:var(--mute)}
.vbsrc{display:flex;align-items:center;gap:6px;white-space:nowrap;color:inherit;text-decoration:none;border-radius:5px}
.vbsrc:hover span{text-decoration:underline;text-underline-offset:3px;color:var(--ink)}
.vbsrc:focus-visible{outline:2px solid var(--b);outline-offset:2px}
.vbsrc .vtcloud{display:block;flex:none}
.vblive{font-size:11px;font-weight:500;color:var(--mute)}
.vbadge{text-decoration:none;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.vbadge:hover{transform:translate(-1px,-1px);box-shadow:5px 6px 0 rgba(29,27,23,.82)}.vbadge:active{transform:translate(1px,1px);box-shadow:2px 3px 0 rgba(29,27,23,.82)}
.vbgo{flex:none;font-size:16px;color:var(--mute);transition:transform .2s var(--ease)}.vbadge:hover .vbgo{transform:translateX(3px);color:var(--ink)}
@media (min-width:521px){.vbadge .vbgo{display:none}}
/* the full tile on /stats (MacPip's .vtile) */
.vtile{display:flex;flex-direction:column;gap:6px;box-sizing:border-box;margin:0 0 18px;padding:16px 18px 12px;background:var(--paper);color:var(--ink);border:1.5px solid var(--ink);border-radius:13px;box-shadow:3px 3px 0 var(--box);text-decoration:none;text-align:start;transition:transform .15s,box-shadow .15s}
.vtile:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--box)}
.vtile .vth{display:flex;align-items:center;gap:8px;font:600 17px/1.2 var(--sans);color:var(--ink)}.vtile .vth svg{color:#3f8fd9;flex:none}
.vtile .vtn{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;font-size:14px;color:var(--mute)}.vtile .vtn b{display:inline;font:600 34px/1.05 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em}.vtile .vtn span{font-size:14px;color:var(--mute)}
.vtile .vtspark{display:block;width:100%;height:54px;margin:4px 0 2px;overflow:visible}
.vtile .vtf{display:flex;align-items:center;gap:7px;padding-top:9px;margin-top:2px;border-top:1px solid color-mix(in srgb,var(--ink) 14%,transparent);font-size:12.5px;font-weight:600;color:var(--mute)}.vtile .vtf span{font-size:12.5px;color:var(--mute)}
.vtile .vtf .vtcloud{flex:none;display:block}
/* the badge and the tile: a stretched link to /stats over the card, Cloudflare's line above it */
.vtile,.vbadge{position:relative}
.vtgo{position:absolute;inset:0;z-index:1;border-radius:inherit}
.vtgo:focus-visible{outline:none}
.vtile:has(.vtgo:focus-visible),.vbadge:has(.vtgo:focus-visible){outline:3px solid var(--b);outline-offset:3px}
.vtile:hover,.vbadge:hover{cursor:pointer}
.vtcflink{position:relative;z-index:2;display:inline-flex;align-items:center;gap:6px;color:inherit;text-decoration:none;border-radius:5px}
.vtcflink:hover span{text-decoration:underline;text-underline-offset:3px;color:var(--ink)}
.vtcflink:focus-visible{outline:2px solid var(--b);outline-offset:2px}
.vtf .vtcflink{font-size:12.5px;font-weight:600}
.vtile:has(.vtcflink:hover),.vbadge:has(.vtcflink:hover){transform:none}
.vbadge:has(.vtcflink:hover) .vbgo{transform:none;color:var(--mute)}
.nmsrc .vtcflink{font-size:12.5px;font-weight:600}.nmsrc .vtcflink .vtcloud{display:block}
:root[data-theme=dark] .vbadge:hover,:root[data-theme=crt] .vbadge:hover{box-shadow:5px 6px 0 rgba(0,0,0,.82)}
@media (prefers-reduced-motion:reduce){.vbadge,.vbgo,.vtile{transition:none}.vbadge:hover,.vtile:hover{transform:none}}
/* /stats: MacPip's numbers.css as is; on dark and CRT pages its boxes and Pip get MacPip's night.css colours */
:root[data-theme=dark] .nmtile{background:#2e2c28}
:root[data-theme=dark] .nmpinb{background:linear-gradient(160deg,#231d08,#453c20);box-shadow:inset -1px -1px 0 rgba(0,0,0,.08),inset 1px 1px 0 rgba(255,236,200,.08),1px 2.5px 0 rgba(255,236,200,.08)}
:root[data-theme=dark] .nmpinb i{background:#2b2920;border:1.5px solid #b3b1a8}
:root[data-theme=dark] .nmpinb u{background:#c2bfb5}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]) .nmtile{background:#2e2c28}
  :root:not([data-theme]) .nmpinb{background:linear-gradient(160deg,#231d08,#453c20);box-shadow:inset -1px -1px 0 rgba(0,0,0,.08),inset 1px 1px 0 rgba(255,236,200,.08),1px 2.5px 0 rgba(255,236,200,.08)}
  :root:not([data-theme]) .nmpinb i{background:#2b2920;border:1.5px solid #b3b1a8}
  :root:not([data-theme]) .nmpinb u{background:#c2bfb5}
}
:root[data-theme=crt] .nmtile{background:#0b0d0a}
:root[data-theme=crt] .nmpinb{background:linear-gradient(160deg,#10120f,#161d18);box-shadow:inset -1px -1px 0 rgba(0,0,0,.08),inset 1px 1px 0 rgba(124,240,160,.08),1px 2.5px 0 rgba(124,240,160,.08)}
:root[data-theme=crt] .nmpinb i{background:#0c0e0b;border:1.5px solid #7bee9f}
:root[data-theme=crt] .nmpinb u{background:#70dc94}
/* Pip rides iPip's chart as a tiny smiling phone, not MacPip's tiny Mac (numbers.css stays MacPip's, pinned): taller and
   narrower, rounder, the screen filling it with the same face, and the slot moved up as the island */
.numstats .nmpin{width:26px;height:42px;margin:-50px 0 0 -13px}
.numstats .nmpinb{border-radius:8px;padding:3px}
.numstats .nmpinb i{height:100%;box-sizing:border-box;border-radius:5px}
.numstats .nmpinb u{position:absolute;top:6px;left:50%;width:8px;height:2.5px;margin:0 0 0 -4px;border-radius:2px;background:#2a2820}
.numstats .ncnotes{display:grid;gap:8px;margin:22px 0 14px}.numstats .ncnotes div{display:grid;grid-template-columns:130px 1fr;gap:12px}.numstats .ncnotes dt{font-weight:600}.numstats .ncnotes dd{margin:0;color:var(--mute)}
@media (max-width:520px){.numstats .ncnotes div{grid-template-columns:1fr;gap:2px}}
.vtspark{overflow:visible}
.vtspark .vtpulse{opacity:0;transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){.vtspark .vtpulse{animation:vtpulse 2.4s ease-out infinite}}
@keyframes vtpulse{0%{opacity:.45;stroke-width:6px}80%,100%{opacity:0;stroke-width:16px}}
.vpill{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:3px 10px 3px 9px;border:1.5px solid var(--ink);border-radius:999px;background:var(--paper);box-shadow:2px 2px 0 var(--ink);color:var(--ink);font-size:12px;line-height:1.2;white-space:nowrap;text-decoration:none}
.vpill:active{translate:1px 1px;box-shadow:1px 1px 0 var(--ink)}
.vpill b{font-variant-numeric:tabular-nums;font-weight:700}
.vpill span:not(.vpdot){color:var(--mute)}
.vpill .vtcloud{display:block;flex:none;margin-inline-start:1px}
.vpdot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--g);box-shadow:0 0 0 0 rgba(79,176,106,.55)}
@media (prefers-reduced-motion:no-preference){.vpdot{animation:vpdot 2.4s ease-out infinite}}
@keyframes vpdot{0%{box-shadow:0 0 0 0 rgba(79,176,106,.55)}70%,100%{box-shadow:0 0 0 7px rgba(79,176,106,0)}}
/* dark and CRT: the badge's offset shadow in black, as MacPip's night.css, so it still shows on a dark page */
:root[data-theme=dark] .vbadge,:root[data-theme=crt] .vbadge{box-shadow:4px 5px 0 rgba(0,0,0,.82)}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .vbadge{box-shadow:4px 5px 0 rgba(0,0,0,.82)}}
@media (max-width:760px){.ifeedcol .vbadge{display:none}}
@media (max-width:1100px) and (min-width:761px){.vbadge .vbspark{display:none}}
/* ---------- /pricing: the big iPhone, small, on the Featured and Widget cards (functions/_sponsors.js phonePreview) ---------- */
.sp-demo.sph-demo{display:grid;justify-items:center;gap:8px;padding:16px 12px 14px;background:var(--cream);border:1.5px solid var(--ink);border-radius:18px}
.sph{width:150px;padding:7px 6px 18px;border:1.5px solid var(--ink);border-radius:26px;background:linear-gradient(90deg,var(--plastic,#e9e1cc),var(--box));box-shadow:3px 4px 0 var(--ink)}
.sph-scr{position:relative;display:flex;flex-direction:column;gap:6px;aspect-ratio:9/16;padding:22px 6px 6px;border:1.5px solid var(--ink);border-radius:19px;background:var(--cream);overflow:hidden}
.sph-isl{position:absolute;top:5px;left:50%;width:32%;height:10px;margin-left:-16%;border-radius:8px;background:#0b0a08}
.sph-wdg{display:flex;align-items:center;gap:5px;height:42px;padding:5px 6px;border:1.5px solid var(--ink);border-radius:11px;background:var(--paper);opacity:.55}
.sph-wdg.you{opacity:1;border-color:var(--gold,#c99a12);box-shadow:0 0 0 2px #e9cf6d,2px 2px 0 var(--ink)}
.sph-wic{flex:none;width:22px;height:22px;border-radius:6px;border:1px solid var(--ink);background:linear-gradient(135deg,var(--b),var(--v))}
.sph-wdg:not(.you) .sph-wic{background:var(--box)}
.sph-wt{display:grid;gap:2px;min-width:0;font-size:8px;line-height:1.15;color:var(--ink)}
.sph-wt b{font:500 11px/1.1 var(--serif)}.sph-wt small{font-size:7.5px;color:var(--mute)}
.sph-wt .sptag{justify-self:start;font:6px/1 var(--pixel);letter-spacing:.06em;text-transform:uppercase;padding:2px 3px;border-radius:2px;background:#e9cf6d;color:#1d1b17}
.sph-wt i{display:block;width:44px;height:5px;border-radius:3px;background:var(--line)}.sph-wt i.s{width:28px}
.sph-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px 4px;justify-items:center}
.sph-ic{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;border:1px solid var(--ink);background:var(--paper);overflow:hidden;font:300 13px/1 var(--sans);color:var(--mute)}
.sph-ic img{display:block;width:100%;height:100%;object-fit:cover}
.sph-ic.open{border-style:dashed;background:var(--gold-bg,#fff6d6)}
.sph-ic.feat{border-style:dashed;background:var(--gold-bg,#fff6d6);box-shadow:0 0 0 1px var(--paper),0 0 0 2px var(--gold,#c99a12)}
.sph-ic.you{border-style:solid;background:linear-gradient(135deg,var(--b),var(--v));color:#fff;box-shadow:0 0 0 1px var(--paper),0 0 0 3px #e9cf6d;transform:scale(1.12)}
.sph-ic.you b{font:600 13px/1 var(--sans)}
.sph-dock{display:flex;justify-content:space-evenly;margin-top:auto;padding:4px 3px;border:1.5px solid var(--ink);border-radius:11px;background:color-mix(in srgb,var(--paper) 80%,transparent)}
.sph-you{font:9px var(--pixel);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.sph-price{display:inline-flex;align-items:center;height:24px;padding:0 10px;border:1.5px solid var(--ink);border-radius:999px;background:var(--paper);box-shadow:2px 2px 0 var(--ink);font:600 12px var(--sans);color:var(--ink)}
@media (prefers-reduced-motion:no-preference){.sph-ic.you,.sph-wdg.you{animation:sphyou 2.4s ease-in-out infinite}}
@keyframes sphyou{50%{box-shadow:0 0 0 1px var(--paper),0 0 0 4px #f3c63f}}