html,body{margin:0;padding:0;background:#fff}body[data-page=pinata]{overflow-x:clip}
#pinata-main{display:flex;flex-direction:column;align-items:center;width:100%;max-width:1440px;min-height:100vh;margin-inline:auto;overflow:visible}
.ssr-variant{display:contents}.case-close{position:fixed;right:20px;top:16px;width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:#e7e7e7dd;backdrop-filter:blur(12px);color:#000;z-index:20;transition:background .2s,transform .3s}.case-close:hover{background:#ccc;transform:rotate(90deg)}
.case-toc{display:none}[data-case-anchor]{scroll-margin-top:74px}
@media(min-width:1280px) and (hover:hover) and (pointer:fine){
 .case-toc{display:block;position:fixed;left:16px;top:74px;width:130px;z-index:10;opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s}.case-toc.is-visible{opacity:1;visibility:visible}
 .case-toc ol{display:flex;flex-direction:column;align-items:flex-start;gap:12px;list-style:none;margin:0;padding:0}.case-toc li{margin:0;padding:0}.case-toc a{display:block;width:max-content;padding:4px 12px;border-radius:1000px;color:#5c5c5c;background:transparent;font-size:14px;font-weight:500;line-height:20px;letter-spacing:normal;text-decoration:none;white-space:nowrap;transition:background-color .2s,color .2s}.case-toc a:hover{background:#f2f2f2;color:#404040}.case-toc a[aria-current=location]{background:#e8e8e8;color:#141414;transition:none}.case-toc a:focus-visible{outline:2px solid;outline-offset:3px}
 #pinata-main{width:calc(100% - 320px)}
}

#pinata-main{gap:0}#pinata-main .pinata-hero{gap:64px}#pinata-main .framer-5hclak,#pinata-main .framer-1oogrns{width:100%;max-width:100%}
#pinata-main [data-text-style=body-1]{--type-leading:1.55;--type-tracking:.01em}#pinata-main .pinata-hero h1{--type-tracking:-.01em}
#pinata-main .pinata-columns>*{min-width:0}#pinata-main .pinata-media{width:100%;height:auto;aspect-ratio:var(--media-ratio);position:relative}
#pinata-main .pinata-results-core{width:100%;max-width:100%;overflow:hidden;background:#252330}#pinata-main .pinata-results [data-text-style]{--type-color:#fff;--type-weight:500}#pinata-main .pinata-results [data-text-style^=body]{--type-weight:400}
#pinata-main .pinata-phones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;align-items:center;padding:0 68px}#pinata-main .pinata-phone{display:block;width:100%;height:auto;object-fit:contain;position:relative;max-height:720px}
#pinata-main .pinata-results-title>div{width:100%;max-width:none}#pinata-main .pinata-tags{width:100%;height:auto;flex-wrap:wrap;gap:12px}
.pinata-table-scroll{width:100%;overflow:auto;overscroll-behavior-x:contain;scrollbar-width:thin}#pinata-main .framer-16h7d2j{min-width:800px}.pinata-table-scroll:focus-visible{outline:2px solid #7449b8;outline-offset:6px}
@media(max-width:1759px){
 #pinata-main .pinata-hero{padding:100px 48px 64px}#pinata-main .pinata-art{padding:0 48px}#pinata-main .pinata-section{padding:80px 48px;gap:64px}#pinata-main .pinata-footer{padding:80px 48px}#pinata-main .pinata-results{padding:64px 24px}
 #pinata-main .pinata-results-title{padding:48px 48px 0}#pinata-main .pinata-results-copy{padding:0 48px 48px;gap:64px}#pinata-main .pinata-results [data-text-style=heading-1]{--type-size:64px}
 #pinata-main .pinata-phones{padding:0 48px;gap:24px}
}
@media(max-width:1099px){
 #pinata-main .pinata-columns{flex-direction:column;gap:32px}#pinata-main .pinata-columns>div,#pinata-main .pinata-columns>.ssr-variant>div{width:100%;max-width:none;flex:none}
 #pinata-main .pinata-results-core{gap:64px}#pinata-main .pinata-results [data-text-style=heading-1]{--type-size:48px}#pinata-main .pinata-results [data-text-style=heading-2]{--type-size:40px}
 #pinata-main .framer-wkz8kx{gap:48px}#pinata-main .framer-1oryygt{width:100%;max-width:none}#pinata-main .framer-1gxoicz{width:100%;max-width:none}#pinata-main .framer-1f4cn3u{padding-top:40px}
}
@media(max-width:699px){
 #pinata-main .pinata-hero{padding:96px 20px 48px;gap:32px}#pinata-main .pinata-hero h1{--type-size:34px;--type-leading:1.2;text-align:center!important}#pinata-main .framer-excupq{width:100%;max-width:none}#pinata-main .pinata-art{padding:0 20px}
 #pinata-main .pinata-section{padding:56px 20px;gap:40px}#pinata-main .pinata-section [data-text-style=heading-3]{--type-size:32px;--type-leading:1.2}#pinata-main [data-text-style=body-1],#pinata-main [data-text-style=body-2]{--type-size:18px;--type-leading:1.6;--type-tracking:.005em}
 #pinata-main .pinata-results{padding:48px 0}#pinata-main .pinata-results-core{border-radius:0;gap:40px}#pinata-main .pinata-results-title{padding:32px 20px 0}#pinata-main .pinata-results-copy{padding:0 20px 32px;gap:32px}#pinata-main .pinata-results [data-text-style=heading-1]{--type-size:36px;--type-leading:1.18}#pinata-main .pinata-results [data-text-style=heading-2]{--type-size:32px;--type-leading:1.2}
 #pinata-main .pinata-phones{padding:0 20px;gap:12px}#pinata-main .pinata-footer{padding:40px 20px 64px}#pinata-main .framer-1uww6dl{flex-direction:column;gap:32px}#pinata-main .framer-1uww6dl>.ssr-variant>div{width:100%;flex:none}#pinata-main .framer-1ha5snb{flex-wrap:wrap;gap:12px}#pinata-main .framer-1ha5snb p{font-size:24px!important}
 #pinata-main .framer-5oiqkv{gap:16px;flex-wrap:wrap}#pinata-main .framer-1pcztyj{width:38px}#pinata-main .framer-tcge8j{gap:8px}#pinata-main .framer-fX5g9.framer-k6vrgg{padding:10px 12px}.case-close{right:16px;top:12px;width:44px;height:44px}
 #pinata-main .framer-15u7qnj{gap:32px}#pinata-main .framer-5hblru{width:100%;max-width:none}#pinata-main .pinata-section h2 br{display:none}
}
@media(prefers-reduced-motion:reduce){.case-close,.case-toc,.case-toc a{transition:none}}
#pinata-main .framer-1f4cn3u>div>div{width:100%;max-width:100%}
@media(max-width:699px){
 #pinata-main .framer-q49xzs,#pinata-main .framer-jno8pk{display:none}
 #pinata-main .pinata-hero h1,#pinata-main #design-system{background:linear-gradient(110deg,#392056 0%,#211624 35%,#ab00aa 68%,#3d1b61 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
}
#pinata-main .framer-8s8oee,#pinata-main .framer-61p71q,#pinata-main .framer-11bunwq{width:100%;max-width:100%}
@media(max-width:1099px){#pinata-main .framer-wsdjig,#pinata-main .framer-1thmgk0,#pinata-main .framer-cenfey{width:100%;max-width:none}}

[data-case-anchor]:focus{outline:none}

/* Mobile introductions read from a consistent left edge. */
@media(max-width:699px){
 #pinata-main .pinata-hero{align-items:flex-start}
 #pinata-main .pinata-hero h1.framer-text,#pinata-main .pinata-hero p.framer-text{text-align:left!important;--framer-text-alignment:left!important}
 #pinata-main .pinata-tags{justify-content:flex-start;align-self:stretch;width:100%}
}

/* Match both Piñata introductions to the shared project hero layout. */
#pinata-main .pinata-hero h1,#pinata-main #design-system{white-space:normal;text-wrap:balance}
#pinata-main .pinata-hero .framer-excupq,#pinata-main .pinata-design-description{width:100%;max-width:893px;margin-inline:auto}
#pinata-main .pinata-design-intro{gap:64px}
#pinata-main .pinata-design-intro .framer-15u7qnj{width:100%}
#pinata-main .pinata-design-intro .framer-pjt1ud{display:none}
#pinata-main .pinata-hero-tags,#pinata-main .pinata-design-intro .pinata-tags{justify-content:center}
@media(min-width:700px){
 #pinata-main .pinata-design-intro{align-items:center}
 #pinata-main .pinata-design-intro h2.framer-text,#pinata-main .pinata-design-description p.framer-text{text-align:center!important;--framer-text-alignment:center!important}
}
@media(min-width:1100px){#pinata-main .framer-1lihwd{width:calc((100% - 48px)/2)}}
@media(max-width:699px){
 #pinata-main .pinata-title-break{display:none}
 #pinata-main .pinata-design-intro{gap:32px}
 #pinata-main .pinata-design-intro #design-system{--type-size:34px;--type-leading:1.2}
 #pinata-main .pinata-tags{justify-content:flex-start;gap:8px}
}

/* Confine each texture to its title and keep component tags left aligned. */
#pinata-main .framer-1jdjnde,#pinata-main .framer-1uba9jo{overflow:hidden;isolation:isolate;background:#fff}
#pinata-main .framer-5fok99.pinata-tags{justify-content:flex-start}

/* Mobile: compact comparison columns and edge-to-edge case imagery. */
@media(max-width:699px){
 #pinata-main .framer-16h7d2j{width:712px;min-width:712px}
 #pinata-main .framer-16h7d2j>div>div{flex:0 0 116px;width:116px;min-width:0}
 #pinata-main .framer-16h7d2j>div>div:first-child{flex-basis:132px;width:132px}
 #pinata-main .pinata-table-scroll{-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--table-fade-left,0px),#000 calc(100% - var(--table-fade-right,28px)),transparent);mask-image:linear-gradient(to right,transparent,#000 var(--table-fade-left,0px),#000 calc(100% - var(--table-fade-right,28px)),transparent)}
 #pinata-main .pinata-art{padding-inline:0}
 #pinata-main .pinata-media,#pinata-main .pinata-media>div,#pinata-main .pinata-media img{border-radius:0!important}
 #pinata-main .pinata-section .pinata-media{width:100%;max-width:100%;margin-inline:0}
 #pinata-main #design-system{background-image:url('/assets/quality/Pww7F911fUvuxDFyLVO1XcGY-ac9ad250b3.jpg');background-size:cover;background-position:center 15%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
 #pinata-main .pinata-hero-tags,#pinata-main .pinata-design-intro .pinata-tags{justify-content:flex-start}
}

/* Keep comparison labels readable and align every cell on one row center. */
@media(max-width:699px){
 #pinata-main .framer-16h7d2j>div{height:144px;min-height:144px;align-items:stretch}
 #pinata-main .framer-16h7d2j>div:first-child{height:181px;min-height:181px}
 #pinata-main .framer-16h7d2j>div>div{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0;height:100%;padding:0;box-sizing:border-box}
 #pinata-main .framer-16h7d2j>div>div:first-child{position:sticky;left:0;z-index:3;align-items:flex-start;padding-right:12px;background:#fff}
 #pinata-main .framer-16h7d2j>div>div:first-child>div{position:static;inset:auto;transform:none!important;width:100%;height:auto;white-space:normal}
 #pinata-main .framer-16h7d2j>div>div:first-child p{white-space:normal;overflow-wrap:normal;word-break:normal;line-height:1.35;text-align:left;margin:0}
 #pinata-main .framer-16h7d2j>div>div>[aria-hidden=true]{position:absolute;bottom:0;left:0;right:0}
 #pinata-main .framer-16h7d2j>div:first-child>div:not(:first-child)>div:first-child{position:absolute;top:12px;left:0;width:100%;height:auto;text-align:center}
 #pinata-main .pinata-table-scroll{-webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - var(--table-fade-right,28px)),transparent);mask-image:linear-gradient(to right,#000 0,#000 calc(100% - var(--table-fade-right,28px)),transparent)}
}

/* Only photographic panels with a filled background bleed to the mobile edges. */
@media(max-width:699px){
 #pinata-main .pinata-inset-art{padding-inline:20px}
 #pinata-main .pinata-full-bleed{overflow:hidden;border-radius:0!important}
 #pinata-main .pinata-full-bleed img{transform:scale(1.03)}
}