/* PHASE10K13_2026-08-12 — the base row no longer draws a brand bar on hover.
   The owner: "why do all your article listings have this blue line hover?" —
   because ONE base rule drew the same left accent on all twelve designs, over
   the top of whatever signature each design had. The bar is now part of the
   LIST presentation only, which is the design it was drawn for. */
.hc-arow-dot{width:7px;height:7px;border-radius:50%;
  background:var(--g200);flex-shrink:0;transition:background .2s;margin-left:3px}
.hc-arow:hover .hc-arow-dot{background:var(--brand)}
.hc-arow-body{flex:1;min-width:0}
.hc-arow-title{font-weight:600;font-size:14.5px;color:var(--text-primary);margin-bottom:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-arow-exc{font-size:12.5px;color:var(--text-secondary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-arow-meta{display:flex;align-items:center;gap:8px;flex-shrink:0}
.hc-views{display:inline-flex;align-items:center;gap:4px;
  font-size:11.5px;color:var(--g400);white-space:nowrap}
.hc-arr{color:var(--g300);flex-shrink:0;transition:all .2s var(--ease)}
.hc-arow:hover .hc-arr{color:var(--brand-ink,var(--brand));transform:translateX(2px)}

/* ── Popular list ───────────────────────────────────────────────────────────── */
.hc-pop-list{display:flex;flex-direction:column;gap:6px}
/* PHASE_HC_MORE_CONFIG — article card layouts (list = default row; boxed = grid
   of cards; media = image-topped cards). #hc-page prefix beats per-layout
   `.layout-* .hc-pop-list` overrides so the chosen layout wins everywhere. */
/* PHASE_HC_AUTOFIT_2026-08-15 — same defect, same one-word fix: the boxed card style
   left empty tracks on the right whenever the row was not exactly full. */
#hc-page .hc-pop-list.hc-cards-boxed{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
#hc-page .hc-cards-boxed .hc-pop-item{flex-direction:column;align-items:flex-start;gap:8px;min-height:118px}
#hc-page .hc-cards-boxed .hc-pop-num{position:static;margin-bottom:2px}
#hc-page .hc-pop-list.hc-cards-media{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
#hc-page .hc-cards-media .hc-pop-item{flex-direction:column;align-items:stretch;gap:0;padding:0!important;overflow:hidden}
#hc-page .hc-pop-media{display:grid;place-items:center;width:100%;height:172px;background-size:cover;background-position:center;background-color:rgba(var(--br),.12);position:relative}
#hc-page .hc-pop-media-ph{font-size:42px;opacity:.55}
#hc-page .hc-cards-media .hc-pop-body{padding:16px 18px 18px}
#hc-page .hc-cards-media .hc-pop-title{font-size:16px}
#hc-page .hc-pop-views-inline{display:inline-block;margin-top:10px;font-size:12px;opacity:.72}
/* Same card layouts applied to the category-page + search article rows (.hc-arow). */
#hc-page .hc-alist.hc-cards-boxed{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
/* PHASE_HC_SOLO_CARD — a lone article in a boxed/media grid otherwise sits in a
 * single narrow ~280px column with the rest of the row empty (auto-fill keeps the
 * track width). With exactly one item, give it the full content width so it reads
 * as a proper feature card instead of a stranded tile. List layout is unaffected. */
#hc-page .hc-alist-solo.hc-cards-boxed,#hc-page .hc-alist-solo.hc-cards-media{grid-template-columns:1fr}
#hc-page .hc-alist-solo.hc-cards-media .hc-arow-media{height:220px}
#hc-page .hc-cards-boxed .hc-arow{flex-direction:column;align-items:flex-start;gap:8px}
#hc-page .hc-cards-boxed .hc-arow-dot{display:none}
#hc-page .hc-alist.hc-cards-media{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
#hc-page .hc-cards-media .hc-arow{flex-direction:column;align-items:stretch;gap:0;padding:0!important;overflow:hidden}
#hc-page .hc-arow-media{display:grid;place-items:center;width:100%;height:172px;background-size:cover;background-position:center;background-color:rgba(var(--br),.12);position:relative}
#hc-page .hc-arow-media-ph{font-size:42px;opacity:.55}
#hc-page .hc-cards-media .hc-arow-body{padding:16px 18px 18px}
#hc-page .hc-cards-media .hc-arow-meta,#hc-page .hc-cards-media .hc-arow>.hc-arr{display:none}
/* PHASE_HC_ARTICLE_FORMAT — Boxed & media cards must WRAP, not hard-clip. The
 * base .hc-pop-title/.hc-arow-title use white-space:nowrap (right for compact
 * list rows) which chopped titles mid-word at the card edge and left the body
 * dangling on one clipped line. Here title clamps to 2 lines, body to 3, so
 * cards read cleanly with a single trailing ellipsis and even heights. */
#hc-page .hc-cards-boxed .hc-pop-title,#hc-page .hc-cards-media .hc-pop-title,
#hc-page .hc-cards-boxed .hc-arow-title,#hc-page .hc-cards-media .hc-arow-title{
  white-space:normal!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;line-clamp:2!important;overflow:hidden!important;
  text-overflow:ellipsis!important;line-height:1.32!important;max-height:2.64em;
  overflow-wrap:anywhere;word-break:break-word}
#hc-page .hc-cards-boxed .hc-pop-exc,#hc-page .hc-cards-media .hc-pop-exc,
#hc-page .hc-cards-boxed .hc-arow-exc,#hc-page .hc-cards-media .hc-arow-exc{
  white-space:normal!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;
  -webkit-line-clamp:3!important;line-clamp:3!important;overflow:hidden!important;
  text-overflow:ellipsis!important;line-height:1.5!important;max-height:4.5em;
  overflow-wrap:anywhere;word-break:break-word}
/* Push the views/arrow to the bottom so uneven text lengths still align. */
#hc-page .hc-cards-boxed .hc-pop-body,#hc-page .hc-cards-media .hc-pop-body,
#hc-page .hc-cards-boxed .hc-arow-body,#hc-page .hc-cards-media .hc-arow-body{width:100%}
@media(max-width:560px){#hc-page .hc-alist.hc-cards-boxed,#hc-page .hc-alist.hc-cards-media{grid-template-columns:1fr}}
/* PHASE_HC_HOME_LAYOUT — home page category tiles (directory pattern) +
   no-rail full-width home. The no-rail rule mirrors the ID-level page-shell
   grid override so it wins. */
#hc-page:not(.view-article) .hc-page-shell.hc-no-rail{display:block!important;grid-template-columns:1fr!important;max-width:1080px!important;margin-left:auto!important;margin-right:auto!important}
.hc-home-cats-shell{margin:8px 0 48px}
.hc-home-cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
/* Base tile — neutral; each style (.hc-cats-*) defines its own layout + effects. */
.hc-home-cat{position:relative;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit;transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease),background .28s var(--ease)}
.hc-home-cat-ico{font-size:44px;line-height:1;width:88px;height:88px;display:grid;place-items:center;border-radius:24px;background:linear-gradient(145deg,rgba(var(--br),.16),rgba(var(--br),.05));flex:0 0 auto}
.hc-home-cat-letter{display:none;font-weight:900;font-size:26px;color:var(--brand-ink,var(--brand));width:58px;height:58px;place-items:center;border-radius:16px;background:linear-gradient(145deg,rgba(var(--br),.20),rgba(var(--br),.07));flex:0 0 auto}
.hc-home-cat-num{display:none}
.hc-home-cat-body{display:flex;flex-direction:column;gap:5px;min-width:0}
.hc-home-cat-name{font-size:19px;font-weight:800;color:var(--text-primary);letter-spacing:-.01em}
.hc-home-cat-desc{font-size:14px;line-height:1.55;color:var(--text-muted)}
.hc-home-cat-count{font-size:12px;font-weight:700;color:var(--brand-ink,var(--brand));align-self:flex-start;background:rgba(var(--br),.10);padding:4px 12px;border-radius:999px;margin-top:3px}
.hc-home-cat-arrow{display:none}
.hc-home-cats-noicon .hc-home-cat-ico,.hc-home-cats-noicon .hc-home-cat-letter{display:none!important}
/* PHASE_HC_CATEGORY_LIMIT — the tiles past home_category_limit are RENDERED (so
 * they stay real, crawlable links) and only hidden here. .hc-cats-expanded is
 * added by the "Show all" control. */
.hc-home-cats:not(.hc-cats-expanded) .hc-home-cat-more{display:none}
.hc-cats-more-wrap{display:flex;justify-content:center;margin:26px 0 4px}
.hc-cats-more{display:inline-flex;align-items:center;gap:10px;padding:13px 24px;border-radius:999px;text-decoration:none;font-size:14px;font-weight:800;color:var(--brand-ink,var(--brand));background:rgba(var(--br),.08);border:1.5px solid rgba(var(--br),.22);transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}
.hc-cats-more:hover{background:rgba(var(--br),.14);border-color:rgba(var(--br),.42);transform:translateY(-2px)}
.hc-cats-more-rest{font-size:12px;font-weight:800;padding:3px 9px;border-radius:999px;background:rgba(var(--br),.16);color:var(--brand-ink,var(--brand))}
.hc-cats-less{color:var(--text-muted);background:transparent;border-color:var(--card-border)}
.hc-cats-less:hover{background:rgba(148,163,184,.10);border-color:var(--text-muted)}
.hc-kb-articles .hc-kb-art-link .hc-kb-cat-icon{opacity:.5}
/* 1. CARD — centred icon tile (default) */
.hc-cats-card .hc-home-cat{align-items:center;text-align:center;padding:32px 26px;border-radius:22px;background:var(--card-bg);border:1.5px solid var(--card-border);box-shadow:0 10px 30px rgba(15,23,42,.05)}
.hc-cats-card .hc-home-cat:hover{transform:translateY(-8px);box-shadow:0 30px 70px rgba(15,23,42,.14);border-color:rgba(var(--br),.35)}
.hc-cats-card .hc-home-cat-body{align-items:center}.hc-cats-card .hc-home-cat-count{align-self:center}
/* 2. BADGE — letter badge + count top-right, left-aligned */
.hc-cats-badge .hc-home-cat{flex-direction:row;align-items:center;gap:16px;padding:20px 22px;border-radius:20px;background:var(--card-bg);border:1px solid var(--card-border);box-shadow:0 8px 24px rgba(15,23,42,.05)}
.hc-cats-badge .hc-home-cat:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(15,23,42,.13);border-color:rgba(var(--br),.35)}
.hc-cats-badge .hc-home-cat-ico{display:none}.hc-cats-badge .hc-home-cat-letter{display:grid}
.hc-cats-badge .hc-home-cat-count{display:none}
.hc-cats-badge .hc-home-cat-num{display:block;position:absolute;top:16px;right:20px;font-size:13px;font-weight:700;color:var(--text-muted)}
.hc-cats-badge .hc-home-cat-name{font-size:18px}
/* 3. MINIMAL — no card, flat rows */
.hc-cats-minimal{gap:6px}
.hc-cats-minimal .hc-home-cat{flex-direction:row;align-items:center;gap:14px;padding:15px 14px;border-radius:14px;background:transparent;border:0}
.hc-cats-minimal .hc-home-cat:hover{background:rgba(var(--br),.06)}
.hc-cats-minimal .hc-home-cat:hover .hc-home-cat-name{color:var(--brand-ink,var(--brand))}
.hc-cats-minimal .hc-home-cat-ico{width:52px;height:52px;font-size:26px;border-radius:14px;background:rgba(var(--br),.10)}
.hc-cats-minimal .hc-home-cat-letter{width:52px;height:52px;font-size:22px}
.hc-cats-minimal .hc-home-cat-count{display:none}
.hc-cats-minimal .hc-home-cat-num{display:block;margin-left:auto;font-size:13px;font-weight:700;color:var(--text-muted)}
.hc-cats-minimal .hc-home-cat-arrow{display:block;color:var(--text-muted);font-size:18px;transition:transform .2s var(--ease)}
.hc-cats-minimal .hc-home-cat:hover .hc-home-cat-arrow{transform:translateX(4px);color:var(--brand-ink,var(--brand))}
/* 4. GLOW — premium gradient-border glow */
.hc-cats-glow .hc-home-cat{align-items:center;text-align:center;padding:34px 26px;border-radius:24px;background:var(--card-bg);border:1.5px solid var(--card-border);box-shadow:0 12px 34px rgba(15,23,42,.06);overflow:hidden;isolation:isolate}
.hc-cats-glow .hc-home-cat:before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.6px;background:linear-gradient(135deg,var(--brand),#06b6d4,#ec4899);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s;pointer-events:none}
.hc-cats-glow .hc-home-cat:after{content:'';position:absolute;top:-46%;left:50%;transform:translateX(-50%);width:72%;height:130px;background:radial-gradient(circle,rgba(var(--br),.4),transparent 70%);filter:blur(30px);opacity:0;transition:opacity .35s;pointer-events:none;z-index:-1}
.hc-cats-glow .hc-home-cat:hover{transform:translateY(-10px);box-shadow:0 34px 80px rgba(15,23,42,.16)}
.hc-cats-glow .hc-home-cat:hover:before,.hc-cats-glow .hc-home-cat:hover:after{opacity:1}
.hc-cats-glow .hc-home-cat-ico{background:linear-gradient(145deg,var(--brand),color-mix(in srgb,var(--brand) 55%,#06b6d4));color:#fff}
.hc-cats-glow .hc-home-cat-body{align-items:center}.hc-cats-glow .hc-home-cat-count{align-self:center}
/* 5. LIST — horizontal rows, arrow right */
.hc-cats-list{grid-template-columns:1fr;gap:10px}
.hc-cats-list .hc-home-cat{flex-direction:row;align-items:center;gap:18px;padding:18px 22px;border-radius:16px;background:var(--card-bg);border:1px solid var(--card-border);box-shadow:0 4px 14px rgba(15,23,42,.04)}
.hc-cats-list .hc-home-cat:hover{transform:translateX(4px);border-color:rgba(var(--br),.4);box-shadow:0 14px 36px rgba(15,23,42,.10)}
.hc-cats-list .hc-home-cat-ico,.hc-cats-list .hc-home-cat-letter{width:56px;height:56px;font-size:26px;border-radius:16px}
.hc-cats-list .hc-home-cat-body{flex:1}.hc-cats-list .hc-home-cat-count{display:none}
.hc-cats-list .hc-home-cat-num{display:block;font-size:13px;font-weight:700;color:var(--text-muted);white-space:nowrap}
.hc-cats-list .hc-home-cat-arrow{display:block;color:var(--text-muted);font-size:20px;transition:transform .2s var(--ease)}
.hc-cats-list .hc-home-cat:hover .hc-home-cat-arrow{transform:translateX(5px);color:var(--brand-ink,var(--brand))}
/* 6. BARE — no card, big centred icon (Miro-style). Icon dominates; title +
 * description sit below; nothing but the tile floats on the page background. */
.hc-cats-bare{gap:40px 30px}
.hc-cats-bare .hc-home-cat{flex-direction:column;align-items:center;text-align:center;gap:0;padding:22px 16px;background:transparent!important;border:0!important;box-shadow:none!important;border-radius:22px;transition:transform .28s var(--ease)}
.hc-cats-bare .hc-home-cat:hover{transform:translateY(-8px)}
.hc-cats-bare .hc-home-cat-ico{width:118px;height:118px;font-size:60px;border-radius:30px;background:linear-gradient(150deg,rgba(var(--br),.15),rgba(var(--br),.04));box-shadow:0 14px 34px rgba(var(--br),.14);transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
.hc-cats-bare .hc-home-cat:hover .hc-home-cat-ico{transform:scale(1.05);box-shadow:0 26px 56px rgba(var(--br),.26)}
.hc-cats-bare .hc-home-cat-letter{width:118px;height:118px;font-size:50px;border-radius:30px}
.hc-cats-bare .hc-home-cat-ico.hc-ico-has-img{background:transparent!important;box-shadow:none!important;width:auto;height:124px;border-radius:0}
.hc-cats-bare .hc-home-cat:hover .hc-home-cat-ico.hc-ico-has-img{transform:translateY(-2px) scale(1.05);box-shadow:none!important}
.hc-cats-bare .hc-home-cat-ico.hc-ico-has-img .hc-ico-img{width:auto;height:124px;max-width:190px}
.hc-cats-bare .hc-home-cat-body{align-items:center;gap:7px;margin-top:20px}
.hc-cats-bare .hc-home-cat-name{font-size:20px;font-weight:800}
.hc-cats-bare .hc-home-cat-desc{display:block;font-size:14.5px;line-height:1.55;color:var(--text-muted);max-width:30ch}
.hc-cats-bare .hc-home-cat-count{display:block;align-self:center;font-size:13px;color:var(--text-muted)}
.hc-cats-bare .hc-home-cat-num,.hc-cats-bare .hc-home-cat-arrow{display:none}
/* 7. PLAIN — same as BARE but the icon has NO chip/background at all: the raw
 * emoji, SVG, image or webfont icon sits directly on the page, extra large. */
.hc-cats-plain{gap:40px 30px}
.hc-cats-plain .hc-home-cat{flex-direction:column;align-items:center;text-align:center;gap:0;padding:22px 16px;background:transparent!important;border:0!important;box-shadow:none!important;border-radius:22px;transition:transform .28s var(--ease)}
.hc-cats-plain .hc-home-cat:hover{transform:translateY(-8px)}
.hc-cats-plain .hc-home-cat-ico{width:auto;height:auto;min-width:0;font-size:78px;line-height:1;border-radius:0!important;background:none!important;box-shadow:none!important;padding:0!important;overflow:visible}
.hc-cats-plain .hc-home-cat:hover .hc-home-cat-ico{transform:scale(1.06)}
.hc-cats-plain .hc-home-cat-letter{width:auto;height:auto;font-size:66px;border-radius:0!important;background:none!important;box-shadow:none!important;color:var(--brand-ink,var(--brand))}
.hc-cats-plain .hc-home-cat-ico>svg{width:82px;height:82px}
.hc-cats-plain .hc-home-cat-ico>i{font-size:78px}
.hc-cats-plain .hc-home-cat-ico.hc-ico-has-img{width:auto;height:118px;border-radius:0}
.hc-cats-plain .hc-home-cat-ico.hc-ico-has-img .hc-ico-img{width:auto;height:118px;max-width:190px;padding:0!important}
.hc-cats-plain .hc-home-cat-body{align-items:center;gap:7px;margin-top:18px}
.hc-cats-plain .hc-home-cat-name{font-size:20px;font-weight:800}
.hc-cats-plain .hc-home-cat-desc{display:block;font-size:14.5px;line-height:1.55;color:var(--text-muted);max-width:30ch}
.hc-cats-plain .hc-home-cat-count{display:block;align-self:center;font-size:13px;color:var(--text-muted)}
.hc-cats-plain .hc-home-cat-num,.hc-cats-plain .hc-home-cat-arrow{display:none}
/* 8. DETAIL — horizontal card: icon tile left, name + description right. Shows the
 * category's real icon when it has one, otherwise a clean letter badge. */
.hc-cats-detail{gap:16px}
.hc-cats-detail .hc-home-cat{flex-direction:row;align-items:flex-start;gap:18px;padding:22px 24px;border-radius:20px;background:var(--card-bg);border:1px solid var(--card-border);box-shadow:0 8px 24px rgba(15,23,42,.05)}
.hc-cats-detail .hc-home-cat:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(15,23,42,.13);border-color:rgba(var(--br),.35)}
.hc-cats-detail .hc-home-cat-ico{display:none;width:60px;height:60px;font-size:28px;border-radius:16px;flex:0 0 auto}
.hc-cats-detail .hc-home-cat.hc-cat-has-icon .hc-home-cat-ico{display:grid}
.hc-cats-detail .hc-home-cat-letter{display:grid;width:60px;height:60px;font-size:26px;border-radius:16px;flex:0 0 auto}
.hc-cats-detail .hc-home-cat.hc-cat-has-icon .hc-home-cat-letter{display:none}
.hc-cats-detail .hc-home-cat-body{flex:1;min-width:0;gap:6px;padding-top:2px}
.hc-cats-detail .hc-home-cat-name{font-size:18.5px}
.hc-cats-detail .hc-home-cat-desc{display:block;font-size:14px;line-height:1.55;color:var(--text-muted)}
.hc-cats-detail .hc-home-cat-count{display:inline-flex;align-self:flex-start;margin-top:4px}
.hc-cats-detail .hc-home-cat-num,.hc-cats-detail .hc-home-cat-arrow{display:none}
.hc-home-cats-noicon.hc-cats-detail .hc-home-cat{padding-left:24px}
/* PHASE_HC_CAT_TINT — themed tiles inherit the SAME surface background as the
 * article cards, applied by adding `.hc-cats-tint-theme .hc-home-cat` to the
 * surface-style selector groups (the same ones that style .hc-pop-item / .hc-arow),
 * so it tracks every theme + Color Studio edit with no hardcoded colour. The theme
 * option intentionally touches ONLY the card surface — the icon chip keeps whatever
 * the Icon style / tile choice gives it (so "no tile" stays transparent). */
/* Category icon colour = theme (opt-in, home_category_icon_tint). Tints the chip with
 * the brand colour. NO !important, and explicitly stood down for the "No tile" icon
 * style + the chip-less tile styles, so a transparent-icon choice always wins. */
.hc-cats-icotint-theme .hc-home-cat-ico,.hc-cats-icotint-theme .hc-home-cat-letter{background:rgba(var(--br),.14);color:var(--brand-ink,var(--brand))}
.hc-ico-bare .hc-cats-icotint-theme .hc-home-cat-ico,.hc-ico-bare .hc-cats-icotint-theme .hc-home-cat-letter,
.hc-cats-icotint-theme.hc-cats-plain .hc-home-cat-ico,.hc-cats-icotint-theme.hc-cats-plain .hc-home-cat-letter{background:none!important;box-shadow:none!important}
/* ── Flexible icon media (image / inline SVG / webfont) inside any icon chip ── */
.hc-ico-img{display:block;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain}
.hc-home-cat-ico .hc-ico-img,.hc-cat-ico .hc-ico-img,.hc-subhero-icon .hc-ico-img,.hc-kb-cat-icon .hc-ico-img,.hc-cat-pg-ico .hc-ico-img{padding:14%}
.hc-home-cat-ico>svg,.hc-cat-ico>svg,.hc-subhero-icon>svg,.hc-kb-cat-icon>svg,.hc-cat-pg-ico>svg{width:56%;height:56%;display:block}
/* PHASE_HC_ICON_SIZE — font-icon glyphs (Font Awesome etc.) were pinned to .5em,
 * i.e. HALF the size of an emoji, which renders at the container's full 1em — so
 * a PayPal/PHP/Node brand glyph looked tiny beside a 📁 or 🩺. An FA glyph also
 * only paints ~.8 of its em box (an emoji fills it), so match the two by sizing
 * the glyph slightly ABOVE 1em. Uses em, so it scales with every icon container
 * (home tiles, cards, sidebar, sub-hero) automatically. */
.hc-home-cat-ico>i,.hc-cat-ico>i,.hc-subhero-icon>i,.hc-kb-cat-icon>i,.hc-cat-pg-ico>i{font-size:1.15em;line-height:1;display:block}

/* PHASE_HC_ICON_STUDIO — icon style presets (Colours → Category icons → Icon style).
 * Plain monochrome glyphs on a flat tint read as unfinished, so the tile itself is
 * now styleable. Everything derives from the brand colour (--brand / --br), so a
 * preset re-skins the whole icon set instantly. A colour picked in the Studio is
 * emitted later with !important, so it always overrides the preset. */
.hc-ico-solid .hc-home-cat-ico,.hc-ico-solid .hc-cat-ico,.hc-ico-solid .hc-cat-pg-ico,.hc-ico-solid .hc-subhero-icon{background:var(--brand);box-shadow:0 10px 26px rgba(var(--br),.32)}
.hc-ico-solid .hc-home-cat-ico>i,.hc-ico-solid .hc-cat-ico>i,.hc-ico-solid .hc-cat-pg-ico>i,.hc-ico-solid .hc-subhero-icon>i{color:#fff}

.hc-ico-gradient .hc-home-cat-ico,.hc-ico-gradient .hc-cat-ico,.hc-ico-gradient .hc-cat-pg-ico,.hc-ico-gradient .hc-subhero-icon{background:linear-gradient(145deg,var(--brand),rgba(var(--br),.55));box-shadow:0 12px 30px rgba(var(--br),.30)}
.hc-ico-gradient .hc-home-cat-ico>i,.hc-ico-gradient .hc-cat-ico>i,.hc-ico-gradient .hc-cat-pg-ico>i,.hc-ico-gradient .hc-subhero-icon>i{color:#fff}

.hc-ico-outline .hc-home-cat-ico,.hc-ico-outline .hc-cat-ico,.hc-ico-outline .hc-cat-pg-ico,.hc-ico-outline .hc-subhero-icon{background:transparent;border:2px solid rgba(var(--br),.38);box-shadow:none}
.hc-ico-outline .hc-home-cat-ico>i,.hc-ico-outline .hc-cat-ico>i,.hc-ico-outline .hc-cat-pg-ico>i,.hc-ico-outline .hc-subhero-icon>i{color:var(--brand-ink,var(--brand))}

.hc-ico-glass .hc-home-cat-ico,.hc-ico-glass .hc-cat-ico,.hc-ico-glass .hc-cat-pg-ico,.hc-ico-glass .hc-subhero-icon{background:rgba(var(--br),.10);border:1px solid rgba(255,255,255,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(var(--br),.20),inset 0 1px 0 rgba(255,255,255,.55)}
.hc-ico-glass .hc-home-cat-ico>i,.hc-ico-glass .hc-cat-ico>i,.hc-ico-glass .hc-cat-pg-ico>i,.hc-ico-glass .hc-subhero-icon>i{color:var(--brand-ink,var(--brand))}

.hc-ico-bare .hc-home-cat-ico,.hc-ico-bare .hc-cat-ico,.hc-ico-bare .hc-cat-pg-ico,.hc-ico-bare .hc-subhero-icon{background:none;border:0;box-shadow:none}
.hc-ico-bare .hc-home-cat-ico>i,.hc-ico-bare .hc-cat-ico>i,.hc-ico-bare .hc-cat-pg-ico>i,.hc-ico-bare .hc-subhero-icon>i{color:var(--brand-ink,var(--brand));font-size:1.45em}
.hc-home-cat-ico.hc-ico-has-img,.hc-cat-ico.hc-ico-has-img,.hc-subhero-icon.hc-ico-has-img,.hc-cat-pg-ico.hc-ico-has-img{background:transparent!important;border-color:transparent!important;overflow:hidden}
.hc-chip-ico .hc-ico-img{display:inline-block;width:1.1em;height:1.1em;vertical-align:-0.2em}
.hc-chip-ico>svg{width:1em;height:1em;vertical-align:-0.15em}
@media(max-width:560px){.hc-home-cats:not(.hc-cats-list){grid-template-columns:1fr}
  .hc-cats-bare .hc-home-cat-ico,.hc-cats-bare .hc-home-cat-letter{width:96px;height:96px;font-size:48px}
  .hc-cats-bare .hc-home-cat-ico.hc-ico-has-img,.hc-cats-bare .hc-home-cat-ico.hc-ico-has-img .hc-ico-img{height:100px}
  .hc-cats-plain .hc-home-cat-ico,.hc-cats-plain .hc-home-cat-ico>i{font-size:62px}
  .hc-cats-plain .hc-home-cat-letter{font-size:54px}
  .hc-cats-plain .hc-home-cat-ico>svg{width:66px;height:66px}
  .hc-cats-plain .hc-home-cat-ico.hc-ico-has-img,.hc-cats-plain .hc-home-cat-ico.hc-ico-has-img .hc-ico-img{height:98px}}
@media(max-width:560px){#hc-page .hc-pop-list.hc-cards-boxed,#hc-page .hc-pop-list.hc-cards-media{grid-template-columns:1fr!important}}
.hc-pop-item{display:flex;align-items:center;gap:14px;
  background:var(--card-bg);border:1.5px solid var(--card-border);
  border-radius:13px;padding:15px 20px;transition:all .18s var(--ease);
  color:inherit;text-decoration:none}