/* Info Center + Related technical articles — page-level extension, not shared style */
:root{--navy:#0c2233;--blue:#1a6fc4;--ink:#1f2933;--mut:#5b6770;--line:#e4e8ec;--bg:#f6f8fa;}

/* ---- Technical Library (Info Center hub) ---- */
.lib{padding:34px 0 74px;background:#fff;border-top:1px solid var(--line);}
.lib-group{margin-top:40px;}
.lib-group h3{font-size:20px;color:var(--navy);margin:0 0 18px;padding-left:15px;position:relative;font-weight:700;}
.lib-group h3::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:4px;border-radius:3px;background:var(--accent,var(--blue));}
.lib-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}

.lib-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 22px 18px;display:flex;flex-direction:column;text-decoration:none;overflow:hidden;transition:box-shadow .22s,transform .22s,border-color .22s;}
.lib-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--accent,var(--blue));transform:scaleX(0);transform-origin:left;transition:transform .25s;}
.lib-card:hover{box-shadow:0 14px 34px rgba(12,34,51,.12);transform:translateY(-4px);border-color:transparent;}
.lib-card:hover::before{transform:scaleX(1);}
.lib-card .tag{display:inline-block;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--accent,var(--blue));background:#eef4fb;font-weight:700;padding:4px 10px;border-radius:999px;margin-bottom:13px;align-self:flex-start;}
.lib-card h4{font-size:15.5px;color:var(--navy);line-height:1.45;margin:0 0 14px;flex:1;font-weight:600;}
.lib-card .more{font-size:13px;font-weight:600;color:var(--accent,var(--blue));display:inline-flex;align-items:center;gap:6px;transition:transform .2s;}
.lib-card:hover .more{transform:translateX(4px);}

/* group accent colours (matched to existing section ids) */
.lib-group#pearlescent-pigment{--accent:#1a6fc4;}
.lib-group#glitter{--accent:#d6336c;}
.lib-group#color-changing-optically-variable{--accent:#7048e8;}
.lib-group#metallic-powder{--accent:#c98a00;}
.lib-group#glow-fluorescent{--accent:#0ca678;}
.lib-group#nail-art{--accent:#e8590c;}
.lib-group#application-scenarios{--accent:#0c8599;}

/* ---- Related technical articles (on product / application pages) ---- */
.rel-art{background:var(--bg);border-top:1px solid var(--line);padding:46px 0 62px;}
.rel-art h3{font-size:22px;color:var(--navy);margin:0 0 22px;font-weight:700;}
.rel-art .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.rel-art .card{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;display:flex;flex-direction:column;text-decoration:none;overflow:hidden;transition:box-shadow .22s,transform .22s,border-color .22s;--accent:var(--blue);}
.rel-art .card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--accent,var(--blue));transform:scaleX(0);transform-origin:left;transition:transform .25s;}
.rel-art .card:hover{box-shadow:0 14px 34px rgba(12,34,51,.12);transform:translateY(-4px);border-color:transparent;}
.rel-art .card:hover::before{transform:scaleX(1);}
.rel-art .card .tag{display:inline-block;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--accent,var(--blue));background:#eef4fb;font-weight:700;padding:4px 10px;border-radius:999px;margin-bottom:11px;align-self:flex-start;}
.rel-art .card h4{font-size:15px;color:var(--navy);line-height:1.45;margin:0 0 8px;flex:1;font-weight:600;}
.rel-art .card .more{font-size:13px;font-weight:600;color:var(--accent,var(--blue));display:inline-flex;align-items:center;gap:6px;transition:transform .2s;}
.rel-art .card:hover .more{transform:translateX(4px);}

@media (max-width:980px){.lib-grid,.rel-art .grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){.lib-grid,.rel-art .grid{grid-template-columns:1fr;}}