/* =======================================================
   13Cure Universal Theme - Single File v1.2
   Bootstrap 5.3+ companion. Load after bootstrap.css.
   ======================================================= */

/* Root tokens - brand + system */
:root{
  /* brand */
  --clr-primary:#2088ca;      /* primary */
  --clr-primary-600:#1b76b1;   /* darken 12 to 15% */
  --clr-primary-500:#2a93d4;   /* lighten ~5% */
  --clr-primary-300:#81cbfd;   /* accent blue for gradients */
  --clr-primary-bg:#f3fbfe;
  --clr-secondary:#ff8b8e;      /* secondary */
  --clr-accent:#ffb8ba;        /* soft accent */
  --muted:#f7fbff;
  --bs-primary:var(--clr-primary);
  --bs-secondary:var(--clr-secondary);

  /* neutrals */
  --ink-900:#0f2742;
  --ink-800:#162f4f;
  --ink-700:#223a57;
  --ink-600:#37506c;
  --ink-500:#516884;
  --ink-400:#7d7d7d;           /* requested grey accent */
  --ink-300:#9aa7b5;
  --ink-bg-accent:#f3fbfe;

  /* borders and surfaces */
  --line:#e6eef6;
  --line-2:#dce9f6;
  --stroke:var(--line);        /* alias for stroke cards */
  --surface:#ffffff;
  --surface-soft:#f3f6f9;

  /* radii and shadows */
  --radius:16px;
  --shadow-1:0 8px 20px rgba(16,36,58,.06);
  --shadow-2:0 14px 40px rgba(16,36,58,.12);

  /* spacing */
  --space-1:.25rem;
  --space-2:.5rem;
  --space-3:.75rem;
  --space-4:1rem;
  --space-5:1.25rem;
  --space-6:1.5rem;
  --space-7:2rem;
  --space-8:2.75rem;
  --space-9:3.5rem;

  /* focus ring */
  --ring:0 0 0 3px rgba(32,136,202,.18);

  /* shared transitions */
  --transition-fast:.15s ease;
  --transition-medium:.28s ease;
  --transition-slow:.45s cubic-bezier(.22,1,.36,1);
  --transition-shadow:box-shadow var(--transition-medium);
}

/* Base */
/* Heading Font weight And size */
h1 {
  font-size: 64px;
  font-weight: 600;
  line-height: 1.2;
}
h2 {
  font-size: 36px;
  font-weight: 600;
  line-height: 1.2;
}
h3 {
  font-size: 25px;
  font-weight: 500;
  line-height: 1.2;
}
/* Tablet (≤ 992px) and Mobile (≤ 768px) */
@media (max-width: 991.98px) {
  h3 {
    font-size: 20px;
  }
}

html,body{scroll-behavior:smooth}
body{color:var(--ink-700);background:#fff}
h1,h2,h3,h4,h5,h6{color:var(--ink-900)}
a{color:var(--clr-primary)}
a:hover{color:var(--clr-primary-600)}
.section{padding-block:88px}
@media (max-width: 991.98px){.section{padding-block:64px}}
@media (max-width: 575.98px){.section{padding-block:52px}}
.bg-muted{background:var(--muted)}
.maxw-720{max-width:720px}
.maxw-1100{max-width:1140px}
.text-ink-400{color:var(--ink-400)!important}
.text-ink-600{color:var(--ink-600)!important} /* keep single definition */
.text-secondary-900{color:var(--clr-secondary)!important}
.ls-2{letter-spacing:.12em}

/* Top ribbon + navbar */
.topbar{background:var(--clr-secondary);color:#3a0c0e}
.navbar{border-bottom:1px solid #eef2f6}
.brand-badge{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:8px;background:var(--clr-primary);color:#fff;font-weight:800}
.sec-num-big{font-size:18rem;margin:-95px -65px 0 0}

/* Hero */
.hero{min-height:460px;background:linear-gradient(135deg,var(--clr-primary-300),var(--clr-primary))}
@media (max-width: 991.98px){.hero{min-height:380px}}
@media (max-width: 575.98px){.hero{min-height:320px}}
.hero .container{min-height:100%}
.hero-bg{position:absolute;inset:0;background-position:center;background-size:cover;filter:brightness(.85) saturate(.95);mix-blend-mode:multiply}
.hero-badge{position:absolute;top:24px;right:24px;width:64px;height:64px;border-radius:50%;background:#fff;box-shadow:var(--shadow-1);transition:transform var(--transition-medium)}
.hero-badge.parallax{transform:translate(var(--mx,0),var(--my,0))}

/* Buttons */
.btn-primary{
  --bs-btn-bg:var(--clr-primary);
  --bs-btn-border-color:var(--clr-primary);
  --bs-btn-hover-bg:var(--clr-primary-600);
  --bs-btn-hover-border-color:var(--clr-primary-600);
  --bs-btn-focus-shadow-rgb:32,136,202;
  border-radius:10px;
}
.btn-outline-primary{
  --bs-btn-color:var(--clr-primary);
  --bs-btn-border-color:var(--clr-primary);
  --bs-btn-hover-bg:var(--clr-primary);
  --bs-btn-hover-border-color:var(--clr-primary);
  border-radius:10px;color:var(--clr-primary);
}
.btn-soft{color:var(--clr-primary);background:rgba(32,136,202,.12);border:1px solid rgba(32,136,202,.24);border-radius:10px}
.btn-soft:hover{background:rgba(32,136,202,.18)}
.btn-secondary-soft{color:#a53b3e;background:#ffecee;border:1px solid #ffd4d7;border-radius:10px}
.border-secondary-subtle{border:1px solid var(--clr-accent)!important}

/* Cards - shadow only, no transform by default */
.card{
  border:1px solid #e9eef4;
  border-radius:var(--radius);
  box-shadow:var(--shadow-1);
  background:#fff;
  transition:var(--transition-shadow);
}
.card:hover{box-shadow:var(--shadow-2)}
.card-plain{box-shadow:none}
.card-muted{background:linear-gradient(180deg,#ffffff 0,var(--surface-soft) 100%)}

/* Icon chips */
.ic-wrap,.bi-wrap{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:#eaf4fe;color:var(--clr-primary);border:1px solid var(--line-2);font-size:18px; line-height: 1;}
.square-icon{width:56px;height:56px;border-radius:16px;background:var(--clr-primary);display:grid;place-items:center;color:#fff}

/* Badges and pills */
.badge-soft-primary{color:var(--clr-primary);background:#e9f5ff;border:1px solid #d8edff;padding:.45rem .8rem;border-radius:999px;font-weight:600}

/* Stats row */
.-mt-80{margin-top:-70px}
.stats-row{display:flex;flex-wrap:wrap}
.stats-row>[class*="col-"]{display:flex}
.stat-card{position:relative;min-width:260px;width:100%}
.stat-card .card-body{min-height:140px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px}
.stat-tab{position:absolute;top:-16px;left:22px;width:78px;height:28px;border-radius:12px;background:#fff;border:1px solid #e6eef6;box-shadow:0 6px 14px rgba(16,36,58,.06)}
.stat-value{font-weight:800;font-size:32px;color:var(--clr-primary);line-height:1}
.stat-label{color:var(--ink-400);font-weight:600;font-size:13px}
.stats-row .ic-wrap{margin:0 auto 12px}
.stat-card:hover .ic-wrap{background:linear-gradient(135deg,var(--clr-primary-300),var(--clr-primary));color:#fff}
@media (max-width: 767.98px){
  .stats-row{flex-wrap:nowrap;overflow-x:auto;gap:1rem;scroll-snap-type:x mandatory;padding-bottom:.25rem}
  .stats-row>[class*="col-"]{flex:0 0 auto;width:78%;max-width:78%;scroll-snap-align:center}
}

/* Key takeaways */
.keytake{border:1px solid var(--line);border-radius:14px;background:#fff;padding:1rem;box-shadow:0 6px 16px rgba(16,36,58,.05)}
.keytake .kt-title{display:flex;align-items:center;gap:.5rem;font-weight:800;color:var(--ink-900);margin-bottom:.5rem}
.keytake .kt-list{margin:0;padding-left:1.25rem;color:var(--ink-600)}
.keytake .kt-list li{margin:.35rem 0}
.keytake:hover{box-shadow:var(--shadow-1)}

/* Process steps */
.process-card{position:relative;background:#fff}
.process-card .card-body{position:relative;padding:13px 11px 14px;min-height:200px;overflow:hidden;border-radius:var(--radius)}
.process-card .card-body::after{content:"";position:absolute;top:-120px;right:-142px;width:220px;height:220px;background:#eef6ff;border:1px solid #e5f0fb;border-bottom-left-radius:40%}
.process-card:hover .step-num{color:var(--clr-primary-300);transition:color var(--transition-medium)}
.step-num{position:absolute;top:20px;left:18px;z-index:1;font-weight:800;font-size:44px;line-height:1;letter-spacing:.02em;color:rgba(32,136,202,.18)}
.process-content{position:relative;z-index:2}
.process-title{color:var(--ink-900);font-weight:500;margin:62px 0 8px}
.process-text{color:var(--ink-400);margin:0}

/* Comparison tables */
.table-compare{--bs-table-bg:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.table-compare thead th{background:#f0f6fb;color:var(--ink-800);font-weight:700;border-bottom:1px solid var(--line)}
.table-compare td,.table-compare th{padding:.9rem 1rem;vertical-align:middle}
.table-compare tr + tr td{border-top:1px solid var(--line)}
.table-compare .yes{color:#22a06b;font-weight:700}
.table-compare .no{color:#dc3545;font-weight:700}
.table-compare .hint{color:var(--ink-400);font-size:.925rem}
.table-striped-13cure tbody tr:nth-of-type(odd){background-color:#fbfdff}

/* Info rows and diff blocks */
.feature-card .card-body,
.diff-card .card-body,
.info-card .card-body{min-height:120px}
.value-card .card-body{min-height:160px}
.diff-ic,.info-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#eaf4fe;color:var(--clr-primary);border:1px solid var(--line-2);margin-bottom:12px;font-size:18px}

/* Accordion clean */
.accordion.clean .accordion-item{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.accordion.clean .accordion-button{font-weight:700;color:var(--ink-900);background:#fff}
.accordion.clean .accordion-button:not(.collapsed){color:var(--clr-primary);background:#f2f8fd;box-shadow:none}
.accordion.clean .accordion-body{color:var(--ink-600)}

/* Alerts note style */
.note{display:flex;gap:.75rem;padding:1rem;border:1px solid var(--line);border-radius:14px;background:#fff}
.note .disc-ic{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:rgba(220,53,69,.12);color:#dc3545}

/* CTA band */
.cta{background:linear-gradient(135deg,#2a9be0,var(--clr-primary))}
.cta .btn{border-radius:10px}

/* Footer */
.footer-mini{border-top:1px solid var(--line);background:#fbfdff}

/* Hover, focus, rings */
.hover-lift{
  will-change:transform,box-shadow;
  transition:transform var(--transition-slow), var(--transition-shadow);
}
.hover-lift:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-2);
}
.focus-ring:focus{outline:none;box-shadow:var(--ring)}
/* ========= Fix reveal + hover-lift conflict (smooth) ========= */
/* 1) Compose transforms with variables */
.card.hover-lift{
  --lift: 0px;              /* hover offset */
  --rev-y: 0px;             /* reveal translateY */
  --rev-scale: 1;           /* reveal scale */

  /* one transform that includes BOTH reveal and hover */
  transform: translate3d(0, calc(var(--rev-y) + var(--lift)), 0)
             scale(var(--rev-scale));
  will-change: transform, box-shadow;
  backface-visibility: hidden;
  transition:
    transform .45s cubic-bezier(.22,1,.36,1),
    box-shadow .45s cubic-bezier(.22,1,.36,1);
}

/* 2) Hover lift sets only the variable, not transform directly */
.card.hover-lift:hover{
  --lift: -8px;
  box-shadow: var(--shadow-2);
  z-index: 2;
}

/* 3) Run reveal as var changes instead of keyframes on these cards */
.card.hover-lift.reveal{
  /* cancel the keyframe animation so it doesn't overwrite transform */
  animation: none !important;
  opacity: 0;
  --rev-y: 18px;
  --rev-scale: .98;
  transition:
    opacity .7s cubic-bezier(.2,.7,.2,1),
    transform .7s cubic-bezier(.2,.7,.2,1);
}
.card.hover-lift.reveal.reveal-in{
  opacity: 1;
  --rev-y: 0px;
  --rev-scale: 1;
}
/* Reveal animations */
@keyframes riseFade{0%{opacity:0;transform:translateY(18px) scale(.98)}60%{opacity:1}100%{opacity:1;transform:none}}
.reveal{opacity:0;transform:translateY(18px) scale(.98);will-change:transform,opacity}
.reveal.reveal-in{animation:riseFade .7s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--delay,0s)}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.reveal.reveal-in{animation:none}}

/* Sticky helpers */
.sticky-cta{position:sticky;bottom:1rem;z-index:1030}
.sticky-toc{position:sticky;top:88px}

/* Scroll snap utilities */
.snap-x{scroll-snap-type:x mandatory}
.snap-item{scroll-snap-align:center}

/* Extra utilities */
.rounded-14{border-radius:14px}
.rounded-16{border-radius:16px}
.shadow-13cure{box-shadow:var(--shadow-1)}
/* bg-fade removed - standardize on bg-grad-soft */

/* Metrics */
.metric{display:flex;align-items:center;gap:.5rem;color:var(--ink-600)}
.metric .value{font-weight:800;color:var(--clr-primary);font-size:1.125rem}

/* Forms */
.form-control:focus{border-color:var(--clr-primary);box-shadow:0 0 0 .2rem rgba(32,136,202,.15)}
.form-check-input:focus{box-shadow:0 0 0 .2rem rgba(32,136,202,.15)}
.form-check-input:checked{background-color:var(--clr-primary);border-color:var(--clr-primary)}

/* Breadcrumb */
.breadcrumb-13cure .breadcrumb-item + .breadcrumb-item::before{content:"/";color:var(--ink-300)}
.breadcrumb-13cure .breadcrumb-item a{color:var(--clr-primary)}
.breadcrumb-13cure .breadcrumb-item.active{color:var(--ink-500)}

/* Info blocks */
.info-block{display:flex;gap:1rem;padding:1rem;border:1px solid var(--line);border-radius:14px;background:#fff}
.info-block .title{font-weight:800;color:var(--ink-900);margin-bottom:.25rem}
.info-block .desc{color:var(--ink-600);margin:0}

/* Safety grid accents */
.safety-card .badge{background:#e9f5ff;border:1px solid #d8edff;color:var(--clr-primary);font-weight:600}

/* Stepper mini */
.stepper{display:flex;gap:1rem;flex-wrap:wrap}
.stepper .step{flex:1 1 200px;border:1px solid var(--line);border-radius:14px;padding:1rem;background:#fff;position:relative}
.stepper .step .num{position:absolute;top:12px;left:12px;font-weight:800;color:rgba(32,136,202,.25)}
.stepper .step h6{margin-top:1.25rem}

/* Key table */
.table-key{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.table-key td,.table-key th{padding:.85rem 1rem}
.table-key tr + tr td{border-top:1px solid var(--line)}
.table-key th{background:#f2f8fd}

/* Chips using accent palette */
.chip-accent{background:#fff5f5;border:1px solid #ffe1e3;color:var(--clr-secondary);border-radius:999px;padding:.35rem .65rem;font-weight:600}
.chip-blue-accent{background:#f0f8ff;border:1px solid #d8edff;color:var(--clr-primary);border-radius:999px;padding:.35rem .65rem;font-weight:600}

/* =======================================================
   Components and utilities
   ======================================================= */

/* Nav tabs - clean underline */
.nav-tabs.underline{border-bottom:1px solid var(--line)}
.nav-tabs.underline .nav-link{border:0;margin-right:.75rem;color:var(--ink-600);font-weight:600}
.nav-tabs.underline .nav-link.active{color:var(--clr-primary);background:transparent;border-bottom:2px solid var(--clr-primary);border-radius:0}

/* Pagination - soft pills */
.pagination.soft .page-link{color:var(--ink-700);border:1px solid var(--line);border-radius:12px;margin:0 .25rem}
.pagination.soft .page-item.active .page-link{background:var(--clr-primary);border-color:var(--clr-primary)}
.pagination.soft .page-link:focus{box-shadow:var(--ring)}

/* Breadcrumb hero overlay */
.breadcrumb-hero{--overlay:linear-gradient(180deg,rgba(0,0,0,.15) 0,rgba(0,0,0,.35) 100%)}
.breadcrumb-hero .hero-bg{background-image:var(--bg, none)}
.breadcrumb-hero .overlay{position:absolute;inset:0;background:var(--overlay)}

/* FAQ mini list bullets for inside accordion */
/* UL - disc bullets */
ul.list-disc-primary{ list-style: disc; padding-left:1.25rem; line-height: 2;}
ul.list-disc-primary li::marker{ color: var(--clr-primary);}

ul.list-disc-secondary{ list-style: disc; padding-left:1.25rem; }
ul.list-disc-secondary li::marker{ color: var(--clr-secondary); }

/* OL - decimal numbers */
ol.list-decimal-primary{ list-style: decimal; padding-left:1.25rem; }
ol.list-decimal-primary li::marker{ color: var(--clr-primary); }

ol.list-decimal-secondary{ list-style: decimal; padding-left:1.25rem; }
ol.list-decimal-secondary li::marker{ color: var(--clr-secondary); }


/* Equal-height card grids */
.equal-grid .card{height:100%}
.equal-grid .card-body{display:flex;flex-direction:column}
.equal-grid .push-bottom{margin-top:auto}

/* Feature icon rows */
.icon-row{display:flex;gap:1rem;align-items:flex-start}
.icon-row .ic-wrap{flex:0 0 46px}
.icon-row .content{flex:1}

/* Table helpers */
.table-compact td,.table-compact th{padding:.65rem .8rem}
.table-check td{vertical-align:middle}
.table-check .bi{font-size:1rem}
.table-check .bi.check{color:#22a06b}
.table-check .bi.cross{color:#dc3545}

/* Pricing style blocks */
.pricing{border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow-1)}
.pricing .head{padding:1.25rem 1.25rem 0}
.pricing .price{font-weight:800;font-size:2rem;color:var(--ink-900)}
.pricing .body{padding:1rem 1.25rem 1.25rem}
.pricing.pop{border-color:#cde8ff;box-shadow:0 12px 34px rgba(32,136,202,.18)}

/* Timeline vertical */
.timeline{position:relative;padding-left:1.25rem}
.timeline::before{content:"";position:absolute;left:.25rem;top:0;bottom:0;width:2px;background:#e6eef6}
.timeline .t-item{position:relative;padding-left:1rem;margin-bottom:1rem}
.timeline .t-item::before{content:"";position:absolute;left:-.4rem;top:.35rem;width:10px;height:10px;border-radius:50%;background:var(--clr-primary)}

/* Hover outlines and subtle glow */
.hover-outline{
  transition:transform var(--transition-medium), var(--transition-shadow);
}
.hover-outline:hover{
  box-shadow:0 0 0 3px rgba(32,136,202,.18), var(--shadow-1);
  transform:translateY(-4px);
}
.hover-glow:hover{box-shadow:0 10px 30px rgba(32,136,202,.25)}

/* Gradient borders for highlight cards */
.gradient-border{position:relative;border-radius:16px}
.gradient-border::before{
  content:"";position:absolute;inset:0;padding:1px;border-radius:16px;
  background:linear-gradient(135deg,var(--clr-primary),var(--clr-primary-300));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}

/* Media helpers */
.ratio-21x9{--bs-aspect-ratio:42.857%}
.ratio-3x1{--bs-aspect-ratio:33.333%}
.img-soft{border-radius:16px;border:1px solid var(--line);box-shadow:var(--shadow-1)}

/* Badges set */
.badge-outline{border:1px solid var(--line);background:#fff;color:var(--ink-700);font-weight:600;border-radius:999px;padding:.35rem .6rem}
.badge-accent{background:#fff5f5;border:1px solid #ffe1e3;color:var(--clr-secondary);font-weight:700;border-radius:999px}
.badge-blue{background:#e9f5ff;border:1px solid #d8edff;color:var(--clr-primary);font-weight:700;border-radius:999px}

/* Toast look for inline notices */
.toast-13{border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:var(--shadow-1);padding:.9rem 1rem}
.toast-13 .title{font-weight:700;color:var(--ink-900);margin-bottom:.25rem}
.toast-13 .text{color:var(--ink-600);margin:0}

/* Skeleton shimmer */
.skeleton{position:relative;overflow:hidden;background:#eef4fa;border-radius:8px}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);animation:shimmer 1.25s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}

/* Sticky header shadow on scroll */
.header-shadow{transition:var(--transition-shadow)}
.header-shadow.is-scrolled{box-shadow:0 6px 18px rgba(16,36,58,.08)}

/* CTA floating bubble */
.fab-cta{position:fixed;right:18px;bottom:18px;z-index:1040}
.fab-cta .btn{box-shadow:0 16px 38px rgba(32,136,202,.32)}

/* Tag list */
.tags{display:flex;flex-wrap:wrap;gap:.5rem}
.tag{padding:.35rem .6rem;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink-700);font-weight:600}
.tag.blue{background:#e9f5ff;border-color:#d8edff;color:var(--clr-primary)}
.tag.accent{background:#fff5f5;border-color:#ffe1e3;color:var(--clr-secondary)}

/* Quote block */
.blockquote-13{border-left:4px solid var(--clr-primary);padding-left:1rem;color:var(--ink-600);font-style:italic;background:#f7fbff;border-radius:8px}

/* Small chips row for key points */
.chips{display:flex;gap:.5rem;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:.35rem .6rem;font-weight:600;color:var(--ink-700)}
.chip.hit{background:#e9f5ff;border-color:#d8edff;color:var(--clr-primary)}
.chip.warn{background:#fff6f6;border-color:#ffd4d7;color:#b23b3f}

/* Footer links */
.footer-links a{color:var(--ink-600)}
.footer-links a:hover{color:var(--clr-primary)}

/* Accessibility helpers */
.visually-sep{border-top:1px dashed var(--line);margin:1rem 0}
kbd{background:#111;color:#fff;border-radius:6px;padding:.1rem .35rem}

/* Print tweaks for long articles */
@media print{
  .btn,.navbar,.topbar,.fab-cta,.sticky-cta{display:none!important}
  a{color:#000;text-decoration:underline}
  .card,.info-block,.keytake,.table-compare{box-shadow:none!important}
}

/* Color utility shortcuts */
.text-primary-300{color:var(--clr-primary-300)!important}
.text-primary-600{color:var(--clr-primary-600)!important}
.bg-primary-300{background:var(--clr-primary-300)!important}
.primary-bg{background:var(--clr-primary-bg)!important}
.secondary-bg{border-color:rgba(220,53,69,.3);background:rgba(220,53,69,.05)}
.bg-secondary-soft{background:#fff5f5!important}
.border-line{border:1px solid var(--line)!important}

/* Spacing helpers not in BS scale */
.gap-6{gap:1.5rem}
.gap-7{gap:2rem}
.px-7{padding-left:2rem;padding-right:2rem}
.py-7{padding-top:2rem;padding-bottom:2rem}

/* Z helpers */
.z-1{z-index:1}
.z-2{z-index:2}
.z-3{z-index:3}

/* gradient helpers - all from tokens */
.bg-grad-brand{background:linear-gradient(135deg,var(--clr-primary-300),var(--clr-primary))!important}
.bg-grad-secondary{background:linear-gradient(135deg,var(--clr-secondary),var(--clr-accent))!important}
.bg-grad-soft{background:linear-gradient(180deg,#ffffff 0,var(--surface-soft) 100%)!important}

/* icon block variants */
.square-icon.brand{background:var(--clr-primary)!important}
.square-icon.grad-brand{background:linear-gradient(135deg,var(--clr-primary-300),var(--clr-primary))!important}
.square-icon.grad-secondary{background:linear-gradient(135deg,var(--clr-secondary),var(--clr-accent))!important}

/* text helpers from tokens */
.text-ink-900{color:var(--ink-900)!important}

/* =========================================
   Universal Chip Hover - grow + pulse
   ========================================= */

/* Shared transition for chip targets */
.chipfx .ic-wrap,
.chipfx .circle-icon,
.chipfx .square-icon,
.chipfx .bi-wrap,
.chipfx .info-ic{
  transition:
    transform var(--transition-fast),
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    var(--transition-shadow);
  will-change:transform,background,color;
}

/* default brand effect - grow and move up a little */
.chipfx:hover .ic-wrap,
.chipfx:hover .circle-icon,
.chipfx:hover .square-icon,
.chipfx:hover .bi-wrap,
.chipfx:hover .info-ic{
  transform:translateY(-4px) scale(1.08);
 /* background:linear-gradient(135deg,var(--clr-primary-300),var(--clr-primary));*/
  border-color:transparent;
  box-shadow:0 10px 22px rgba(32,136,202,.25);
}

/* extra grow add-on */
@keyframes chipGrow{
  0%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-6px) scale(1.12)}
  100%{transform:translateY(-4px) scale(1.08)}
}
.chipfx-grow .ic-wrap,
.chipfx-grow .circle-icon,
.chipfx-grow .square-icon,
.chipfx-grow .bi-wrap,
.chipfx-grow .info-ic {
  transform: translateY(0) scale(1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.chipfx-grow:hover .ic-wrap,
.chipfx-grow:hover .circle-icon,
.chipfx-grow:hover .square-icon,
.chipfx-grow:hover .bi-wrap,
.chipfx-grow:hover .info-ic {
  transform: translateY(-8px) scale(1.08);
  box-shadow: var(--shadow-2);
  animation: none;
}


/* secondary palette variant */
.chipfx.chipfx-secondary:hover .ic-wrap,
.chipfx.chipfx-secondary:hover .circle-icon,
.chipfx.chipfx-secondary:hover .square-icon,
.chipfx.chipfx-secondary:hover .bi-wrap,
.chipfx.chipfx-secondary:hover .info-ic{
 /* background:linear-gradient(135deg,var(--clr-secondary),var(--clr-accent));*/
  box-shadow:0 10px 22px rgba(255,107,112,.25);
}

/* pulse ring effect - visually distinct from grow */
@keyframes chipPulse{
  0%{box-shadow:0 0 0 0 rgba(32,136,202,.35)}
  70%{box-shadow:0 0 0 10px rgba(32,136,202,0)}
  100%{box-shadow:0 0 0 0 rgba(32,136,202,0)}
}
.chipfx-pulse:hover .ic-wrap,
.chipfx-pulse:hover .circle-icon,
.chipfx-pulse:hover .square-icon,
.chipfx-pulse:hover .bi-wrap,
.chipfx-pulse:hover .info-ic{
  animation:chipPulse .8s ease-out;
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  .chipfx-grow:hover .ic-wrap,
  .chipfx-grow:hover .circle-icon,
  .chipfx-grow:hover .square-icon,
  .chipfx-grow:hover .bi-wrap,
  .chipfx-grow:hover .info-ic,
  .chipfx-pulse:hover .ic-wrap,
  .chipfx-pulse:hover .circle-icon,
  .chipfx-pulse:hover .square-icon,
  .chipfx-pulse:hover .bi-wrap,
  .chipfx-pulse:hover .info-ic{
    animation:none;
    transform:translateY(-4px);
  }
}

/* Circular icons - base */
.circle-icon{
  width:56px; height:56px;
  border-radius:999px;
  display:grid; place-items:center;
  background:#eaf4fe;                 /* soft blue like ic-wrap */
  color:var(--clr-primary);
  border:1px solid var(--line-2);
  box-shadow:var(--shadow-1);
  font-size:18px;                      /* for font icons */
  line-height:1;
}

/* sizes */
.circle-icon.sm{ width:40px; height:40px; font-size:16px }
.circle-icon.md{ width:56px; height:56px; font-size:18px }  /* default */
.circle-icon.lg{ width:72px; height:72px; font-size:22px }
.circle-icon.xl{ width:88px; height:88px; font-size:26px }

/* brand variants */
.circle-icon.brand{ background:var(--clr-primary); color:#fff; border-color:transparent }
.circle-icon.grad-brand{ background:linear-gradient(135deg,var(--clr-primary-300),var(--clr-primary)); color:#fff; border-color:transparent }
.circle-icon.grad-secondary{ background:linear-gradient(135deg,var(--clr-secondary),var(--clr-accent)); color:#fff; border-color:transparent }

/* outline and soft */
.circle-icon.outline{ background:#fff; border:1px solid var(--line-2); color:var(--clr-primary); box-shadow:none }
.circle-icon.soft{ background:rgba(32,136,202,.12); border:1px solid rgba(32,136,202,.24); color:var(--clr-primary) }

/* icon rendering hints for crisp scale */
.circle-icon,
.circle-icon i,
.circle-icon svg{
  transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}
.circle-icon svg{
  transform-box:fill-box;
  transform-origin:center;
  shape-rendering:geometricPrecision;
}

/* chipfx hover integration - reuse your grow and pulse */
.chipfx:hover .circle-icon{
  transform:translateY(-4px) scale(1.08);
  /*background:linear-gradient(135deg,var(--clr-primary-300),var(--clr-primary));*/
  color:#fff; border-color:transparent;
  box-shadow:0 10px 22px rgba(32,136,202,.25);
}
.chipfx.chipfx-secondary:hover .circle-icon{
  /*ackground:linear-gradient(135deg,var(--clr-secondary),var(--clr-accent));*/
  box-shadow:0 10px 22px rgba(255,107,112,.25);
}
/* optional animation variants already in your CSS:
   .chipfx-grow and .chipfx-pulse will apply via the same selectors */

/* ===== Key Takeaways (hero style) ===== */
.keytake-xl{
  border-width:2px;border-color:var(--line-2);
  background:#f5fbff;padding:1.25rem 1.5rem;border-radius:16px;
}
.keytake-xl .kt-ic{
  width:40px;height:40px;border-radius:999px;
  display:grid;place-items:center;
  background:#e9f5ff;border:1px solid #d8edff;color:var(--clr-primary);
  flex:0 0 auto;
}
.kt-list-lg .kt-bullet{
  width:22px;height:22px;border-radius:999px;flex:0 0 22px;margin-top:.2rem;
  border:2px solid #77c7fb;background:#e9f6ff;box-shadow:inset 0 0 0 4px #fff;
}

/* ===== FAQ polish ===== */
.faq-xl .accordion-item{border-radius:14px}
.faq-xl .accordion-button{padding:1.125rem 1rem;font-weight:700}
.faq-ic{
  width:46px;height:46px;border-radius:999px;display:grid;place-items:center;
  background:#e9f5ff;border:1px solid #d8edff;color:var(--clr-primary)
}

/* ===== Helpful Resources slider (3-up responsive) ===== */
.res-slider{--gap:24px;position:relative}
.res-viewport{overflow:hidden}
.res-track{
  display:flex;gap:var(--gap);
  transition:transform var(--transition-slow);
  will-change:transform;
}
.res-card{flex:0 0 calc((100% - (var(--gap) * 2)) / 3);min-width:0}
@media (max-width: 991.98px){.res-card{flex-basis:calc((100% - var(--gap)) / 2)}}
@media (max-width: 575.98px){.res-card{flex-basis:100%}}
.res-thumb {
  height: 200px;
  display: grid;
  place-items: center;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg,#e9f8ff 0%, #ffe7ea 100%);
  overflow: hidden; important for border-radius + cover
}

.res-thumb i{font-size:28px;color:#15a1ea}
.res-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:999px;display:grid;place-items:center;z-index:2
}
.res-nav.prev{left:-10px}
.res-nav.next{right:-10px}
@media (max-width: 575.98px){.res-nav.prev{left:4px}.res-nav.next{right:4px}}

/* Stroke card - visual only, no movement */
.stroke{
  background:#fff;
  box-shadow:var(--shadow-1);
  border:1px solid var(--stroke);
  border-radius:18px;
  transition:var(--transition-shadow), border-color var(--transition-fast);
}
.stroke:hover{
  box-shadow:0 1rem 2rem rgba(0,0,0,.10);
  border-color:#f7fbff;
}
.stroke p{color:var(--muted)}
.stroke.is-primary{border-left:5px solid var(--clr-primary-600)}
.stroke.is-secondary{border-left:5px solid var(--clr-secondary)}

/* ==============================================
   cluster-article.css - complements
   Use for Cluster Article pages (Bootstrap 5)
   ============================================== */
/* Animations */
@keyframes fadeIn { 0%{opacity:0;} 100%{opacity:1;} }
@keyframes slideUp { 0%{opacity:0;transform:translateY(10px);} 100%{opacity:1;transform:none;} }
.animate-fade-in{ animation:fadeIn .6s ease forwards; }
.animate-slide-up{ animation:slideUp .6s ease forwards; }

/* Text link hover underline */
.hover-link{
  position:relative;
  text-decoration:none;
  transition:color .25s ease;
}
.hover-link::after{
  content:"";
  position:absolute;
  left:0; bottom:-2px;
  width:0; height:2px;
  background:var(--clr-primary);
  transition:width .25s ease;
}
.hover-link:hover::after{ width:100%; }

/* Article content rhythm */
.article-content p{ margin-bottom:1rem; line-height:1.7; }
.article-content h2,
.article-content h3{ margin-top:2.5rem; margin-bottom:1rem; color:var(--ink-900); }
.article-content ul{ padding-left:1.25rem; }
.article-content ul li{ margin-bottom:.5rem; }

/* Hero image block */
.hero-img-wrap{
  border-radius:14px;
  overflow:hidden;
  background:var(--surface-soft);
}
.hero-img-wrap img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}
.hero-caption{
  background:rgba(255,255,255,.9);
  border-top:1px solid var(--line);
  font-size:.9rem;
  color:var(--ink-600);
}

/* Sidebar: single sticky stack so cards never overlap */
.sidebar-sticky{
  position:sticky;
  top:80px;                 /* leave space for header */
  display:flex;
  flex-direction:column;
  gap:1rem;                 /* space between CTA and Related cards */
}

/* Mobile/tablet: disable sticky to avoid small-screen overlap */
@media (max-width: 991.98px){
  .sidebar-sticky{ position:static; }
}
/* =======================================================
   Cluster Article - Section structure + reveal utilities
   Appended to custom-css.css (no duplicates)
   ======================================================= */

/* --- Section building blocks --- */
.article-meta{
  display:flex; flex-wrap:wrap; gap:.75rem 1.25rem;
  color:var(--ink-600);
}
.article-meta i{ color:var(--clr-primary-600) }

.article-section{ margin-top:2.5rem }
.section-head{
  display:flex; align-items:center; gap:.5rem;
  margin-bottom:1rem; color:var(--ink-900);
}
.section-head .dot{
  width:10px; height:10px; border-radius:999px;
  background:var(--clr-primary-600);
}

/* Divider between article sections */
.section-divider{
  height:1px; width:100%;
  background:linear-gradient(90deg,transparent, var(--line) 20%, var(--line) 80%, transparent);
  margin:2rem 0;
}

/* Pull quote + inline note */
.pull-quote{
  position:relative;
  border-left:4px solid var(--clr-primary);
  padding-left:1rem; font-style:italic;
  color:var(--ink-600); background:#f7fbff;
  border-radius:8px;
}

.note-inline{
  display:flex; gap:.75rem; align-items:flex-start;
  background:#fff; border:1px solid var(--line);
  border-radius:14px; padding:1rem; box-shadow:var(--shadow-1);
}
.note-inline .ic{
  width:36px; height:36px; border-radius:10px;
  display:grid; place-items:center;
  background:#e9f5ff; border:1px solid #d8edff;
  color:var(--clr-primary);
}
/* Media figure inside article */
.figure{
  border:1px solid var(--line);
  border-radius:14px; overflow:hidden;
  box-shadow:var(--shadow-1); background:#fff;
}
.figure img{ display:block; width:100%; height:auto; object-fit:cover }
.figure .figcaption{
  padding:.6rem .9rem; font-size:.9rem; color:var(--ink-600);
  border-top:1px solid var(--line); background:#fff;
}

/* Meta chips row (tags under hero) */
.meta-chips{ display:flex; flex-wrap:wrap; gap:.5rem }
.meta-chip{
  padding:.35rem .6rem; font-weight:600;
  border-radius:999px; background:#e9f5ff; border:1px solid #d8edff;
  color:var(--clr-primary);
}

/* CTA band variant for article */
.cta-band{
  border:0; box-shadow:var(--shadow-1);
  background:linear-gradient(135deg, rgba(32,136,202,.08), rgba(255,107,112,.10));
  transition:var(--transition-shadow);
}
.cta-band:hover{ box-shadow:var(--shadow-2) }

@media (prefers-reduced-motion:reduce){
  .reveal-fast.reveal-in,.reveal-slow.reveal-in,
  .reveal-group > *{ opacity:1; transform:none; animation:none }
}

/* Reduce top/bottom space inside the question row only on desktop */
@media (min-width: 992px){
  .accordion.clean.faq-xl .accordion-button{
    padding: .6rem 1rem;     /* was ~1rem 1.25rem+ */
    line-height: 1.25;       /* avoids tall lines when text wraps */
    font-size: 1rem;         /* optional: prevent large type from inflating height */
  }
  .accordion.clean.faq-xl .accordion-body{
    padding: .75rem 1rem 1rem;
  }
}

/* Make sure headings don’t add extra space */
.accordion.clean.faq-xl .accordion-header{ margin:1vh; }

/* Smaller caret so it doesn't add height visually */
.accordion.clean.faq-xl .accordion-button::after{
  width: 1rem; height: 1rem; background-size: 1rem;
}
/* Mobile related-articles mini cards */
@media (max-width: 991.98px){
  .vstack.gap-2 > .card{ box-shadow: var(--shadow-1); }
  .vstack.gap-2 > .card:active{ transform: scale(.997); } /* subtle tap feedback */
}

/* two-line clamp helper (safe, no libs) */
.line-clamp-2{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* =======================================================
   13Cure - Icon crispness + no-shrink patch
   Uses ONLY your existing classes
   ======================================================= */

/* 1) lock icon size in flex rows so multi-line text never squeezes them */
.ic-wrap{ flex:0 0 46px; min-width:46px; width:46px; height:46px }
.square-icon{ flex:0 0 56px; min-width:56px; width:56px; height:56px; line-height:1 }
.circle-icon{ flex:0 0 56px; min-width:56px; width:56px; height:56px } /* sizes already defined, this prevents shrink */

/* size variants keep the lock */
.circle-icon.sm{ flex:0 0 40px; min-width:40px }
.circle-icon.lg{ flex:0 0 72px; min-width:72px }
.circle-icon.xl{ flex:0 0 88px; min-width:88px }

/* 2) promote icons to their own GPU layer and keep edges sharp */
.ic-wrap,
.square-icon,
.circle-icon,
.bi-wrap,
.info-ic{
  transform:translate3d(0,0,0);
  backface-visibility:hidden;
  transform-origin:center;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
  line-height:1;
}

/* svg sharpen */
.ic-wrap svg,
.square-icon svg,
.circle-icon svg,
.bi-wrap svg,
.info-ic svg{
  transform-box:fill-box;
  transform-origin:center;
  shape-rendering:geometricPrecision;
  text-rendering:geometricPrecision;
}

/* raster icon sharpen */
.ic-wrap img,
.square-icon img,
.circle-icon img,
.bi-wrap img,
.info-ic img{
  image-rendering:-webkit-optimize-contrast;
  image-rendering:crisp-edges;
}

/* 3) switch chipfx transforms to 3D so scaling stays crisp */
.chipfx:hover .ic-wrap,
.chipfx:hover .circle-icon,
.chipfx:hover .square-icon,
.chipfx:hover .bi-wrap,
.chipfx:hover .info-ic{
  transform:translate3d(0,-4px,0) scale(1.08);
}

/* 4) update grow keyframes to 3D to avoid re-sampling */
@keyframes chipGrow{
  0%{   transform:translate3d(0,0,0)    scale(1) }
  50%{  transform:translate3d(0,-6px,0) scale(1.12) }
  100%{ transform:translate3d(0,-4px,0) scale(1.08) }
}

/* 5) optional - keep pulse but prevent extra motion under reduced motion */
@media (prefers-reduced-motion:reduce){
  .chipfx:hover .ic-wrap,
  .chipfx:hover .circle-icon,
  .chipfx:hover .square-icon,
  .chipfx:hover .bi-wrap,
  .chipfx:hover .info-ic{
    transform:none;
  }
  .chipfx-grow:hover .ic-wrap,
  .chipfx-grow:hover .circle-icon,
  .chipfx-grow:hover .square-icon,
  .chipfx-grow:hover .bi-wrap,
  .chipfx-grow:hover .info-ic{
    animation:none;
  }
}
/* ===== Numbered section headers (tiny add-on) ===== */
.sec-head{display:flex;flex-direction:column;align-items:center;margin-bottom:1rem}
.sec-num{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:999px;
  background:#e9f5ff;border:1px solid #d8edff;color:var(--clr-primary);font-weight:800}
.sec-title{margin:.5rem 0 0;font-weight:800}
.hr-pill{height:4px;width:84px;border-radius:6px;background:var(--clr-primary)}
/* soft subhead text width helper */
.sublead{max-width:720px}

.mt-n5
{
  margin-top: -40px;
}

/* Blog index page Styling */
/* ===== Hero pill ===== */
    .hero-pill{
      border-radius:22px;
      background:linear-gradient(135deg, var(--clr-primary) 0%, #2aa0e5 60%, #2aa0e5 100%);
      position:relative; overflow:hidden;
    }
    .hero-pill .blur-dot{position:absolute; border-radius:50%; background:#fff; filter:blur(48px); opacity:.22}
    .hero-pill .dot-1{width:180px;height:180px; top:18px; right:80px}
    .hero-pill .dot-2{width:160px;height:160px; bottom:18px; left:80px}

    /* ===== Controls (chips + inputs share the same height) ===== */
    :root{ --control-h: 42px; }       /* tweak to 40/44 if you like */

    .btn-chip{
      --bs-btn-padding-y: 0;
      --bs-btn-padding-x: 1rem;
      height:var(--control-h);
      display:inline-flex; align-items:center; border-radius:999px;
      font-weight:600;
      color:var(--clr-primary); border-color:var(--clr-primary);
      background:#fff;
    }
    .btn-chip:hover{ background:var(--clr-primary); color:#fff }
    .btn-chip.active{ background:var(--clr-primary); color:#fff; border-color:var(--clr-primary) }

    .search-control{
      height:var(--control-h);
      line-height:var(--control-h);
      border:1px solid var(--line-2);
      box-shadow:var(--shadow-1);
    }
    .search-control:focus{
      border-color:var(--clr-primary);
      box-shadow:0 0 0 .2rem rgba(32,136,202,.15);
    }
    .search-field .search-ic{
      position:absolute; right:14px; top:50%; transform:translateY(-50%);
      font-size:.95rem; color:var(--clr-primary-600); pointer-events:none;
    }
    #catChips{ row-gap:.5rem; }

    /* Mobile control height preference */
    @media (max-width:360px){ :root{ --control-h:40px } }

    /* ===== Cards ===== */
    .card-post .thumb{ position:relative; height:200px; overflow:hidden; border-top-left-radius:var(--radius); border-top-right-radius:var(--radius) }
    .card-post .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .45s ease }
    .card-post:hover .thumb img{ transform:scale(1.06) }
    .badge-ghost{ background:#fff; border:1px solid var(--line); border-radius:999px; font-weight:700 }
    .meta{ color:var(--ink-400); font-size:.875rem }
    .color-blue{ color:var(--clr-primary) }

    /* ===== Featured post zoom (match card hover) ===== */
    .featured-post.hover-zoom .feat-media{ position:relative; overflow:hidden; height:100% }
    .featured-post.hover-zoom .feat-media img{
      display:block; width:100%; height:100%; object-fit:cover;
      transform:translateZ(0); will-change:transform;
      transition:transform .6s cubic-bezier(.22,1,.36,1);
    }
    .featured-post.hover-zoom:hover .feat-media img,
    .featured-post.hover-zoom:focus-within .feat-media img{ transform:scale(1.06) }
    @media (prefers-reduced-motion:reduce){ .featured-post.hover-zoom .feat-media img{ transition:none } }

    /* ===== Mobile dropdown styling ===== */
    #catDropdownBtn{
      height:var(--control-h);
      border-radius:999px;
      background:#fff;
      color:var(--clr-primary);
      border-color:var(--clr-primary);
    }
    #catDropdownBtn:hover,
    #catDropdownBtn.show{ background:var(--clr-primary); color:#fff; border-color:var(--clr-primary) }

    .dropdown-menu{
      border-radius:16px; border:1px solid var(--line);
      box-shadow:var(--shadow-1);
      padding:.25rem;
    }
    .dropdown-menu .dropdown-item{
      border-radius:10px; color:var(--ink-700);
    }
    .dropdown-menu .dropdown-item:hover{
      background:#e9f5ff; color:var(--clr-primary); font-weight:700;
    }


/* Blog detail page styling */
 /* -------- page polish (keeps your universal tokens) -------- */
    .rounded-16{border-radius:16px}
    .shadow-soft{box-shadow:var(--shadow-1)}
    .badge-chip{border-radius:999px; font-weight:700; padding:.35rem .7rem}
    .text-ink-500{color:var(--ink-500)}
    .text-ink-600{color:var(--ink-600)}
    .meta i{color:var(--clr-primary)}
    .hover-scale{transition:transform .2s ease}
    .hover-scale:hover{transform:translateY(-2px)}
    .sticky-96{position:sticky; top:96px} /* ~ top-24 */
    .hero-img{height:420px; object-fit:cover; width:100%; border-radius:16px}
    .share-dot{width:32px;height:32px;border-radius:999px;display:grid;place-items:center;border:1px solid var(--line-2);background:#fff}
    .share-dot:hover{background:#eaf4fe;border-color:transparent;color:var(--clr-primary)}
    /* prose-like readable article card */
    .article-card{border-radius:16px; box-shadow:var(--shadow-1); border:1px solid var(--line-2); background:#fff}
    .article-card .article-body{padding:2rem}
    @media (min-width:768px){ .article-card .article-body{padding:3rem} }
    .article-body h2{font-size:1.5rem;margin-top:1.5rem;margin-bottom:.5rem;font-weight:800;color:var(--clr-primary)}
    .article-body h3{font-size:1.25rem;margin-top:1.25rem;margin-bottom:.5rem;font-weight:800;color:var(--clr-primary)}
    .article-body p{color:var(--ink-700); line-height:1.7; margin-bottom:1rem}
    .article-body strong{color:var(--ink-800)}
    .article-body ul{padding-left:1.25rem;margin:1rem 0}
    .article-body li{margin:.35rem 0}
    /* recent posts cards */
    .recent-item:hover .recent-title{text-decoration:underline}
    .recent-thumb{width:76px;height:76px;object-fit:cover;border-radius:12px}
    /* mobile recent posts band */
    .recent-band{border:1px solid var(--line-2); border-radius:16px; box-shadow:var(--shadow-1)}
    /* tiny tooltips style for share label */
    .share-label{font-size:.875rem;color:var(--ink-500)}
    /* “Back to articles” link */
    .back-link{color:var(--ink-500)}
    .back-link:hover{color:var(--clr-primary)}