/* Blog hub, "conditions" layout (template-blog-hub.php with hc_hub_layout = conditions, e.g. /blog/skin-conditions/).
   File: assets/css/blog-hub-conditions.css

   Ported from the approved draft 1 prototype (client root seo/blog-hub-design/prototype-template.html, Bilal
   2026-10-26): classes prefixed hcc- and scoped to main.hcc so they never meet site CSS, prototype variables mapped
   onto tokens.css (condition tones = --tone-*). The block at the end holds the production fixes (sticky bar under the
   site header, 44 px tap targets, 14 px text floor on phones). Loaded only on hubs using this layout. */

.hcc *,.hcc *::before,.hcc *::after{box-sizing:border-box}
.hcc [hidden]{display:none!important}
.hcc{background:var(--card);color:var(--body);font-family:var(--font-body),sans-serif;font-size:16px;line-height:1.6}
:where(.hcc) a{color:var(--teal);text-decoration:none}
:where(.hcc) a:hover{color:var(--teal-deep);text-decoration:underline}
:where(.hcc) :focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:4px}
:where(.hcc) :where(h1,h2,h3,h4){font-family:var(--font-display);color:var(--ink);font-weight:600;text-wrap:balance;margin:0}
:where(.hcc) p{margin:0}
.hcc-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hcc-wrap{max-width:var(--maxw);margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
@media (max-width:640px){.hcc-wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}}

.hcc-tone-butter{--tone:var(--tone-butter);--tone-ink:var(--tone-butter-ink)}
.hcc-tone-blush{--tone:var(--tone-blush);--tone-ink:var(--tone-blush-ink)}
.hcc-tone-sky{--tone:var(--tone-sky);--tone-ink:var(--tone-sky-ink)}
.hcc-tone-mint{--tone:var(--tone-mint);--tone-ink:var(--tone-mint-ink)}

/* Hero */
.hcc-hero{background:linear-gradient(180deg,var(--card-2),var(--card));padding-block:20px 44px}
.hcc-crumbs{font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px;margin-bottom:28px}
.hcc-crumbs a{color:var(--muted)}
.hcc-crumbs span[aria-current]{color:var(--ink);font-weight:500}
.hcc-hero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:start}
.hcc-eyebrow{font-family:var(--font-body);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:14px}
.hcc-hero h1{font-size:clamp(32px,4.4vw,52px);line-height:1.08;letter-spacing:-.03em;margin-bottom:18px}
.hcc-lede{font-size:18px;line-height:1.65;color:var(--body);max-width:60ch;margin-bottom:16px}
.hcc-uplink{font-size:15.5px;max-width:60ch;margin-bottom:26px}
.hcc-uplink a{font-weight:600}
.hcc-byline{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);max-width:480px}
.hcc-avatar{flex:none;width:46px;height:46px;border-radius:50%;background:var(--teal-ink);color:var(--card);display:grid;place-items:center;font-family:var(--font-display);font-weight:600;font-size:16px}
.hcc-byline__name{font-weight:600;color:var(--ink);font-size:15px}
.hcc-byline__name a{color:var(--ink)}
.hcc-byline__role{font-size:13.5px;color:var(--muted)}
.hcc-facts{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:18px;font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.hcc-facts strong{color:var(--ink);font-weight:600}

.hcc-map__label{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:12px}
.hcc-map{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hcc-tile__link{display:flex;flex-direction:column;gap:6px;height:100%;padding:20px 20px 22px;border-radius:var(--radius-lg);background:var(--tone);color:var(--ink);transition:transform .18s ease,box-shadow .18s ease}
.hcc-tile__link:hover{text-decoration:none;color:var(--ink);transform:translateY(-2px);box-shadow:var(--shadow)}
.hcc-tile__count{font-family:var(--font-display);font-weight:600;font-size:34px;line-height:1;color:var(--tone-ink);font-variant-numeric:tabular-nums}
.hcc-tile__name{font-family:var(--font-display);font-weight:600;font-size:17px;line-height:1.3;margin-top:6px}
.hcc-tile__blurb{font-size:13.5px;line-height:1.5;color:var(--body)}
.hcc-map li,.hcc-hero__grid > div{min-width:0}
@media (max-width:1000px){.hcc-hero__grid{grid-template-columns:1fr;gap:32px}.hcc-hero{padding-block:16px 32px}}
@media (max-width:560px){
  .hcc-hero h1{font-size:32px}
  .hcc-lede{font-size:16.5px}
  .hcc-crumbs{margin-bottom:18px}
  .hcc-map{gap:10px}
  .hcc-tile__link{padding:14px 14px 16px;gap:2px}
  .hcc-tile__count{font-size:26px}
  .hcc-tile__name{font-size:15px;margin-top:4px}
  .hcc-tile__blurb{display:none}
}

/* Finder bar */
.hcc-finder{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-block:1px solid var(--line)}
.hcc-finder .hcc-wrap{display:flex;align-items:center;gap:14px;padding-block:12px}
.hcc-search{position:relative;flex:0 1 340px;min-width:0}
.hcc-search svg{position:absolute;inset-inline-start:14px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.hcc-search input{width:100%;height:44px;padding-block:0;padding-inline:42px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card);color:var(--ink);font:500 15px var(--font-body)}
.hcc-search input::placeholder{color:var(--muted)}
.hcc-search input:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:transparent}
.hcc-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;padding-block:2px}
.hcc-chips::-webkit-scrollbar{display:none}
.hcc-chip{flex:none;height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:600 14px var(--font-body);cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:background .15s ease,border-color .15s ease}
.hcc-chip span{font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.hcc-chip:hover{border-color:var(--teal)}
.hcc-chip[aria-pressed="true"]{background:var(--teal-ink);border-color:var(--teal-ink);color:var(--card)}
.hcc-chip[aria-pressed="true"] span{color:color-mix(in srgb,var(--card) 75%,transparent)}
.hcc-chip.hcc-tone-butter[aria-pressed="true"],.hcc-chip.hcc-tone-blush[aria-pressed="true"],.hcc-chip.hcc-tone-sky[aria-pressed="true"],.hcc-chip.hcc-tone-mint[aria-pressed="true"]{background:var(--tone);border-color:var(--tone-ink);color:var(--ink)}
.hcc-chip[class*="tone-"][aria-pressed="true"] span{color:var(--tone-ink)}
.hcc-count{flex:none;font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:860px){
  .hcc-finder .hcc-wrap{flex-wrap:wrap;gap:10px}
  .hcc-search{flex:1 1 100%}
  .hcc-count{display:none}
}

/* Start here */
.hcc-start{padding-block:48px 8px}
.hcc-sec-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:22px}
.hcc-sec-head h2{font-size:clamp(23px,2.4vw,29px);letter-spacing:-.02em}
.hcc-sec-head p{color:var(--muted);font-size:14.5px}
.hcc-picks{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:20px}
.hcc-pick{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:box-shadow .18s ease,transform .18s ease}
.hcc-pick:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.hcc-pick:focus-within{outline:2px solid var(--teal);outline-offset:2px}
.hcc-pick__media{aspect-ratio:16/9;background:var(--card-2);overflow:hidden}
.hcc-pick__img{display:block;width:100%;height:100%;object-fit:cover}
.hcc-pick__body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:8px}
.hcc-pick__cond{align-self:start;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tone-ink);background:var(--tone);padding:3px 9px;border-radius:999px}
.hcc-pick__title{font-size:17px;line-height:1.35}
.hcc-pick--lead .hcc-pick__title{font-size:21px}
.hcc-pick__title a{color:var(--ink)}
.hcc-pick__title a:hover{text-decoration:none;color:var(--teal-deep)}
.hcc-pick__title a::after{content:"";position:absolute;inset:0}
.hcc-pick__sum{font-size:14px;color:var(--body);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hcc-pick:not(.hcc-pick--lead) .hcc-pick__sum{-webkit-line-clamp:2}
@media (max-width:1000px){.hcc-picks{grid-template-columns:1fr 1fr}.hcc-pick--lead{grid-column:span 2}}
@media (max-width:560px){
  .hcc-picks{grid-template-columns:1fr;gap:12px}.hcc-pick--lead{grid-column:auto}
  .hcc-pick:not(.hcc-pick--lead){flex-direction:row}
  .hcc-pick:not(.hcc-pick--lead) .hcc-pick__media{flex:0 0 112px;aspect-ratio:1/1}
  .hcc-pick:not(.hcc-pick--lead) .hcc-pick__img{object-position:88% 50%}
  .hcc-pick:not(.hcc-pick--lead) .hcc-pick__body{padding:12px 14px}
  .hcc-pick:not(.hcc-pick--lead) .hcc-pick__sum{display:none}
  .hcc-pick:not(.hcc-pick--lead) .hcc-pick__title{font-size:15.5px}
}

/* Condition sections */
.hcc-conds{padding-block:24px 24px}
.hcc-cond{display:grid;grid-template-columns:300px minmax(0,1fr);gap:44px;padding-block:52px;border-top:1px solid var(--line);scroll-margin-top:84px}
.hcc-cond:first-child{border-top:0}
.hcc-rail__in{position:sticky;top:92px;display:flex;flex-direction:column;gap:12px}
.hcc-rail__count{align-self:start;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tone-ink);background:var(--tone);padding:4px 10px;border-radius:999px;font-variant-numeric:tabular-nums}
.hcc-rail__h{font-size:clamp(26px,2.6vw,32px);line-height:1.15;letter-spacing:-.02em}
.hcc-rail__blurb{font-size:15px;color:var(--body)}
.hcc-rail__guides{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.hcc-guide{display:inline-flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-radius:var(--radius-sm);background:var(--teal-ink);color:var(--card);font-weight:600;font-size:14.5px;transition:background .15s ease}
.hcc-guide:hover{background:var(--teal-deep);color:var(--card);text-decoration:none}
.hcc-guide--2{background:transparent;color:var(--ink);border:1px solid var(--line)}
.hcc-guide--2:hover{background:var(--card-2);color:var(--ink)}
.hcc-rail__jumps{list-style:none;margin:8px 0 0;padding:12px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.hcc-rail__jumps a{display:flex;justify-content:space-between;gap:10px;padding:7px 10px;margin-inline:-10px;border-radius:8px;color:var(--ink);font-size:14.5px;font-weight:500}
.hcc-rail__jumps a:hover{background:var(--tone);text-decoration:none}
.hcc-rail__jumps span{color:var(--muted);font-variant-numeric:tabular-nums}
.hcc-cond__main{display:flex;flex-direction:column;gap:44px;min-width:0}
.hcc-topic{scroll-margin-top:84px}
.hcc-topic__h{font-size:20px;line-height:1.3;margin-bottom:18px;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px}
.hcc-topic__n{font-family:var(--font-body);font-size:13.5px;font-weight:500;color:var(--muted)}
.hcc-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.hcc-card{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:box-shadow .18s ease,border-color .18s ease}
.hcc-card:hover{box-shadow:var(--shadow);border-color:transparent}
.hcc-card:focus-within{outline:2px solid var(--teal);outline-offset:2px}
.hcc-card__media{aspect-ratio:16/9;background:var(--card-2);overflow:hidden}
.hcc-card__img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.hcc-card:hover .hcc-card__img{transform:scale(1.03)}
.hcc-card__body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:7px;flex:1}
.hcc-card__title{font-size:16px;line-height:1.38;font-weight:600}
.hcc-card__title a{color:var(--ink)}
.hcc-card__title a:hover{text-decoration:none;color:var(--teal-deep)}
.hcc-card__title a::after{content:"";position:absolute;inset:0}
.hcc-card__sum{font-size:13.5px;line-height:1.55;color:var(--body);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hcc-card__meta{margin-top:auto;padding-top:4px;font-size:12.5px;color:var(--muted)}
.hcc-topic:not(.hcc-open) .hcc-card.hcc-is-extra{display:none}
.hcc-more{margin-top:16px;height:44px;padding:0 18px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--card);color:var(--ink);font:600 14.5px var(--font-body);cursor:pointer}
.hcc-more:hover{border-color:var(--teal);color:var(--teal-deep)}
@media (max-width:1180px){.hcc-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1000px){
  .hcc-cond{grid-template-columns:1fr;gap:24px;padding-block:40px}
  .hcc-rail__in{position:static}
  .hcc-rail__guides{flex-direction:row;flex-wrap:wrap}
  .hcc-rail__jumps{flex-direction:row;flex-wrap:wrap;gap:8px;border-top:0;padding-top:0}
  .hcc-rail__jumps a{margin:0;border:1px solid var(--line);border-radius:999px;padding:6px 12px;gap:8px;font-size:14px}
}
@media (max-width:560px){
  .hcc-cards{grid-template-columns:1fr;gap:12px}
  .hcc-card{flex-direction:row}
  .hcc-card__media{flex:0 0 108px;aspect-ratio:auto;min-height:108px}
  .hcc-card__img{object-position:88% 50%}
  .hcc-card__body{padding:12px 14px}
  .hcc-card__title{font-size:15px}
  .hcc-card__sum{-webkit-line-clamp:2;font-size:13px}
  .hcc-guide{flex:1 1 100%}
}

/* Comparisons */
.hcc-vs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.hcc-vs{position:relative;display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:center;padding:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);transition:box-shadow .18s ease,border-color .18s ease}
.hcc-vs:hover{box-shadow:var(--shadow);border-color:transparent}
.hcc-vs:focus-within{outline:2px solid var(--teal);outline-offset:2px}
.hcc-vs__media{aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:var(--card-2)}
.hcc-vs__img{display:block;width:100%;height:100%;object-fit:cover;object-position:88% 50%}
.hcc-vs__body{display:flex;flex-direction:column;gap:4px;min-width:0}
.hcc-vs__title{font-size:17px;line-height:1.3}
.hcc-vs__link{color:var(--ink)}
.hcc-vs__link:hover{text-decoration:none}
.hcc-vs__link::after{content:"";position:absolute;inset:0}
.hcc-vs__pair{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
.hcc-vs__x{font-family:var(--font-body);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tone-ink);background:var(--tone);padding:2px 7px;border-radius:999px;transform:translateY(-2px)}
.hcc-vs__sub{font-size:13.5px;font-weight:600;color:var(--muted)}
.hcc-vs__sum{font-size:13.5px;line-height:1.5;color:var(--body);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:1180px){.hcc-vs-grid{grid-template-columns:1fr}}
@media (max-width:560px){.hcc-vs{grid-template-columns:84px minmax(0,1fr);gap:12px;padding:10px}.hcc-vs__sum{display:none}.hcc-vs__title{font-size:15.5px}}

/* Empty state */
.hcc-empty{padding:28px;border:1px dashed var(--line);border-radius:var(--radius);text-align:center;color:var(--body);margin-block:32px}
.hcc-empty strong{color:var(--ink)}

/* Closing */
.hcc-closing{padding-block:28px 64px}
.hcc-closing__grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px}
.hcc-panel{padding:28px;border-radius:var(--radius-lg);background:var(--card-2)}
.hcc-panel--navy{background:var(--teal-ink);color:var(--card-2)}
.hcc-panel--navy h2{color:var(--card)}
.hcc-panel h2{font-size:22px;margin-bottom:10px}
.hcc-panel p{font-size:15px;margin-bottom:14px}
.hcc-panel--navy a{color:var(--card);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.hcc-guides-list{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hcc-guides-list a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 16px;background:var(--card);border-radius:var(--radius-sm);color:var(--ink);font-weight:600;font-size:15px;border:1px solid var(--line)}
.hcc-guides-list a:hover{border-color:var(--teal);text-decoration:none}
.hcc-guides-list .hcc-all{grid-column:span 2;background:var(--teal-ink);color:var(--card);border-color:var(--teal-ink)}
.hcc-doctor{display:flex;gap:12px;align-items:flex-start;margin-top:6px;padding:14px 16px;border-radius:var(--radius-sm);background:color-mix(in srgb,var(--card) 8%,transparent);font-size:14.5px}
.hcc-doctor svg{flex:none;margin-top:2px}
@media (max-width:860px){.hcc-closing__grid{grid-template-columns:1fr}}
@media (max-width:420px){.hcc-guides-list{grid-template-columns:1fr}.hcc-guides-list .hcc-all{grid-column:auto}}

@media (prefers-reduced-motion:reduce){.hcc *,.hcc *::before,.hcc *::after{transition:none!important}}


/* ---- Production fixes (site rules, look unchanged) ----
   --hcc-head = the sticky site header's height and --hcc-pin = header + finder bar, both measured by
   blog-hub-conditions.js; the fallbacks are the phone values. */
.hcc-finder{top:var(--hcc-head,67px)}
.hcc-cond,.hcc-topic{scroll-margin-top:calc(var(--hcc-pin,191px) + 12px)}
.hcc-rail__in{top:calc(var(--hcc-pin,191px) + 16px)}
.hcc-chip{height:44px}
.hcc-crumbs{gap:0 6px}
.hcc-crumbs a,.hcc-crumbs span{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:1000px){.hcc-rail__jumps a{min-height:44px;align-items:center}}
@media (max-width:560px){
  .hcc-crumbs,.hcc-facts,.hcc-byline__role,.hcc-card__sum,.hcc-vs__sub,.hcc-tile__blurb,.hcc-topic__n{font-size:14px}
  .hcc-eyebrow,.hcc-rail__count,.hcc-pick__cond,.hcc-card__meta,.hcc-vs__x{font-size:13px}
}
/* The finder's search and chips need the script: hidden until it adds .hcc-js (every article is linked either way). */
.hcc:not(.hcc-js) .hcc-finder{display:none}
.hcc-avatar{object-fit:cover}
.hcc-intro{margin-bottom:26px}
.hcc-intro .hcc-uplink{margin-bottom:0}
.hcc-doctor{position:relative;padding-inline-start:46px}
.hcc-doctor::before{content:"!";position:absolute;inset-inline-start:16px;top:15px;width:20px;height:20px;border:2px solid currentColor;border-radius:50%;display:grid;place-items:center;font:700 12px/1 var(--font-body)}
.hcc-doctor p{margin:0}
/* Section heading and its caption stack on phones (side by side they wrapped as "Start / here"). */
@media (max-width:560px){.hcc-sec-head{flex-direction:column;align-items:start;gap:4px}}

/* ---- Link states ----
   The parent style.css sets a:visited purple and a:hover/a:focus/a:active midnight blue (specificity 0,1,1), which beat
   the single-class link rules above (a visited guide button went purple on navy, 1.2:1). Every link here is pinned for
   :link/:visited/:focus/:active to its designed colour; hover keeps the designed change. .hcc raises specificity. */
.hcc a:is(:link,:visited,:focus,:active){color:var(--teal)}
.hcc a:hover{color:var(--teal-deep)}
.hcc .hcc-crumbs a:is(:link,:visited,:hover,:focus,:active){color:var(--muted)}
.hcc .hcc-byline__name a:is(:link,:visited,:hover,:focus,:active),
.hcc .hcc-tile__link:is(:link,:visited,:hover,:focus,:active),
.hcc .hcc-rail__jumps a:is(:link,:visited,:hover,:focus,:active),
.hcc .hcc-guides-list a:is(:link,:visited,:hover,:focus,:active),
.hcc .hcc-pick__title a:is(:link,:visited,:focus,:active),
.hcc .hcc-card__title a:is(:link,:visited,:focus,:active),
.hcc .hcc-vs__link:is(:link,:visited,:focus,:active){color:var(--ink)}
.hcc .hcc-pick__title a:hover,.hcc .hcc-card__title a:hover,.hcc .hcc-vs__link:hover{color:var(--teal-deep)}
.hcc .hcc-guide:is(:link,:visited,:hover,:focus,:active){color:var(--card)}
.hcc .hcc-guide--2:is(:link,:visited,:hover,:focus,:active){color:var(--ink)}
.hcc .hcc-guides-list .hcc-all:is(:link,:visited,:hover,:focus,:active),
.hcc .hcc-panel--navy a:is(:link,:visited,:hover,:focus,:active){color:var(--card)}
.hcc .hcc-guides-list .hcc-all:hover{background:var(--teal-deep);border-color:var(--teal-deep)}
.hcc .hcc-panel--navy a:hover{text-decoration-thickness:2px}
/* Arabic (RTL) hubs: the guide arrows point the reading way. */
[dir="rtl"] .hcc-guide span{display:inline-block;transform:scaleX(-1)}