:root{--ink:#14141b;--muted:#5d5d6b;--line:#e8e8ef;--r:22px;--font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:#fff;overflow-x:hidden;line-height:1.45}
img{max-width:100%;display:block}
a{color:inherit}
.show-sm{display:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:#000;color:#fff;padding:10px 14px;border-radius:8px;z-index:9}
.skip:focus{left:8px}
:focus-visible{outline:3px solid #2F5BEA;outline-offset:3px}

.aurora{position:absolute;inset:0 0 auto 0;height:620px;overflow:hidden;pointer-events:none;z-index:-1}
.aurora i{position:absolute;width:520px;height:520px;border-radius:50%;filter:blur(90px);opacity:.22;animation:drift 18s ease-in-out infinite alternate}
.aurora i:nth-child(1){background:#1f9ce0;left:calc(50% - 560px);top:-160px}
.aurora i:nth-child(2){background:#ffd200;left:calc(50% - 160px);top:-260px;animation-delay:-6s;opacity:.18}
.aurora i:nth-child(3){background:#ef4136;left:calc(50% + 120px);top:-150px;animation-delay:-12s}
@keyframes drift{to{transform:translate(60px,40px) scale(1.15)}}

.top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px clamp(14px,3vw,32px);font-size:.92rem;white-space:nowrap}
.top-pill{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--muted);padding:7px 12px;border-radius:99px;background:rgba(255,255,255,.7);border:1px solid var(--line)}
.top-pill:hover{color:var(--ink)}
.dot{width:8px;height:8px;border-radius:50%;background:#1FA34A;box-shadow:0 0 0 4px rgba(31,163,74,.18)}
.top-links{display:flex;gap:6px}
.top-links a{display:inline-flex;align-items:center;gap:7px;text-decoration:none;font-weight:700;padding:8px 12px;border-radius:99px}
.top-links a:hover{background:#f3f3f8}
.top-links svg{width:18px;height:18px;fill:currentColor}

.stage{text-align:center;padding:2px 16px 0;max-width:760px;margin:0 auto}
.logo{margin:0 auto;width:min(270px,70vw)}
.logo img{width:100%;height:auto;clip-path:inset(1.5%)}
.q{font-size:clamp(1.55rem,3.6vw,2.5rem);font-weight:800;letter-spacing:-.03em;margin:2px 0 14px;line-height:1.1}
.search{position:relative;max-width:620px;margin:0 auto}
.search input{width:100%;font:500 1.08rem var(--font);padding:15px 92px 15px 54px;border-radius:99px;border:1.5px solid var(--line);background:#fff;color:var(--ink);
  box-shadow:0 1px 2px rgba(20,20,40,.06),0 10px 30px -12px rgba(20,20,60,.18);transition:box-shadow .25s,border-color .25s;-webkit-appearance:none;appearance:none}
.search input:hover{box-shadow:0 1px 2px rgba(20,20,40,.06),0 14px 36px -12px rgba(20,20,60,.26)}
.search input:focus{outline:none;border-color:transparent;box-shadow:0 0 0 3px #fff,0 0 0 5px #2F5BEA,0 14px 36px -12px rgba(47,91,234,.45)}
.search input::-webkit-search-cancel-button{display:none}
.s-ico{position:absolute;left:20px;top:50%;width:22px;height:22px;transform:translateY(-50%);fill:none;stroke:#7a7a8a;stroke-width:2.2;stroke-linecap:round}
.search kbd{position:absolute;right:14px;top:50%;transform:translateY(-50%);font:600 .74rem var(--font);color:#5d5d6b;border:1px solid var(--line);border-radius:8px;padding:4px 8px;background:#fafafd}
.hint{color:var(--muted);font-size:.9rem;margin:10px 0 0}

#products{max-width:1240px;margin:20px auto 0;padding:0 clamp(12px,3vw,32px)}
.grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.t{animation:rise .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*35ms)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
.t a{position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:94px;padding:14px 16px;border-radius:var(--r);text-decoration:none;
  color:var(--fg);background:var(--bg);background-image:linear-gradient(150deg,rgba(255,255,255,.22),rgba(255,255,255,0) 45%,rgba(0,0,0,.10));
  overflow:hidden;isolation:isolate;box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 6px 16px -10px var(--bg);
  transition:transform .35s cubic-bezier(.2,.9,.25,1.2),box-shadow .35s,opacity .3s,filter .3s}
.t a::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);transform:translateX(-120%);transition:transform .7s ease}
.t a:hover,.t a:focus-visible{transform:translateY(-6px) scale(1.02);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 22px 34px -16px var(--bg)}
.t a:hover::after,.t a:focus-visible::after{transform:translateX(120%)}
.t a:active{transform:translateY(-2px) scale(.99)}
.t-ico{position:absolute;right:12px;top:12px;width:38px;height:38px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:.9;transition:transform .45s cubic-bezier(.2,.9,.25,1.4)}
.t a:hover .t-ico{transform:rotate(-8deg) scale(1.12)}
.t-name{font-weight:800;font-size:1.08rem;line-height:1.15;letter-spacing:-.01em;max-width:calc(100% - 30px)}
.t-price{font-size:.86rem;opacity:.95;margin-top:3px}
.t-price b{font-weight:800}
.t-go{position:absolute;right:14px;bottom:14px;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:translateX(-8px);transition:.3s}
.t a:hover .t-go,.t a:focus-visible .t-go{opacity:1;transform:none}
.t--big{grid-column:span 2}
.t--big .t-name{font-size:1.5rem}
.t--big .t-deal{left:auto;top:auto;right:62px;bottom:16px}
.t--big a:hover .t-deal{transform:rotate(-3deg) scale(1.06)}
.t-deal{transition:transform .4s cubic-bezier(.2,.9,.25,1.4)}
/* 9 Oct 2026: ONE wide "Signage and Pull Up Banners" tile replaces five (ACM, Correx, Pull Up Banners, Vehicle Branding, Sharkfins).
   12 tiles: span 3 at 5 columns and full width below that, with dense flow, so every row is full (5, 4, 3 and 2 columns). */
.grid{grid-auto-flow:row dense}
.t--wide{grid-column:span 3}
.t--wide .t-name{font-size:1.3rem;max-width:calc(100% - 50px)}
/* 10 Oct 2026: split into "Signage" (wide) + "Pull Up Banners and Banners" (t--ban). 13 tiles; spans keep every row full at 5/4/3/2 columns. */
.grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.t--wide{grid-column:span 2}
.t-sub{font-size:.78rem;font-weight:600;opacity:.92;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 40px)}
.t-deal{position:absolute;left:16px;top:14px;font-size:.78rem;font-weight:800;background:rgba(255,255,255,.95);color:#1d3fbf;padding:5px 10px;border-radius:99px}
.grid.filtering .t:not(.hit) a{opacity:.16;filter:grayscale(1);transform:scale(.97)}
.grid.filtering .t.hit a{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--bg),0 16px 30px -14px var(--bg)}
.nomatch{text-align:center;color:var(--muted);margin:18px 0 0}

.how{max-width:1000px;margin:72px auto 0;padding:0 20px;text-align:center}
.how h2,.visit h2{font-size:1.35rem;letter-spacing:-.02em;margin:0 0 18px}
.how ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;text-align:left}
.how li{display:flex;gap:14px;align-items:flex-start;padding:18px;border:1px solid var(--line);border-radius:18px;background:#fff}
.how li div{display:flex;flex-direction:column}
.how li span:not(.n){color:var(--muted);font-size:.92rem}
.n{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;background:linear-gradient(135deg,#2F5BEA,#00A896)}
.how li:nth-child(2) .n{background:linear-gradient(135deg,#FFB000,#F28C1B)}
.how li:nth-child(3) .n{background:linear-gradient(135deg,#E5326E,#D7263D)}

.visit{max-width:1000px;margin:56px auto 0;padding:0 20px;display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:center}
.visit img{border-radius:20px;width:100%;height:auto;aspect-ratio:722/531;object-fit:cover}
.visit p{color:var(--muted);margin:0 0 14px}
.visit dl{margin:0 0 18px;display:grid;gap:8px}
.visit dl div{display:flex;gap:12px}
.visit dt{font-weight:800;min-width:56px}
.visit dd{margin:0}
.visit dd a{display:inline-block;padding:3px 0}
.cta{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 20px;border-radius:99px;background:#14141b;color:#fff;text-decoration:none;font-weight:800}
.btn:hover{background:#2F5BEA}
.btn--ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.btn--ghost:hover{background:#f3f3f8;color:var(--ink)}

.foot{margin-top:64px;padding:26px 20px 34px;border-top:1px solid var(--line);text-align:center;color:var(--muted);font-size:.86rem;background:#fafafd}
.foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin-bottom:10px}
.foot a{text-decoration:none;font-weight:600;color:var(--ink);display:inline-block;padding:6px 2px}
.foot a:hover{text-decoration:underline}
.foot p{margin:0}

@media (max-width:1100px){.grid{grid-template-columns:repeat(4,1fr)}.t--wide{grid-column:1/-1}}
@media (max-width:820px){.grid{grid-template-columns:repeat(3,1fr)}.visit{grid-template-columns:1fr}.how ol{grid-template-columns:1fr}}
@media (max-width:560px){
  .grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .t a{height:92px;padding:12px 13px;border-radius:18px}
  .t-ico{width:30px;height:30px;right:10px;top:10px}
  .t-name{font-size:.98rem}
  .t--big .t-name{font-size:1.3rem}
  .t-go{display:none}
  .hide-sm{display:none}
  .top{padding:10px 12px}
  .top-pill{font-size:.78rem;padding:6px 10px}
  .top-pill .hide-sm{display:none}
  .show-sm{display:inline}
  .t--big a{height:108px}
  .t--big .t-deal{left:13px;top:12px;right:auto;bottom:auto}
  .t--wide a{height:108px}
  .t--wide .t-name{font-size:1.15rem}
  .t-sub{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-width:100%;font-size:.74rem}
  .top{font-size:.84rem}
  .top-links a{padding:10px 7px}
  .top-links{gap:0}
  .top{gap:6px}
  .top-pill{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .search input{padding:15px 18px 15px 48px;font-size:1rem}
  .search kbd{display:none}
  .s-ico{left:17px}
  .q{margin-bottom:12px}
  .hint{font-size:.82rem}
  #products{margin-top:18px}
}
/* two cartoon planes (decorative) */
.top,main,.foot{position:relative;z-index:1}
.sky{position:absolute;left:0;top:0;width:100%;height:0;overflow:hidden;pointer-events:none;z-index:0}
.plane{position:absolute;left:0;top:0;width:115px;aspect-ratio:1508/823;will-change:transform,opacity;transform:translate3d(-400px,-400px,0);filter:drop-shadow(0 6px 5px rgba(20,20,60,.18))}
.pl-img{position:absolute;inset:0;width:100%;height:100%;display:block}
.pl-cone{position:absolute;left:12.93%;top:37.55%;width:11.14%;height:14.46%;display:block}
.prop{position:absolute;left:2.45%;top:13.49%;width:33.16%;aspect-ratio:1;transform:rotate(4deg) scaleX(.6)}
.prop i{position:absolute;inset:0;border-radius:50%}
.prop-disc{background:radial-gradient(closest-side,rgba(120,130,145,0) 35%,rgba(120,130,145,.16) 72%,rgba(90,100,115,.32) 95%,rgba(90,100,115,0) 100%)}
.prop-spin{background:conic-gradient(rgba(30,32,38,0) 0deg 100deg,rgba(30,32,38,.14) 125deg,rgba(30,32,38,.5) 162deg,rgba(30,32,38,.95) 166deg 180deg,rgba(30,32,38,0) 181deg 280deg,rgba(30,32,38,.14) 305deg,rgba(30,32,38,.5) 342deg,rgba(30,32,38,.95) 346deg 360deg);
  -webkit-mask:radial-gradient(closest-side,transparent 14%,#000 22%,#000 93%,transparent 100%);mask:radial-gradient(closest-side,transparent 14%,#000 22%,#000 93%,transparent 100%);
  animation:prop .3s linear infinite}
@keyframes prop{to{transform:rotate(360deg)}}
:root{--lane:64px}
.stage{padding-top:var(--lane)}
@media (min-width:1240px){.plane{width:130px}}
@media (max-width:1079px){:root{--lane:58px}.plane{width:91px}}
@media (max-width:560px){:root{--lane:50px}.plane{width:81px}.logo{width:min(216px,55vw)}.top{padding-top:7px;padding-bottom:7px}.search input{padding-top:14px;padding-bottom:14px}.q{margin:0 0 10px}.hint{margin-top:7px}#products{margin-top:14px}}
@media (prefers-reduced-motion:reduce){.sky{display:none}:root{--lane:0px}.stage{padding-top:2px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* 10 Oct 2026 banners split: tile spans per width (after the older media rules so they win) */
@media (max-width:1100px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}.grid .t--wide{grid-column:span 3}}
@media (max-width:820px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}.grid .t--wide{grid-column:span 2}}
@media (max-width:560px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 12 Oct 2026: Signage is a normal tile now. (Comic Books tile PARKED 25 Oct 2026, see /workspace/parked/comic-books/README.md.) */
.grid{grid-auto-flow:row dense}
/* 25 Oct 2026 (Comic Books parked): 13 tiles. Only Flyers (t--big) is stretched so every row stays full:
   5 cols -> Flyers span 3 (15 cells, 3 rows); 4 cols -> span 4 (16, 4 rows); 3 cols -> span 3 (15, 5 rows); 2 cols -> span 2 (14, 7 rows). */
.grid .t--big{grid-column:span 3}
@media (max-width:1100px){.grid .t--big{grid-column:span 4}}
@media (max-width:820px){.grid .t--big{grid-column:span 3}}
@media (max-width:560px){
  .grid .t--big{grid-column:span 2}
  .t--big a{height:auto}
  .t--big .t-name{font-size:.98rem}
  .t--big .t-deal{position:static;align-self:flex-start;order:3;margin-top:5px;font-size:.7rem;padding:4px 8px}
  /* tiles in a row share one height and grow if their text needs it, so Signage's "ACM, Correx, vehicle & more" isn't cut off */
  .t{display:flex}
  .t a{flex:1 1 auto;height:auto;min-height:92px}
  .t-sub{line-height:1.25}
}

/* 19 Oct 2026: while someone types in the homepage search, the tool blocks (+ video button) collapse so the tiles move up under the search */
.qcol{display:grid;grid-template-rows:1fr;opacity:1;transition:grid-template-rows .25s ease,opacity .2s ease}
.qcol-i{min-height:0}
.qcol.is-anim .qcol-i,.qcol.is-col .qcol-i{overflow:hidden}
.qcol.is-col{grid-template-rows:0fr;opacity:0}
.qcol.is-col.is-done{visibility:hidden}
@media (prefers-reduced-motion:reduce){.qcol{transition:none}}

/* 28 Oct 2026: Desk Pads now live on the Calendars page, so the last tile widens to keep the bottom row full (desktop only) */
@media (min-width:1101px){.grid .t--end{grid-column:span 2}}