/* Shared look for the catalog pages (29 Sep 2026): Tools, Samples, Plugins and Pricing match the home page.
   A picture behind the headline (each page its own), pink pill buttons, glass search, a painted end panel.
   Scoped to body.sz-look so hub.css, samples-hub.css and pricing.css stay as they are for other pages.
   Poppins only. No doodles, no spaced monospace labels. */
.sz-look{--sx-ink:#f5f0f7;--sx-soft:#efe7f1;--sx-muted:#b6adbf;--sx-line:#ffffff17;--sx-panel:#14101b;--sx-pink:#ffabd5;--sx-ease:cubic-bezier(.2,.75,.2,1);--sx-spring:cubic-bezier(.34,1.3,.4,1)}
.sz-look .hub-main{overflow-x:clip}
.sz-look .hub-main:before{display:none}

/* ---------- hero ---------- */
.sz-look .sx-hero{position:relative;isolation:isolate;padding:clamp(40px,7vh,88px) 0 clamp(40px,6vh,70px)}
.sz-look .sx-scene{position:absolute;z-index:-1;top:0;bottom:-120px;left:calc(50% - 50vw);width:100vw;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(#000 55%,transparent 96%);mask-image:linear-gradient(#000 55%,transparent 96%)}
.sz-look .sx-photo,.sz-look .sx-paint{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sz-look .sx-photo{object-position:78% 40%}
.sz-look .sx-scene:after{content:'';position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,#09070ef2 0%,#09070ed9 30%,#09070e80 52%,#09070e1f 78%,transparent 100%),linear-gradient(180deg,#09070ecc,transparent 30%)}
.sz-look .sx-scene:before{content:'';position:absolute;inset:0;z-index:3;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.sz-look .sx-paint{z-index:1}
.sz-look .sx-inner{position:relative;max-width:640px}
.sz-look .sx-hero h1{margin:0;font-size:clamp(46px,6vw,86px);font-weight:500;line-height:1.02;letter-spacing:-.06em;color:var(--sx-ink)}
.sz-look .sx-hero h1 em{font-style:normal;background-image:linear-gradient(100deg,#fff0fc 0%,#ffabd5 45%,#ed73b8 70%,#b99bff 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.sz-look .sx-lead{margin:22px 0 0;max-width:48ch;font-size:clamp(14px,1.2vw,16px);line-height:1.75;color:var(--sx-muted)}
.sz-look .sx-lead a{color:var(--sx-pink);font-weight:600;text-decoration:none}
.sz-look .sx-lead a:hover{text-decoration:underline}
.sz-look .sx-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:28px}
.sz-look .sx-btn,.sz-look .sx-actions .spinz-app-link{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;margin:0;padding:0 24px;border-radius:999px;font:600 14px/1 Poppins,Arial,sans-serif;letter-spacing:-.01em;text-decoration:none;cursor:pointer;transition:transform .35s var(--sx-ease),box-shadow .35s,background-color .2s,border-color .2s}
.sz-look .sx-btn svg,.sz-look .sx-actions .spinz-app-link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sz-look .sx-btn-primary{color:#1a0d16;border:0;background-image:linear-gradient(120deg,#ffb7dc,#ff98cb 55%,#ff8fc4);box-shadow:0 14px 40px #ff98cb2e,0 1px 0 #fff3 inset}
.sz-look .sx-btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 55px #ff98cb4a,0 1px 0 #fff3 inset}
.sz-look .sx-btn-secondary,.sz-look .sx-actions .spinz-app-link{color:var(--sx-ink);border:1px solid #ffffff2c;background:#ffffff06;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sz-look .sx-btn-secondary:hover,.sz-look .sx-actions .spinz-app-link:hover{border-color:#ffffff55;background:#ffffff0c}
.sz-look .sx-actions .spinz-app-link[hidden]{display:none}
.sz-look .sx-fine{margin:16px 0 0;font-size:12px;color:#9d93a6}
.sz-look .sx-fine b{color:var(--sx-soft);font-weight:600}
.sz-look .sx-fine a{color:var(--sx-soft)}

/* centred hero (pricing): dark in the middle, picture around it */
.sz-look .sx-hero--center .sx-inner{max-width:760px;margin:0 auto;text-align:center}
.sz-look .sx-hero--center .sx-lead{margin-inline:auto;max-width:62ch}
.sz-look .sx-hero--center .sx-actions{justify-content:center}
.sz-look .sx-hero--center .sx-scene:after{background:radial-gradient(ellipse 34% 46% at 50% 40%,#09070ef2 0%,#09070ed0 50%,#09070e73 82%,#09070e33 100%),linear-gradient(180deg,#09070eb3,transparent 24%)}

/* samples: a wall of pack posters, tilted, on the right */
.sz-look .sx-wall{position:absolute;inset:-22% -4% -10% 46%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-content:start;gap:16px;transform:rotate(-9deg);opacity:.95}
.sz-look .sx-wall img{display:block;width:100%;height:auto;aspect-ratio:800/1071;object-fit:cover;border-radius:14px;box-shadow:0 30px 60px #000c}
.sz-look .sx-wall img:nth-child(4n+2){transform:translateY(-18%)}
.sz-look .sx-wall img:nth-child(4n+3){transform:translateY(10%)}
.sz-look .sx-wall img:nth-child(4n){transform:translateY(-6%)}

/* pricing: every tool's picture as a tilted mosaic behind the plans headline */
.sz-look .sx-mosaic{position:absolute;inset:-14% -8% -20%;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));align-content:start;gap:14px;transform:rotate(-7deg);opacity:.95}
.sz-look .sx-mosaic img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:14px}
.sz-look .sx-mosaic img:nth-child(odd){transform:translateY(16%)}

/* ---------- search and filters on glass (tools-hub pages) ---------- */
.sz-look .hub-discovery{position:relative;padding-bottom:0;border-bottom:0}
.sz-look .hub-search{height:60px;border-radius:16px;border-color:#ffffff26;background:#120e18b8;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 24px 60px #00000070}
.sz-look .hub-filter-row{padding-top:16px}
.sz-look .hub-filters button:not([aria-pressed=true]){border-color:#ffffff14;background:#ffffff05}

/* ---------- painted end panel ---------- */
.sz-look .sx-end{position:relative;isolation:isolate;overflow:hidden;margin:56px 0 0;padding:52px 28px;border-radius:24px;border:1px solid #ffabd533;background:radial-gradient(ellipse at 20% 0%,#ff98cb22,transparent 55%),radial-gradient(ellipse at 100% 100%,#48327940,transparent 55%),var(--sx-panel);text-align:center}
.sz-look .sx-end-paint{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;pointer-events:none}
.sz-look .sx-end h2{margin:0;font-size:clamp(28px,3.3vw,40px);font-weight:500;line-height:1.12;letter-spacing:-.045em;color:var(--sx-soft)}
.sz-look .sx-end h2 em{font-style:normal;color:var(--sx-pink);background:none;-webkit-text-fill-color:currentColor}
.sz-look .sx-end p{margin:12px auto 0;max-width:52ch;font-size:14px;line-height:1.8;color:var(--sx-muted)}
.sz-look .sx-end p a{color:var(--sx-soft)}
.sz-look .sx-end .sx-actions{justify-content:center;margin-top:24px}
.sz-look .hub-footer{margin-top:20px}

/* ---------- price sticker (packs and plugins), slapped on in the product's colour ---------- */
.sz-look .sx-sticker{display:inline-flex;flex-direction:column;align-items:flex-start;width:max-content;max-width:100%;padding:7px 12px 8px;border-radius:9px;background:var(--accent);color:#170f19;font-size:12px;line-height:1.2;transform:rotate(-2.5deg);box-shadow:0 0 0 2px #ffffffb0,0 12px 26px #00000080;transition:transform .5s var(--sx-spring)}

@media(prefers-reduced-motion:no-preference){
  .sz-look .sx-paint{animation:sx-paint 1.6s .2s var(--sx-ease) both,sx-float 24s 1.8s ease-in-out infinite alternate}
  .sz-look .sx-wall,.sz-look .sx-mosaic{animation:sx-drift 40s ease-in-out infinite alternate}
}
@keyframes sx-paint{from{opacity:0;transform:scale(1.04)}}
@keyframes sx-float{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(1.6%,-1.2%,0) scale(1.03)}}
@keyframes sx-drift{from{translate:0 0}to{translate:0 -4%}}

@media(max-width:900px){
  .sz-look .sx-scene:after{background:linear-gradient(90deg,#09070ef2 0%,#09070ecc 45%,#09070e66 80%,#09070e33 100%),linear-gradient(180deg,#09070ecc,transparent 30%)}
  .sz-look .sx-wall{inset:-10% -30% -10% 36%}
}
@media(max-width:760px){
  .sz-look .sx-hero{padding:36px 0 34px}
  .sz-look .sx-hero h1{font-size:clamp(40px,11.5vw,54px)}
  .sz-look .sx-lead{font-size:14px}
  .sz-look .sx-photo{object-position:84% 55%}
  .sz-look .sx-paint{object-position:4% 30%}
  .sz-look .sx-scene{-webkit-mask-image:linear-gradient(#000 60%,transparent 96%);mask-image:linear-gradient(#000 60%,transparent 96%)}
  .sz-look .sx-scene:after,.sz-look .sx-hero--center .sx-scene:after{background:linear-gradient(180deg,#09070ee6 0%,#09070ec7 30%,#09070e8c 60%,#09070e40 100%)}
  .sz-look .sx-actions{flex-wrap:nowrap;max-width:360px}
  .sz-look .sx-hero--center .sx-actions{margin-inline:auto}
  .sz-look .sx-btn{flex:1 1 auto;padding:0 16px;font-size:13px;white-space:nowrap}
  .sz-look .sx-actions .spinz-app-link{display:none}
  .sz-look .sx-wall{inset:-6% -30% 0 30%;gap:10px;opacity:.7}
  .sz-look .sx-mosaic{grid-template-columns:repeat(4,minmax(0,1fr));inset:-10% -30% -10%;gap:10px;opacity:.6}
  .sz-look .sx-end{margin-top:40px;padding:36px 20px}
  .sz-look .sx-end .sx-actions{flex-wrap:wrap;max-width:none}
  .sz-look .sx-end .sx-btn{flex:1 1 100%}
}
@media(max-width:380px){.sz-look .sx-hero h1{font-size:38px}}
@media(prefers-reduced-motion:reduce){.sz-look .sx-btn,.sz-look .sx-sticker{transition:none!important}}