/* ============================================================
   VOOM Design System · Public CSS
   Magazine editorial · Refined direction · RTL Hebrew
   ============================================================ */

/* ===== Tokens ===== */
:root {
  --voom-red: #C91D36;
  --voom-red-deep: #9E0F26;
  --voom-red-soft: #E64158;
  --voom-red-wash: #FBEEF0;

  --ink: #1A1410;
  --ink-2: #3D3530;
  --ink-3: #5A4F47;
  --ink-4: #6E635C;
  --mute: #9A8F86;
  --hair: #D6CEC2;
  --hair-soft: #E5DDD0;

  --paper: #FAF8F4;
  --paper-soft: #FCFBF7;
  --cream: #F2ECE0;
  --cream-2: #E8DFCE;

  --display: 'Heebo', 'Assistant', system-ui, sans-serif;
  --sans: 'Heebo', 'Assistant', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap: 1380px;
  --wrap-narrow: 960px;
  --wrap-wide: 1400px;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --s-10: 64px;
  --s-11: 80px;
  --s-12: 120px;
}

/* ===== Reset / base ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  width: 100%;
}
body {
  font-family: var(--sans);
  font-size: 20px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100%;
  max-width: 100vw;
  overflow-x: clip;
}
 h6{
  font-family: var(--display);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
  color: var(--mute);  
}
@supports not (overflow-x: clip) {
  body { overflow-x: hidden; }
}

img, svg, video { display: block; max-width: 100%; height: auto; }
img, video, iframe, table, pre { max-width: 100%; }
/* Imported media keeps its own proportions: height:100% + min-width:100% used to
   squash every image to the column box and collapse iframes that carry no
   height attribute of their own. */
.article-content img, .article-content video { width: 100%; max-width: 100%; height: auto; margin: 15px 0; }
.article-content iframe { width: 100%; max-width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; margin: 15px 0; }
@media (max-width: 768px) { .article-content img[style*="--h-m"] { height: var(--h-m) !important; } }
/* Mobile scroll device for the site's own imported tables. Excluded for
   table.table: those come from the source already wrapped in Bootstrap's
   .table-responsive, which scrolls them properly. display:block shrink-wraps
   the anonymous table box inside the block box, so in RTL the rows hug the
   right and leave the difference as dead space on the left. */
.article-content table:not(.table) { display: block; overflow-x: auto; }
.article-content pre { overflow-x: auto; white-space: pre-wrap; word-wrap: break-word; }
.article-content { word-wrap: break-word; overflow-wrap: break-word; }
.wrap, .wrap-narrow, .wrap-wide, main, section, .home-page, article { max-width: 100%; }
a { color: inherit; text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--voom-red); }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
hr { border: 0; border-top: 1px solid var(--hair); margin: var(--s-9) 0; }

/* zoom hacks removed */

/* ===== Layout ===== */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s-7); }
.wrap-narrow { max-width: var(--wrap-narrow); margin: 0 auto; padding: 0 var(--s-7); }
.wrap-wide { max-width: var(--wrap-wide); margin: 0 auto; padding: 0 var(--s-7); }

.row { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: var(--s-4); }

/* ===== Typography ===== */
.display-1 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(48px, 8vw, 96px);
  line-height: .92;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0;
}
.display-2 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0;
}
.h1-serif {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(32px, 4.2vw, 48px);
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0;
}
.h2-serif {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.12;
  letter-spacing: -.005em;
  color: var(--ink);
  margin: 0;
}
.h3-serif {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
}
.deck-italic, .deck {
  font-family: var(--display);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(20px, 1.6vw, 22px);
  line-height: 1.45;
  color: var(--ink-2);
  margin: 0;
}
.body-lg {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.7;
  color: var(--ink-2);
}
.body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.65;
  color: var(--ink-2);
}
.small {
  font-family: var(--sans);
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink-3);
}
.eyebrow {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--voom-red);
  margin: 0;
}
.meta-cap {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}
em { font-style: normal; }
strong, b { font-weight: 700; color: var(--ink); }
/* Imported copy sets its colour on the heading or paragraph and leaves the bold
   inside it uncoloured, so the ink above turned white-on-blue headings black.
   In an article body, bold weight is the only thing bold changes. */
.article-content :is(strong, b) { color: inherit; }

/* ===== Masthead / Header ===== */
.mast {
  background: #fff;
  border-bottom: 1px solid var(--hair);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100vw;
  z-index: 50;
  box-shadow: 0 1px 6px rgba(26, 20, 16, .06);
}
body { padding-top: 56px; }
@media (min-width: 761px) { body { padding-top: 56px; } }
.mast-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-6);
  min-height: 56px;
  max-width: var(--wrap-wide);
  margin: 0 auto;
}
.mast-issue {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.mast-logo { display: flex; order:0;  
  @media(max-width: 600px){ order:1; } }
.mast-logo a { display: flex; align-items: center; }
.mast-logo.menu{ position:absolute; top: 20px; right: 10px;  }
.mast-logo svg { display: block; height: 22px; width: auto; }
.mast-logo img { display: block; height: 50px; width: auto; }
.mast-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  order:0;
}
.mast-actions .icon-btn {
  background: var(--voom-red);
  border: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
}
.mast-actions .icon-btn:hover { background: var(--voom-red-deep); color: #fff; }
.mast-search-wrap { display: flex; align-items: center; gap:10px; order:2;}
.mast-search-btn { background: var(--voom-red); border: 0; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.mast-search-btn:hover { background: var(--voom-red-deep); }
.mast-search-form {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--hair-soft, #e5ddd0);
  border-radius: 999px;
  padding: 6px 14px;
  width: 500px;
  z-index: 10000;
  color: var(--ink-3);
  animation: searchExpand .18s ease;
}
@keyframes searchExpand {
  from { width: 0; opacity: 0; }
  to   { width: 300px; opacity: 1; }
}
.mast-search-form input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  outline: none;
  direction: rtl;
  text-align: right;
  min-width: 0;
}
.mast-search-form[hidden] { display: none; }
.mast-search-form input::placeholder { color: var(--mute); }
.mast-search-submit { background: var(--voom-red); border: none; border-radius: 50%; width: 28px; height: 28px; display: grid; place-items: center; color: #fff; flex-shrink: 0; cursor: pointer; padding: 0; }
.mast-search-submit:hover { background: var(--voom-red-deep); }
.mast-search-btn.active { background: var(--voom-red-deep); box-shadow: 0 0 0 3px rgba(201,29,54,.25); }
.mast-search-btn.active .icon-search { display: none; }
.mast-search-btn.active .icon-close  { display: block !important; }
@media (max-width: 760px) {
  .mast-search-form { width: 180px; padding: 5px 10px; }
  @keyframes searchExpand { from { width: 0; opacity: 0; } to { width: 180px; opacity: 1; } }
}
.mast-search-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  width: max(100%, min(480px, 90vw));
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
  z-index: 9999;
  overflow: hidden;
}
.mast-search-suggestions[hidden] { display: none; }

/* primary nav — now lives inside mast-row */
.mast-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: var(--s-6);
  flex: 1;
  padding: 0;
}
.mast-nav-inner a {
  position: relative;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 20px;
  color: var(--voom-red);
  padding: var(--s-2) 0;
  letter-spacing: .01em;
  white-space: nowrap;
}
.mast-nav-inner a::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background: var(--voom-red);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s ease;
}
.mast-nav-inner a:hover { color: var(--voom-red-deep); }
.mast-nav-inner a:hover::after,
.mast-nav-inner a.active::after { transform: scaleX(1); }
.mast-nav-inner a.active { color: var(--voom-red); font-weight: 600; }
.swiper{
  padding: var(--s-5) 5px !important;
}
/* mobile menu toggle */
.nav-toggle {
  display: none;
  background: var(--voom-red);
  border: 0;
  border-radius: 8px;
  width: 40px;
  height: 36px;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
  cursor: pointer;
  padding: 0;
}
.nav-toggle:hover { background: var(--voom-red-deep); }
.nav-toggle:hover span { background: #fff; }
.nav-toggle span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: #fff;
  transition: transform .3s, opacity .3s;
}
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* mobile slide-in panel */
.nav-panel {
  position: fixed;
  inset: 0;
  background: var(--paper);
  z-index: 60;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.6,.05,.3,1);
  display: flex;
  flex-direction: column;
  padding: var(--s-10) var(--s-7) var(--s-7);
  overflow-y: auto;
  visibility: hidden;
  pointer-events: none;
}
[dir="rtl"] .nav-panel { transform: translateX(100%); }
.nav-panel.active {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}
.nav-panel-close {
  position: absolute;
  top: var(--s-5);
  inset-inline-end: var(--s-5);
  width: 36px;
  height: 36px;
  background: transparent;
  border: 0;
  display: grid;
  place-items: center;
  color: var(--ink);
  font-size: 22px;
}
.nav-panel-list { display: flex; flex-direction: column; }
.nav-panel-list a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--hair);
  font-family: var(--display);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.2;
  color: var(--ink);
}
.nav-panel-list a:hover,
.nav-panel-list a.active { color: var(--voom-red); }
.nav-panel-list .n {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: .14em;
  color: var(--mute);
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  background: var(--voom-red);
  color: #fff;
  border: 0;
  padding: 14px 28px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
  text-decoration: none;
}
.btn:hover { background: var(--voom-red-deep); color: #fff; }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-text {
  background: transparent;
  color: var(--ink);
  padding: 10px 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
}
.btn-text:hover { background: transparent; color: var(--voom-red); border-bottom-color: var(--voom-red); }
.btn-sm { padding: 10px 18px; font-size: 20px; }
.btn-lg { padding: 18px 36px; font-size: 20px; }
.btn[disabled] { opacity: .4; cursor: not-allowed; }

/* ===== Badges / Tags ===== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--voom-red);
  color: #fff;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 5px 10px;
  line-height: 1;
}
.badge-outline { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.badge-ink { background: var(--ink); color: var(--paper); }
.badge-cream { background: var(--cream); color: var(--ink); }
.badge-dot::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 20px;
  color: var(--ink-3);
  padding: 6px 0;
}
.tag::before { content: '#'; color: var(--voom-red); margin-inline-end: 3px; font-weight: 700; }
.tag:hover, .tag.active { color: var(--voom-red); }

/* ===== Forms ===== */
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.input, .select, .textarea {
  background: var(--paper);
  border: 1px solid var(--hair);
  padding: 12px 14px;
  font-family: var(--sans);
  font-size: 20px;
  color: var(--ink);
  width: 100%;
  outline: none;
  transition: border-color .2s ease;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--ink); }
.input-underline {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink);
  padding: 10px 0;
}
.input-underline:focus { border-bottom-color: var(--voom-red); }
.field .help { font-size: 20px; color: var(--ink-3); }
.field .error { font-size: 20px; color: var(--voom-red); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-6); }
.checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 20px;
  color: var(--ink-2);
  cursor: pointer;
}
.checkbox input { accent-color: var(--voom-red); }
.toggle {
  width: 42px;
  height: 22px;
  background: var(--hair);
  border: 0;
  position: relative;
  cursor: pointer;
  transition: background .2s;
}
.wrap.home-section{
    margin-bottom: var(--s-4) !important;
  }

/* ===== Section Strip / hp-slider ===== */
.wow-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-4);
}
.wow-head-left { display: flex; align-items: center; gap: var(--s-3); }
.wow-head-logo { height: 32px; width: auto; }
.wow-head-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  color: var(--ink);
}
.wow-head-more {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-3);
  text-decoration: none;
}
.wow-head-more:hover { color: var(--voom-red); }

.hp-slider-card {
  display: block;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
}
.hp-slider-card:hover { color: #fff; }
.hp-slider-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.hp-slider-card-content {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.28) 55%, rgba(0,0,0,0) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 14px 16px;
  gap: 6px;
}
.hp-slider-cat {
  display: inline-block;
  background: var(--voom-red);
  color: #fff;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 8px;
  padding: 2px 10px;
  align-self: flex-start;
}
.hp-slider-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.3;
  color: #fff;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.toggle::before {
  content: '';
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;
  width: 18px;
  height: 18px;
  background: #fff;
  transition: transform .25s;
}
.toggle.on { background: var(--voom-red); }
.toggle.on::before { transform: translateX(20px); }
[dir="rtl"] .toggle.on::before { transform: translateX(-20px); }

/* ===== Card · A: Standard (cream) ===== */
.a-card {
  display: flex;
  flex-direction: column;
  background: var(--cream);
  color: var(--ink);
  border-radius: 16px;
}
.a-card:hover { color: var(--ink); }
.a-card:hover h3 { color: var(--voom-red); transition: color .2s; }
.a-card .img-wrap { aspect-ratio: 4/3; overflow: hidden; background: var(--hair); border-radius: 4px ; }
.a-card .img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.a-card .body { padding: var(--s-4) var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.a-card .cat {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--voom-red);
}
.a-card h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
}
.a-card .deck {
  font-family: var(--display);
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.45;
  color: var(--ink-3);
  margin: 0;
}
.a-card .meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--sans);
  font-size: 20px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding-top: var(--s-2);
  margin-top: auto;
  border-top: 1px solid var(--hair);
}
.a-card .meta .author { color: var(--ink); font-weight: 600; }

.card-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}

/* Homepage-like visual for 3-up article cards */
.card-grid-3 .a-card {
  position: relative;
  min-height: 360px;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  color: #fff;
}
.card-grid-3 .a-card:hover { color: #fff; }
.card-grid-3 .a-card .img-wrap {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-radius: 0;
}
.card-grid-3 .a-card .img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.card-grid-3 .a-card .img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.36) 52%, rgba(0,0,0,.08) 100%);
}
.card-grid-3 .a-card .img-wrap + .body {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 14px 20px 20px;
  background: transparent;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
}
.card-grid-3 .a-card .img-wrap + .body .cat {
  display: inline-flex;
  width: fit-content;
  background: var(--voom-red);
  border-radius: 10px;
  padding: 3px 10px;
  color: #fff;
  align-self: flex-start;
}
.card-grid-3 .a-card .img-wrap + .body h3 {
  color: #fff;
  font-size: 20px;
  line-height: 1.3;
}
.card-grid-3 .a-card:hover .img-wrap + .body h3 { color: #fff; }
.card-grid-3 .a-card .img-wrap + .body .deck {
  color: rgba(255,255,255,.86);
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-grid-3 .a-card .img-wrap + .body .meta {
  color: rgba(255,255,255,.88);
  border-top: 1px solid rgba(255,255,255,.3);
  padding-top: var(--s-3);
}
.card-grid-3 .a-card .img-wrap + .body .meta .author { color: #fff; }

/* Compact card variant — same fonts, tighter padding */
.a-card.a-card-compact h3 { font-size: 20px; line-height: 1.22; }
.a-card.a-card-compact .body { padding: var(--s-3) var(--s-4) var(--s-4); gap: var(--s-2); }
.a-card.a-card-compact .img-wrap { aspect-ratio: 16/10; }
.a-card.a-card-compact .cat { font-size: 20px; }
.a-card.a-card-compact .meta { font-size: 20px; }

/* Hero compact spacing */
.home-secondary { padding-top: var(--s-7); padding-bottom: var(--s-8); }
.home-hero-wrap { padding-top: var(--s-7); }
.hero-compact .hero-img { aspect-ratio: 16/11; }
.hero-img{ border-radius: 16px; }
.hero-link { display: block; color: inherit; }
.hero-link:hover { color: inherit; }
.hero-link:hover h1 { color: var(--voom-red); transition: color .25s; }

/* ===== Homepage head — 1 hero + 3 stacked overlay cards ===== */
.home-head { padding-top: 20px; padding-bottom: var(--s-8); }
/* Rows are sized by the small cards' own aspect ratio, not by the viewport.
   A vh-driven height made the card ratio change with the window, so the 14:5
   crop the editor picks got re-cropped by object-fit at every other height. */
/* 7:6 rather than 1:1 — at the 1380px wrap that leaves the three small cards
   at the 598px they had under the old 1280px one, so the width the wrap gained
   goes to the hero alone and the small cards' 14:5 crop still fits exactly. */
.head-grid {
  display: grid;
  grid-template-columns: 7fr 6fr;
  grid-auto-rows: auto;
  gap: var(--s-5);
}
.head-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 16px;
  background: #000;
  color: #fff;
}
.head-card:hover { color: #fff; }
.head-card .img-wrap { position: absolute; inset: 0; }
/* <picture> must not sit between the wrap and the img as a sizing box. */
.head-card .img-wrap picture { display: contents; }
.head-card .img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.head-card:hover .img-wrap img { transform: scale(1.04); }
.head-card .img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.86) 0%, rgba(0,0,0,.42) 45%, rgba(0,0,0,.06) 100%);
}
.head-card .head-body {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-5) var(--s-5);
}
.head-card .head-badge {
  align-self: flex-start;
  width: fit-content;
  background: var(--voom-red);
  color: #fff;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .04em;
  line-height: 1.35;
  padding: 4px 11px;
  border-radius: 4px;
}
.head-card .head-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
}
.head-card:hover .head-title { color: #fff; }

.head-card-hero {
  grid-column: 1;
  grid-row: 1 / span 3;
}
.head-card-hero .head-title { font-size: clamp(26px, 2.4vw, 38px); }

/* Matches the `banner` crop the article form offers — keep the two in sync. */
.head-card-sm { min-height: 0; aspect-ratio: 14 / 5; }
.head-card-sm .head-title { font-size: clamp(18px, 1.5vw, 24px); }
.card-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7); }
.card-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); }

/* ===== Card · B: Feature horizontal ===== */
.a-card-feature {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--s-7);
  background: transparent;
  align-items: center;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: var(--s-6) 0 var(--s-7);
}
.a-card-feature:hover { color: var(--ink); }
.a-card-feature .img-wrap {
  order: 2;
  aspect-ratio: 16/11;
  overflow: hidden;
  background: var(--hair);
  border-radius: 16px;
}
.a-card-feature .img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.a-card-feature .body {
  order: 1;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
[dir="rtl"] .a-card-feature .body { padding: 0; }
.a-card-feature .cat {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--voom-red);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.a-card-feature .cat::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--voom-red);
}
.a-card-feature h3 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0;
}
.a-card-feature:hover h3 { color: var(--voom-red); transition: color .25s; }
.a-card-feature .deck {
  font-family: var(--display);
  font-style: normal;
  font-size: clamp(20px, 1.2vw, 22px);
  line-height: 1.5;
  color: var(--ink-2);
}
.a-card-feature .meta-cap {
  margin-top: var(--s-2);
  padding-top: var(--s-3) !important;
  border-top: 1px solid var(--hair);
}

/* ===== Card · C: Cover overlay ===== */
.a-card-overlay {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  color: #fff;
  display: block;
}
.a-card-overlay:hover { color: #fff; }
.a-card-overlay .img-wrap { position: absolute; inset: 0; }
.a-card-overlay .img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.a-card-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26,20,16,.85) 0%, rgba(26,20,16,.35) 45%, transparent 70%);
}
.a-card-overlay .overlay-content {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--s-7);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.a-card-overlay .cat {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  opacity: .9;
}
.a-card-overlay h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.15;
  color: #fff;
  margin: 0;
}

/* ===== Card · D: Numbered text only ===== */
.a-card-text {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-7) 0;
  border-top: 1px solid var(--ink);
  color: var(--ink);
}
.a-card-text:hover { color: var(--ink); }
.a-card-text .num {
  font-family: var(--display);
  font-weight: 900;
  font-size: 56px;
  line-height: .9;
  color: var(--voom-red);
}
.a-card-text .cat-line {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.a-card-text h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
}
.a-card-text:hover h3 { color: var(--voom-red); }
.a-card-text .deck {
  font-family: var(--display);
  font-style: normal;
  font-size: 20px;
  color: var(--ink-3);
}
.a-card-text .meta {
  font-family: var(--sans);
  font-size: 20px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* ===== Mini card (row) ===== */
.a-card-mini {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  color: var(--ink);
}
.a-card-mini .img {
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
  background-color: var(--hair);
}
.a-card-mini .body { display: flex; flex-direction: column; gap: var(--s-2); }
.a-card-mini .cat {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--voom-red);
}
.a-card-mini h4 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.18;
  color: var(--ink);
  margin: 0;
}
.a-card-mini:hover h4 { color: var(--voom-red); }
.a-card-mini .deck {
  font-family: var(--display);
  font-style: normal;
  font-size: 20px;
  color: var(--ink-3);
}
.a-card-mini .meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--sans);
  font-size: 20px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--hair);
}

/* ===== Section head ===== */
.section-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-5);
  align-items: baseline;
  padding: var(--s-8) 0 var(--s-4);
  border-bottom: 1px solid var(--ink);
  margin-bottom: var(--s-6);
}
.section-head .num {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .16em;
  color: var(--voom-red);
}
.section-head h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0;
}
.section-head .more {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}
.section-head .more:hover { color: var(--voom-red); }

/* ===== Chapter header (used in landing/about pages) ===== */
.chapter {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-5);
  align-items: baseline;
  padding-top: var(--s-10);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--ink);
}
.chapter-no {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .18em;
  color: var(--voom-red);
}
.chapter h2 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(40px, 6vw, 64px);
  line-height: .98;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0;
}
.chapter-side {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.chapter-deck {
  font-family: var(--display);
  font-style: normal;
  font-size: clamp(20px, 1.8vw, 22px);
  line-height: 1.45;
  color: var(--ink-2);
  margin: var(--s-5) 0 var(--s-9);
  max-width: 70ch;
}

/* ===== Hero (Refined) ===== */
.hero-refined {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-7);
  align-items: center;
  padding: var(--s-6) 0 var(--s-7);
  border-bottom: 1px solid var(--ink);
  margin-top:var(--s-8);
}
.hero-refined .hero-text { display: flex; flex-direction: column; gap: var(--s-3); }
.hero-refined .eyebrow-line {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--voom-red);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.hero-refined .eyebrow-line::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--voom-red);
}
.hero-refined h1 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0;
}
.hero-refined h1 em { font-style: normal; color: var(--voom-red); font-weight: 700; }
.hero-refined .deck {
  font-family: var(--display);
  font-style: normal;
  font-size: clamp(20px, 1.2vw, 22px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 52ch;
}
.hero-refined .meta-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--sans);
  font-size: 20px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--hair);
}
.hero-refined .meta-row .author { color: var(--ink); font-weight: 600; }
.hero-refined .hero-img {
  aspect-ratio: 16/11;
  background-size: cover;
  background-position: center;
  background-color: var(--hair);
}
.hero-refined .hero-img img { width: 100%; height: 100%; object-fit: cover; }

/* ===== Article page ===== */
.article-page { background: var(--paper); }
.article-head {
  padding: var(--s-9) 0 var(--s-7);
  max-width: 920px;
  margin: var(--s-8) auto 0;
  text-align: center;
}
.breadcrumb {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  margin-bottom: 10px;
  margin-top: var(--s-4);
}
.breadcrumb a { color: var(--ink-3); }
.breadcrumb a:hover { color: var(--voom-red); }
.breadcrumb .sep { font-size: 0; }
.breadcrumb .sep::before { content: ">"; font-size: 14px; color: var(--mute); }
.category-line {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--voom-red);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.category-line::before{
  content: '';
  width: 26px;
  height: 1px;
  background: color-mix(in srgb, var(--voom-red) 30%, transparent);
  margin-top: var(--s-2);
}
.article-head h1 {
  font-family: var(--display);
  font-weight: 900;
  text-align: right;
  font-size: clamp(36px, 5.5vw, 47px);
  line-height: .98;
  letter-spacing: -.018em;
  color: var(--ink);
  margin: 0 0 var(--s-5);
}
.article-head .deck {
  font-family: var(--display);
  font-style: normal;
  font-size: clamp(20px, 1.8vw, 22px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 60ch;
  margin: 0 auto !important;
}
.article-byline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  font-family: var(--sans);
  font-size: 20px;
  max-width: 920px;
  margin: var(--s-7) auto 0;
}
.article-byline .byline-l { display: flex; align-items: center; gap: var(--s-3); }
.article-byline .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--voom-red);
}
/* House byline: the site's own initial rather than a writer's photo. A
   wordmark cannot sit in a 40px circle without being cropped to nothing, so
   the letter is drawn directly and the circle keeps the masthead's ink. */
.article-byline .avatar--house {
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  color: #fff;
  text-transform: uppercase;
}
.article-byline .avatar--house img {
  width: 22px;
  height: auto;
  border-radius: 0 !important;
}
.author-info{
  display: flex;
  gap:10px;

}
.article-byline .author-info b { display: block; font-family: var(--sans); font-weight: 600; font-size: 20px; color: var(--ink); }
.article-byline .author-info span { font-size: 18px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); }
.article-byline .actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.article-byline .actions a, .article-byline .actions span {
  width: 32px;
  height: 32px;
  border: 1px solid var(--hair);
  display: grid;
  place-items: center;
  font-size: 20px;
  color: var(--ink);
  transition: border-color .2s, color .2s;
}
.article-byline .actions a:hover { border-color: var(--voom-red); color: var(--voom-red); }

.article-hero-img {
  margin: var(--s-7) auto 0;
  max-width: 1100px;
  aspect-ratio: 16/9;
  background: var(--hair);
  border-radius: 12px;
  overflow: hidden;
}
.article-hero-img img { width: 100%; height: 100%; object-fit: cover; }

/* Imported articles: hero rendered inside the text column, so it follows the
   column width instead of the 1100px full-bleed band. */
.article-content .article-hero-img--inline {
  max-width: 100%;
  margin: 0 0 var(--s-5);
}
.article-content .article-hero-img--inline .article-hero-caption {
  max-width: 100%;
  margin:  0;
  
}
@media (max-width: 900px) {
  .article-content .article-hero-img--inline .article-hero-caption{
    margin:  0;
    font-size: 16px;
  }

}

.article-hero-caption {
  max-width: 1100px;
  margin: var(--s-3) auto 0;
  font-family: var(--display);
  font-style: normal;
  /* The hero is the widest picture on the page, so its credit carries one step
     more than the in-body ones (20px) without reaching body copy at 22px. */
  font-size: 22px;

  color: var(--ink-4);
}

.article-body-grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 60px;
  gap: var(--s-9);
  max-width: 1100px;
  margin: var(--s-10) auto;
  align-items: start;
}
.article-body-grid:has(.article-toc[hidden]) {
  grid-template-columns: minmax(0, 1fr) 60px;
}

/* ===== Article 2/3 + 1/3 layout (content + sidebar) ===== */
.article-layout {
  display: grid;
  /* The aside holds cards of a fixed shape, so it does not need to grow with
     the viewport — at 2fr/1fr it took 384px of a 1216px row and the text column
     paid for every pixel the window gained. Capped, the text column keeps the
     rest (902px at full width) and the aside still shrinks to 220px before the
     layout stacks at 1000px. */
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  gap: var(--s-10);
  max-width: 1280px;
  margin: var(--s-10) auto;
  padding: 0 var(--s-7);
  align-items: start;
}
.article-layout .article-content {
  max-width: none;
  margin: 0;

  @media (max-width: 900px) {
   max-width: 90vw;
    margin: 0 auto;
  }
}
.article-aside {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: var(--s-7);
}
.article-aside-block { display: flex; flex-direction: column; gap: var(--s-4); }
.article-aside h4.aside-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--voom-red);
  margin: 0 0 var(--s-2);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--ink);
}

/* Compact related card for sidebar */
.aside-card {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--hair);
  color: var(--ink);
  width:100%;
}
.aside-card:last-of-type { border-bottom: 0; }
.aside-card .img-wrap {
  aspect-ratio: 4/3;
  border-radius: 4px;
  min-height: 110px;
  max-height: 130px;
  overflow: hidden;
  background: var(--hair);
  border-radius: 16px;
} 
.aside-card .img-wrap img { width: 100%; height: 100%; object-fit: cover; }
/* In the desktop sidebar the card has 280px to work with, and a thumb beside
   the headline left it wrapping one or two words per line. Stacked, the picture
   takes the full column and the headline gets all of it. Scoped above the
   stacking breakpoint on purpose: below it the aside runs the full page width,
   where a picture per card at that width would be enormous — there the thumb
   stays beside the text. Placed after the base rules, since a media query adds
   no specificity and would otherwise lose to them. */
@media (min-width: 1001px) {
  .aside-card {
    grid-template-columns: 1fr;
    /* Picture and headline read as one unit stacked, so the row gap and the
       padding around the card both come down — at the side-by-side values the
       headline floated away from its own picture. */
    gap: var(--s-2);
    padding: var(--s-3) 0;
  }
  .aside-card .img-wrap {
    aspect-ratio: 16/10;
    min-height: 0;
    max-height: none;
  }
  /* Pushed the date to the bottom of a body that was as tall as the thumb next
     to it. Stacked there is no thumb to match, so it only opens a gap. */
  .aside-card .meta { margin-top: 0; }
}
.aside-card .body { display: flex; flex-direction: column; gap: 4px; }
.aside-card .cat {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--voom-red);
}
.aside-card h4 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
}
.aside-card:hover h4 { color: var(--voom-red); }
.aside-card .meta {
  font-family: var(--sans);
  font-size: 20px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-top: auto;
}

/* TOC standalone block */
.article-toc-block {
  background: var(--cream);
  padding: var(--s-6) var(--s-6);
}
.article-toc-block h4.aside-title { color: var(--voom-red); border-bottom-color: var(--ink-3); }
.article-toc-block ol {
  list-style: none;
  counter-reset: toc2;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.article-toc-block ol li {
  counter-increment: toc2;
  font-family: var(--display);
  font-size: 20px;
  line-height: 1.4;
  padding-inline-start: 32px;
  position: relative;
}
.article-toc-block ol li::before {
  content: counter(toc2, decimal-leading-zero);
  position: absolute;
  inset-inline-start: 0;
  top: 1px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 20px;
  color: var(--voom-red);
  letter-spacing: .08em;
}
.article-toc-block a { color: var(--ink-2); }
.article-toc-block a:hover { color: var(--voom-red); }

#article_page h2{
  font-size: 24px !important;
}
/* Tableau (more articles wide grid) */
.article-tableau { background: var(--cream); padding: var(--s-11) 0; margin-top: var(--s-11); }
.article-tableau .section-head { border-bottom-color: var(--ink); align-items:end; gap:5px;}

/* Newsletter mini block in sidebar */
.aside-newsletter {
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-6);
  border-radius: 12px;
  width: 100%;
}
@media (max-width: 900px) {
  .aside-newsletter { width:90%; margin: 0 auto;  }
}
.aside-newsletter h4 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.15;
  margin: 0 0 var(--s-3);
  color: var(--paper);
}
.aside-newsletter p {
  font-family: var(--display);
  font-style: normal;
  font-size: 20px;
  color: rgba(250,248,244,.75);
  margin: 0 0 var(--s-4);
}
.aside-newsletter form { display: flex; border-bottom: 1px solid rgba(250,248,244,.4); }
.aside-newsletter input {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 8px 0;
  color: var(--paper);
  font-size: 20px;
  outline: none;
}
.aside-newsletter input::placeholder { color: rgba(250,248,244,.55); }
.aside-newsletter button {
  background: transparent;
  border: 0;
  color: var(--voom-red-soft);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0 var(--s-2);
}
.aside-newsletter button:hover { color: #fff; }
/* The sidebar's own contents rail — scoped to the aside on purpose. Unscoped it
   also caught the table of contents inside an imported article body, which
   shares the class name, and pinned a mid-article box to the viewport. */
aside .article-toc {
  position: sticky;
  top: 96px;
  padding-top: var(--s-4);
  border-top: 1px solid var(--ink);
}
.article-toc h5 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--voom-red);
  margin: 0 0 var(--s-4);
}
.article-toc ol {
  list-style: none;
  counter-reset: toc;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.article-toc ol li {
  counter-increment: toc;
  font-family: var(--display);
  font-size: 20px;
  line-height: 1.4;
  color: var(--ink-2);
  padding-inline-start: 28px;
  position: relative;
}
.article-toc ol li::before {
  content: counter(toc, decimal-leading-zero);
  position: absolute;
  inset-inline-start: 0;
  top: 2px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 20px;
  color: var(--voom-red);
  letter-spacing: .08em;
}
.article-toc a { color: var(--ink-2); }
.article-toc a:hover { color: var(--voom-red); }

.article-content { max-width: 68ch; margin: 0 auto; }
.article-content p {
  font-family: var(--sans);
  font-size: 24px;
  line-height: 1.85;
  color: var(--ink-2);
  margin: 0 0 var(--s-7);
}
/* A deliberate blank line. The editor writes it as <p><br></p>, but the content
   is round-tripped through DOMDocument on save (normalize_rich_content_media_urls)
   and a <p></p> that came back without its <br> would collapse to nothing but
   its margin — so both shapes are held open to a full line. */
.article-content p:empty,
.article-content p:has(> br:only-child) {
  min-height: .9em;
}
/* Every blank line, whatever shape it arrived in, is normalised to this on
   render. It is known to hold no text, so the line height can be cut without
   any risk of squashing a real paragraph. */
.article-content p.blank-line {
  min-height: 0;
  line-height: .9;
  margin: 0;
}
/* Legacy content saved before serializeForSave() normalised them: the editor
   treats DIV as a block format too, so older articles hold their lines in bare
   <div>s. Same rhythm as <p>, but only for class-less direct children — the
   image-block / benefits-box / lead-form / embed wrappers keep their own. */
.article-content > div:not([class]) {
  font-family: var(--sans);
  font-size: 22px;
  line-height: 1.85;
  color: var(--ink-2);
  margin: 0 0 var(--s-7);
}
.article-content > div:not([class]):empty,
.article-content > div:not([class]):has(> br:only-child) {
  min-height: .9em;
}
.article-content h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.15;
  color: var(--ink);
  margin: var(--s-9) 0 var(--s-5);
}
.article-content h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.2;
  color: var(--ink);
  margin: var(--s-8) 0 var(--s-4);
}
/* Links carry no forced underline of their own — the editor's underline button
   wraps the text in <u> (Quill nests link outside every other inline format, so
   it is always <a><u><span style="color:…">), and a text-decoration hard-coded
   on the <a> cannot be undone from a descendant. Letting <u> drive it is what
   makes the underline button work on links. */
.article-content a { color: var(--voom-red); text-decoration: none; text-underline-offset: 3px; }
.article-content a u { text-decoration: underline; text-underline-offset: 3px; }
/* Quotes in the body share the sidebar highlight's look (.article-highlight-block
   below): rules above and below, no side rule, and an oversized quote mark
   watermarked into the corner. `isolation` keeps the z-index:-1 glyph behind the
   text but in front of the box's own background — the quote's text is usually a
   bare text node, so it cannot be lifted with z-index of its own. */
/* ===== Imported Elementor blocks =====
   Callout heading, tick list and CTA button, rebuilt to look like the source.
   Inline color / border-color / background-color come from the editor's own
   settings and override the fallbacks here. */
/* Transparent by default so a callout that came across with only a fill (the
   white-on-purple banner) doesn't also grow an outline — the imported
   border-color, when there is one, paints over this. */
.article-content .el-boxed {
  border: 2px solid transparent;
  padding: var(--s-4) var(--s-5);
  margin: var(--s-8) 0;
  text-align: center;
  font-size: clamp(22px, 2.2vw, 28px);
}
.article-content div.el-boxed > :first-child { margin-top: 0; }
.article-content div.el-boxed > :last-child  { margin-bottom: 0; }
.article-content div.el-boxed p { font-size: inherit; font-weight: 700; color: inherit; }
/* Imported promo blocks were set in the source's sans, not the site's display
   serif — in the serif they read as a different colour entirely. */
.article-content .el-boxed  :is(h1, h2, h3, h4, p),
.article-content .el-section :is(h1, h2, h3, h4) {
  font-family: var(--sans);
  /* The source set these with a plain <b>, so 700 — 800 read as a heavier,
     darker block than the original. */
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}
.article-content .el-boxed :is(h1, h2, h3, h4) { font-size: clamp(24px, 2.4vw, 32px); }

/* An Elementor section that carried its own fill — the promo blocks. */
.article-content .el-section {
  padding: var(--s-6) var(--s-5);
  margin: var(--s-8) 0;
  border-radius: 8px;
}
.article-content .el-section > :first-child { margin-top: 0; }
.article-content .el-section > :last-child  { margin-bottom: 0; }
/* A form imported under its own heading box carried three separate gaps at
   once — the box's bottom margin, the normalised blank line between them, and
   the wrap's own top margin — about 75px where the source has the two almost
   touching. The box and the form are one unit; they close up. */
.article-content .el-boxed:has(+ .lf-wrap),
.article-content .el-boxed:has(+ p.blank-line + .lf-wrap) { margin-bottom: 0; }
.article-content p.blank-line:has(+ .lf-wrap) { display: none; }
.article-content .lf-wrap--transparent { margin: 8px 0; }

.article-content ul.el-checklist {
  list-style: none;
  padding: 0;
  margin: var(--s-6) 0;
}
.article-content ul.el-checklist > li {
  /* The generic `.article-content ul li { list-style: disc }` further down would
     otherwise draw a bullet next to the tick. */
  list-style: none;
  position: relative;
  padding-inline-start: 52px;
  margin-bottom: var(--s-5);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.55;
}
.article-content ul.el-checklist > li::before {
  content: '✓';
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  /* Black rather than currentColor: the imported list often carries a colour of
     its own, and the tick inherited it. The mark is chrome, not copy — it stays
     the same in every article while the text keeps whatever colour it had.
     Overridable per list with style="--tick-color: #hex" on the <ul>. */
  color: var(--tick-color, #000);
  border: 2.5px solid var(--tick-color, #000);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  line-height: 1;
}
.article-content a.el-cta {
  /* Elementor renders a button at its content's width and lets the paragraph
     centre it. A full-width bar was the site's own default and it turned every
     imported CTA into the same black band, whatever the source drew. */
  display: inline-block;
  background: #000;
  color: #fff;
  text-align: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 28px);
  padding: var(--s-5) var(--s-4);
  margin: var(--s-8) 0;
  text-decoration: none;
  transition: opacity .2s ease;
}
/* The fill arrives inline from Elementor, so a hover that names its own colour
   would have to !important its way past it — and would then flatten every
   button to the same shade whatever the source chose. Darkening the element
   instead keeps each button its own colour and needs no per-article rule, and
   works whether the fill is a background-color or the highlight-scroll
   animation's background-image. */
.article-content a.el-cta {
  transition: filter .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
/* ===== Imported column layout =====
   A section the source laid out side by side — copy in one column, a picture
   in the next. The importer keeps each column's own width from the source, so
   a 30/70 split stays a 30/70 split; the flex value carries it. Below the
   breakpoint the columns stack, which is what the source does on a phone.
   Not written as .row: the site's own .row sets a gap and centres its items,
   and an imported block must not inherit either. */
.article-content .el-cols {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin: var(--s-6) 0;
}
.article-content .el-col {
  /* flex-basis 0 with min-width 0 so a long word cannot push a column wider
     than its share; the flex-grow value is the source's column percentage. */
  flex: 1 1 0;
  min-width: 0;
}
.article-content .el-col > :first-child { margin-top: 0; }
.article-content .el-col > :last-child { margin-bottom: 0; }
@media (max-width: 700px) {
  .article-content .el-cols { display: block; }
  .article-content .el-col + .el-col { margin-top: var(--s-5); }
}

/* The button is inline now, so the paragraph around it does the centring. */
.article-content p:has(> a.el-cta) { text-align: center; }
.article-content a.el-cta:hover {
  filter: brightness(.85);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .28);
  transform: translateY(-1px);
}
.article-content a.el-cta:hover,
.article-content a.el-cta:hover * { text-decoration: none; }
/* A button the source gave its own hover pair — typically a white box with a
   black frame that inverts under the cursor. The generic hover only dimmed the
   fill, which on a white button read as a fault rather than a state.
   !important because the resting colours are inline, and inline beats any
   selector; the variables are inline too, so each button inverts to its own
   colours rather than to a shared pair. */
.article-content a.el-cta--invert:hover {
  background-color: var(--cta-hover-bg, #000) !important;
  color: var(--cta-hover-fg, #fff) !important;
  border-color: var(--cta-hover-bg, #000) !important;
  filter: none;
}
/* Nothing is cleared on hover any more: some CTAs are filled by the
   highlight-scroll animation rather than by a background-color, and blanking
   background-image wiped exactly those to transparent. */
/* The label inherits the button's own colour rather than the source's span. */
.article-content a.el-cta * { color: inherit; background: none; }

/* A promo block pulled in from a saved Elementor template: product picture,
   heading and CTA on a coloured card. The colour arrives inline from the
   template's own container; everything else is set here so the block reads as
   one unit rather than three stray pieces of body copy. */
.article-content .el-promo {
  margin: var(--s-8) 0;
  padding: var(--s-6);
  border-radius: 14px;
  text-align: center;
}
.article-content .el-promo img {
  max-width: 320px;
  width: 100%;
  height: auto;
  margin: 0 auto var(--s-4);
  display: block;
}
/* The headline is the creative here, not body copy — at body size the card
   read as a caption under a picture. */
.article-content .el-promo h2,
.article-content .el-promo h3 {
  margin: 0 0 var(--s-4);
  text-align: center;
  font-size: clamp(28px, 4.5vw, 46px);
  line-height: 1.15;
}
.article-content .el-promo h2 a,
.article-content .el-promo h3 a { color: inherit; text-decoration: none; }
.article-content .el-promo a.el-cta { margin: 0; }

/* Imported data tables — the house treatment for bodies that carry no styling
   of their own. Skipped for table.table: the source marks those with
   Bootstrap's own class and ships a template that paints them, so the red
   header bar, black frame and cream banding here would all be wrong. */
.article-content table:not(.table) {
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #000;
  border-radius: 12px;
  overflow: hidden;
  margin: var(--s-6) 0;
  font-size: 19px;
}
.article-content table:not(.table) th,
.article-content table:not(.table) td {
  border: 0;
  border-bottom: 1px solid #000;
  border-inline-start: 1px solid #000;
  padding: 15px;
  text-align: start;
  vertical-align: top;
}
.article-content table:not(.table) th:first-child,
.article-content table:not(.table) td:first-child { border-inline-start: 0; }
.article-content table:not(.table) tr:last-child > th,
.article-content table:not(.table) tr:last-child > td { border-bottom: 0; }
.article-content table:not(.table) thead th,
.article-content table:not(.table) tr:first-child th {
  background: #e31e24;
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
}
.article-content table:not(.table) tbody tr:nth-child(even) { background: #faf8f6; }
/* Row highlight on hover. The header row carries its own inline background from
   the source, so it is left alone and only body rows react. */
.article-content table:not(.table) tbody tr { transition: background-color .15s ease; }
.article-content table:not(.table) tbody tr:hover { background: #fdeaea; }

/* FAQ accordion, imported from Elementor's toggle widget. Native <details>, so
   it opens without any JS and the answers stay in the page for search engines. */
.article-content details.el-faq {
  border: 1px solid var(--voom-red);
  background: #000;
  margin-bottom: var(--s-3);
}
.article-content details.el-faq > summary {
  cursor: pointer;
  list-style: none;
  padding: var(--s-4) var(--s-5);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 21px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.article-content details.el-faq > summary::-webkit-details-marker { display: none; }
.article-content details.el-faq > summary::after {
  content: '◀';
  margin-inline-start: auto;
  font-size: 15px;
  transition: transform .2s ease;
}
.article-content details.el-faq[open] > summary::after { transform: rotate(-90deg); }
.article-content details.el-faq > :not(summary) {
  background: #fff;
  color: var(--ink);
  margin: 0;
  padding: var(--s-4) var(--s-5);
}

/* A blank line the writer added is <p><br></p> — it has a child, so it is not
   :empty, and the <br> already gives it a line of height. What :empty does
   match is the structural leftovers the import leaves between blocks; those
   carry the body margin and opened a gap after tables and around credits.
   Collapse them, minus the slider controls, which are empty by design. */
.article-content p:empty,
.article-content div:empty:not([class*="swiper"]) { display: none; }

/* A credit written in the editor sits in a body block of its own, so it took
   the full paragraph line-height and rhythm even though its text is small —
   which opened a gap between the picture and its own caption. Tie the block
   that directly follows a picture back to it. */
.article-content .article-hero-img + div,
.article-content figure + div {
  margin-top: 0;
  line-height: 1.4;
}
/* A credit typed as "Small" in the editor is 0.75em of 22px body copy — the
   same too-small note as figcaption, so lift it to match. Scoped to the block
   that follows a picture, so ordinary small text elsewhere is untouched. */
.article-content .article-hero-img + div .ql-size-small,
.article-content figure + div .ql-size-small { line-height: 1.4; font-size: 20px; }
.article-content .article-hero-img--inline { margin-bottom: 8px; }

/* Photo credit / caption carried over from WP's [caption] shortcode. */
.article-content figure { margin: var(--s-6) 0; }
.article-content figure img { margin: 0; }
.article-content figcaption {
  font-family: var(--sans);
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink-3, #6b6b6b);
  text-align: start;
  padding-top: 6px;
}
/* Mid-body Taboola unit, imported in place of the old theme's [taboola-mid]. */
.article-content .taboola-inline { margin: var(--s-8) 0; clear: both; }
/* The source's own article CSS, re-stated here. Newer posts ship a <style>
   block naming these classes; the block is not imported, so without this the
   accent bars, the red table header and the FAQ chrome all vanish. */
.article-content .vooom-h2,
.article-content .vooom-h3 {
  border-right: 6px solid #e31e24;
  padding-right: 15px;
  font-weight: 700;
  color: #000;
}
.article-content .vooom-h2 { font-size: clamp(30px, 3vw, 40px); margin: var(--s-9) 0 var(--s-5); }
.article-content .vooom-h3 { font-size: clamp(26px, 2.6vw, 34px); margin: var(--s-8) 0 var(--s-4); }
/* Scroll box only — the frame the source drew around it read as a stray
   rectangle next to our own table borders. */
.article-content .vooom-table-container {
  margin: var(--s-8) 0;
  overflow-x: auto;
}
/* .vooom-table used to be stripped back to row rules only, to match the one
   source template that drew it that way. That made tables look different from
   one article to the next, so it now follows the shared table style above and
   only names the header colour. */
.article-content .vooom-table th { background-color: #e31e24; color: #fff; }
.article-content .vooom-faq { margin-top: var(--s-9); }
.article-content .vooom-article > :first-child { margin-top: 0; }
/* The source splits a body into many .vooom-article wrappers, one per run of
   paragraphs, with headings and tables between them. A vertical margin on the
   wrapper therefore lands between almost every block and stacks on top of the
   paragraph rhythm. The wrapper carries typography only; spacing belongs to
   the elements inside it. */
.article-content .vooom-article { margin: 0; }
.article-content .quote-source {
  display: block;
  margin-top: 10px;
  font-size: 20px;
  font-weight: 700;
  font-style: normal;
  color: var(--ink-4);
}

/* Imported headings carry the source's accent bar as a side border but not the
   padding that held it off the text, so the words sat on the bar. */
.article-content :is(h1, h2, h3, h4, h5, h6)[style*="border-right"] { padding-right: 16px; }
.article-content :is(h1, h2, h3, h4, h5, h6)[style*="border-left"]  { padding-left: 16px; }

/* A rule sits between two sections, so it needs air on both sides — a heading
   following one used to butt straight up against it. */
.article-content hr { border: 0; border-top: 1px solid var(--hair); margin: var(--s-8) 0; }
.article-content hr + h1,
.article-content hr + h2,
.article-content hr + h3,
.article-content hr + h4,
.article-content hr + p { margin-top: var(--s-7); }
.article-content blockquote, .article-content .pull, .article-content .highlight-box {
  position: relative;
  isolation: isolate;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow: hidden;
  background: transparent;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 700;
  font-size: 21px;
  line-height: 1.65;
  color: var(--ink);
  border: none;
  border-right: 3px solid var(--voom-red);
  border-left: 3px solid var(--voom-red);
  padding: var(--s-5) var(--s-4);
  margin: var(--s-8) 0;
  min-height: 150px;
  text-align: start;
}
.article-content blockquote::before,
.article-content .pull::before,
.article-content .highlight-box::before {
  content: '\201C';
  position: absolute;
  z-index: -1;
  /* Rotation lives in `transform` alongside the centring translate: as a
     standalone `rotate` property it would compose first and send translateY
     the wrong way. */
  top: 0%;
  right: 10px;
  transform: translateY(-50%) rotate(180deg);
  max-height: fit-content;
  font-family: Georgia, serif;
  font-size: 250px;
  font-weight: 900;
  line-height: 1;
  color: var(--voom-red);
  opacity: 0.12;
  pointer-events: none;
}
/* Quill emits one <blockquote> per line rather than merging a multi-line quote,
   so a run of them is closed up into a single box carrying a single glyph. */
.article-content blockquote:has(+ blockquote) {
  margin-bottom: 0;
  padding-bottom: 0;
  min-height: 0;
}
.article-content blockquote + blockquote {
  margin-top: 0;
  padding-top: 0;
  min-height: 0;
}
.article-content blockquote + blockquote::before { content: none; }
.article-content .highlight-box .author {
  display: block;
  font-style: normal;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-top: var(--s-4);
}
.article-content .benefits-box {
  --bb-title-bg: var(--voom-red);
  --bb-title-color: #fff;
  --bb-check: var(--voom-red);
  --bb-bg: #fff;
  margin: var(--s-8) 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--bb-bg);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.article-content .benefits-box-title {
  background: var(--bb-title-bg);
  color: var(--bb-title-color);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 24px);
  text-align: center;
  padding: var(--s-4) var(--s-5);
}
.article-content .benefits-box-list {
  list-style: none;
  margin: 0;
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.article-content .benefits-box-item {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  font-family: var(--sans);
  font-size: 21px;
  line-height: 1.4;
  color: var(--ink-2);
}
.article-content .benefits-box-check {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bb-check);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 700;
  box-sizing: border-box;
}
.article-content .benefits-box--outline .benefits-box-check {
  background: transparent;
  border: 2px solid var(--bb-check);
  color: var(--bb-check);
}
.article-content .benefits-box--no-bg {
  background: transparent;
  box-shadow: none;
}
.article-content .image-block {
  margin: var(--s-8) 0;
  background: var(--hair);
  aspect-ratio: 16/9;
  position: relative;
}
.article-content .image-block img { width: 100%; height: 100%; object-fit: cover; }
.article-content .caption,
.article-content .image-block .caption {
  font-family: var(--display);
  font-style: normal;
  font-size: 22px;
  color: var(--ink-4);
  margin-top: var(--s-3);
}
.article-content ul, .article-content ol {
  margin: 0 0 var(--s-6);
  padding-inline-start: var(--s-7);
  font-size: 22px;
  line-height: 1.85;
  color: var(--ink-2);
}
.article-content ul li, .article-content ol li { margin-bottom: var(--s-3); }
.article-content ul li { list-style: disc; }
.article-content ol li { list-style: decimal; }
/* Body images keep the proportions they were uploaded with. A forced 16/9 box
   with object-fit:cover cropped every tall or square imported photo. */
.article-content img { width: 100%; max-width: 100%; height: auto; margin: 10px 0; object-fit: contain; border-radius: 8px; }
.article-content .project-name {
  font-family: var(--display);
  font-style: normal;
  font-size: 22px;
  color: var(--ink-4);
  text-align: center;
  margin-top: var(--s-3);
}
.article-content .section { margin: var(--s-9) 0; }

.share-rail {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--ink);
}
.share-rail .label {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .18em;
  color: var(--voom-red);
  writing-mode: vertical-rl;
  margin-bottom: var(--s-3);
}
.share-rail a, .share-rail .btn-c {
  width: 38px;
  height: 38px;
  border: 1px solid var(--hair);
  display: grid;
  place-items: center;
  color: var(--ink);
  font-size: 20px;
  transition: border-color .2s, color .2s;
}
.share-rail a:hover, .share-rail .btn-c:hover { border-color: var(--voom-red); color: var(--voom-red); }

.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-6) 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  margin: var(--s-7) 0;
}
.article-tags .tags-label {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-inline-end: var(--s-2);
}
.article-tags a {
  font-family: var(--sans);
  font-size: 20px;
  color: var(--ink-3);
  padding: 4px 0;
}
.article-tags a::before { content: '#'; color: var(--voom-red); font-weight: 700; margin-inline-end: 2px; }
.article-tags a:hover { color: var(--voom-red); }

.article-share-bottom {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-6) 0;
}
.article-share-bottom .actions{
  display:flex;
  gap: var(--s-3);
}
.article-share-bottom .social-text {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}
.article-share-bottom .icon {
  width: 36px;
  height: 36px;
  border: 1px solid var(--hair);
  display: grid;
  place-items: center;
  color: var(--ink);
  transition: border-color .2s, color .2s;
}
.article-share-bottom .icon:hover { border-color: var(--voom-red); color: var(--voom-red); }
.article-share-bottom .icon svg { width: 18px; height: 18px; }
.article-share-bottom .icon svg path { fill: currentColor; }

/* ===== Footer ===== */
.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-11) 0 var(--s-7);
  margin-top: var(--s-12);
}
.footer-top {
  display: grid;
  /* 3 columns while the newsletter block is commented out in public.tpl.
     Restore `1.4fr 1fr 1fr 1.2fr` when it comes back. */
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--s-9);
  padding-bottom: var(--s-9);
  border-bottom: 1px solid rgba(250,248,244,.15);
}
.footer-brand img, .footer-brand svg { height: 48px; width: auto; filter: brightness(0) invert(1); margin-bottom: var(--s-4); }
.footer-brand p {
  font-family: var(--display);
  font-style: normal;
  font-size: 20px;
  line-height: 1.55;
  color: rgba(250,248,244,.75);
  max-width: 36ch;
}
.site-footer h5 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--voom-red-soft);
  margin: 0 0 var(--s-5);
}
.site-footer ul { display: flex; flex-direction: column; gap: var(--s-3); }
.site-footer ul a {
  font-family: var(--sans);
  font-size: 20px;
  color: rgba(250,248,244,.85);
  transition: color .2s;
}
.site-footer ul a:hover { color: var(--voom-red-soft); }
.footer-newsletter {
  display: flex;
  margin-top: var(--s-4);
  border-bottom: 1px solid rgba(250,248,244,.4);
}
.footer-newsletter input {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 10px 0;
  color: var(--paper);
  font-size: 20px;
  outline: none;
}
.footer-newsletter input::placeholder { color: rgba(250,248,244,.55); }
.footer-newsletter button {
  background: transparent;
  border: 0;
  color: var(--voom-red-soft);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 0 var(--s-3);
  cursor: pointer;
}
.footer-newsletter button:hover { color: #fff; }
.footer-bot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--s-6);
  font-family: var(--sans);
  font-size: 20px;
  letter-spacing: .04em;
  color: rgba(250,248,244,.5);
  flex-wrap: wrap;
  gap: var(--s-4);
}
.footer-bot .socials { display: flex; gap: var(--s-3); }
.footer-bot .socials a {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(250,248,244,.25);
  display: grid;
  place-items: center;
  color: rgba(250,248,244,.85);
  transition: border-color .2s, color .2s;
}
.footer-bot .socials a:hover { border-color: var(--voom-red-soft); color: var(--voom-red-soft); }
.footer-bot .socials a svg { width: 16px; height: 16px; }

/* ===== Search popup ===== */
.search-popup {
  position: fixed;
  inset: 0;
  z-index: 800;
  display: none;
}
.search-popup.active { display: block; }
.search-popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26,20,16,.55);
  backdrop-filter: blur(2px);
}
.search-popup-content {
  position: relative;
  background: #fff;
  max-width: 600px;
  margin: 8vh auto 0;
  padding: var(--s-6) var(--s-7) var(--s-6);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
}
.search-popup-close {
  position: absolute;
  top: var(--s-4);
  inset-inline-end: var(--s-4);
  width: 32px;
  height: 32px;
  background: var(--hair);
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink-3);
  cursor: pointer;
}
.search-popup-close:hover { background: var(--hair-soft); color: var(--ink); }
.search-popup-input-wrap {
  border-bottom: 2px solid var(--hair);
  padding-bottom: var(--s-3);
  margin: var(--s-4) 0;
}
.search-popup-input-wrap form {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 100%;
}
.search-popup-input-wrap input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  direction: rtl;
  text-align: right;
}
.search-popup-input-wrap input::placeholder { color: var(--mute); font-style: normal; }
.search-popup-suggestions {
  display: flex;
  flex-direction: column;
  max-height: 55vh;
  overflow-y: auto;
}
.search-sug-item {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--hair);
  align-items: center;
  text-decoration: none;
}
.search-sug-item:last-of-type { border-bottom: 0; }
.search-sug-img { width: 60px; height: 44px; object-fit: cover; flex: 0 0 60px; border-radius: 6px; background: var(--hair); }
.search-sug-info { flex: 1; min-width: 0; }
.search-sug-title { font-family: var(--display); font-weight: 500; font-size: 15px; color: var(--ink); line-height: 1.3; }
.search-sug-cat { font-family: var(--sans); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--voom-red); margin-bottom: 2px; display: block; }
.search-sug-all {
  display: block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--voom-red);
  padding: var(--s-4) 0 var(--s-2);
  text-align: center;
}
.search-sug-empty { color: var(--ink-4); font-style: normal; font-family: var(--display); padding: var(--s-4) 0; font-size: 15px; }

/* ===== Pagination ===== */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  
  gap: var(--s-2);
  padding: var(--s-9) 0;
}
.pagination a, .pagination span {
  min-width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 20px;
  color: var(--ink);
  border: 1px solid var(--hair);
  padding: 0 var(--s-3);
  border-radius:16px;
  transition: border-color .2s, color .2s, background .2s;
}
.pagination a:hover { border-color: var(--ink); }
.pagination .current { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pagination .disabled { color: var(--mute); border-color: var(--hair-soft); }

/* ===== Newsletter / CTA block ===== */
.cta-block {
  background: var(--cream);
  padding: var(--s-10) var(--s-9);
  margin: var(--s-11) 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-7);
  align-items: center;
}
.cta-block h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
}
.cta-block p {
  font-family: var(--display);
  font-style: normal;
  font-size: 20px;
  color: var(--ink-3);
  margin: 8px 0 0;
}

/* ===== Lead Form (inline article) ===== */
.lead-form-inline {
  background: var(--cream);
  padding: var(--s-9);
  margin: var(--s-9) 0;
}
.lead-form-inline h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 26px;
  color: var(--ink);
  margin: 0 0 var(--s-3);
}
.lead-form-inline p { color: var(--ink-3); margin: 0 0 var(--s-5); }
.lead-form-inline .form-grid { gap: var(--s-4); }

/* ===== 404 / empty state ===== */
.empty-state {
  text-align: center;
  padding: var(--s-12) var(--s-7);
}
.empty-state .eyebrow { color: var(--voom-red); margin-bottom: var(--s-4); }
.empty-state h1 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(72px, 12vw, 160px);
  line-height: .9;
  color: var(--ink);
  margin: 0;
}
.empty-state p {
  font-family: var(--display);
  font-style: normal;
  font-size: 20px;
  color: var(--ink-3);
  margin: var(--s-4) 0 var(--s-7);
}

/* ===== Auth pages ===== */
.auth-shell {
  min-height: 70vh;
  display: grid;
  place-items: center;
  padding: var(--s-10) var(--s-7);
}
.auth-card {
  width: 100%;
  max-width: 460px;
  background: var(--cream);
  padding: var(--s-10) var(--s-9);
}
.auth-card .eyebrow { color: var(--voom-red); margin-bottom: var(--s-3); }
.auth-card h1 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1;
  color: var(--ink);
  margin: 0 0 var(--s-6);
  letter-spacing: -.01em;
}
.auth-card .form-grid { grid-template-columns: 1fr; gap: var(--s-5); }
.auth-card .actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--s-6);
}
.auth-card .small a { color: var(--voom-red); }

/* ===== Page (static / legal) ===== */
.static-page {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--s-10) var(--s-7);
}
.static-page h1 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0 0 var(--s-7);
}
.static-page .deck {
  margin-bottom: var(--s-8);
  max-width: 60ch;
}
.static-page h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.15;
  color: var(--ink);
  margin: var(--s-9) 0 var(--s-4);
}
.static-page h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  color: var(--ink);
  margin: var(--s-7) 0 var(--s-3);
}
.static-page p, .static-page li {
  font-size: 22px;
  line-height: 1.85;
  color: var(--ink-2);
  margin: 0 0 var(--s-5);
}
.static-page ul, .static-page ol {
  margin: 0 0 var(--s-5);
  padding-inline-start: var(--s-7);
}
.static-page ul li { list-style: disc; }
.static-page ol li { list-style: decimal; }
.static-page a { color: var(--voom-red); text-decoration: underline; text-underline-offset: 3px; }

/* ===== Author / Tag header ===== */
.archive-head {
  text-align: center;
  padding: 0 0 var(--s-9);
  border-bottom: 1px solid var(--ink);
  margin-bottom: var(--s-2);
  margin-top: var(--s-8);
}
.archive-head .eyebrow { margin-bottom: var(--s-4); }
.archive-head h1 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(40px, 6vw, 80px);
  line-height: .95;
  letter-spacing: -.018em;
  color: var(--ink);
  margin: 0;
}
.archive-head .deck {
  margin: var(--s-5) auto 0;
  max-width: 60ch;
}
.archive-head .author-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--voom-red);
  margin: 0 auto var(--s-5);
  overflow: hidden;
}
.archive-head .author-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ===== Responsive ===== */
@media (max-width: 1100px) {
  .head-card .head-body { padding: var(--s-3) var(--s-4) var(--s-4); }
  .article-content img{ margin: var(--s-6) 0; width: 100%; max-width: 100%; height: auto; object-fit: contain; border-radius: 8px; }
  .section-head { display:flex;  align-items:center; gap:var(--s-4);
  }
  .section-head .more{ margin-right:auto; }
  .section-head .wow-head-logo{  height: 25px; }
  .card-grid-3 { grid-template-columns: 1fr 1fr; }
  .card-grid-4 { grid-template-columns: 1fr 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: var(--s-7); }
  .article-body-grid { grid-template-columns: 1fr; }
  .article-toc, .share-rail { position: static; }
  .share-rail { flex-direction: row; justify-content: center; border-top: 1px solid var(--hair); padding-top: var(--s-5); }
  .share-rail .label { writing-mode: horizontal-tb; margin-bottom: 0; }
  .hero-refined { grid-template-columns: 1fr; gap: var(--s-7); padding: var(--s-7) 0 var(--s-9); }
  .hero-refined .hero-img { aspect-ratio: 16/10; order: -1; }
  .article-layout { grid-template-columns: 1fr; gap: var(--s-9); }
  .article-aside { position: static; }
}

@media (max-width: 760px) {
  /* Hard overflow guard */
  html, body { max-width: 100vw; overflow-x: hidden; }
  body > * { max-width: 100vw; }
  .wrap, .wrap-narrow, .wrap-wide, main, section, article, .home-page, .article-page, .article-layout, .article-content { max-width: 100%; }
  .wrap, .wrap-narrow, .wrap-wide { padding: 0 var(--s-4); }
  .card-grid-3, .card-grid-2, .card-grid-4 { grid-template-columns: 1fr; gap: var(--s-4); }
  .form-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: var(--s-6); padding-bottom: var(--s-6); }
  .footer-bot { flex-direction: column; align-items: flex-start; }
  .a-card-feature { grid-template-columns: 1fr; gap: 0; }
  .a-card-feature .img-wrap { order: 1; aspect-ratio: 16/10; border-radius: 12px; }
  .a-card-feature .body { order: 2; padding: var(--s-5) 0 0 !important; }
  .nav-toggle { display: flex; }
  .mast-row { padding: var(--s-3) var(--s-4); min-height: 48px; gap: var(--s-3); }
  .mast-issue { display: none; }
  .mast-logo svg, .mast-logo img { height: 38px; }
  .cta-block { grid-template-columns: 1fr; padding: var(--s-6); margin: var(--s-7) 0; }
  .article-content p { font-size: 20px; line-height: 1.75; }
  /* Byline: author and share buttons share one row; reading time hidden,
     author name down to 15px. */
  .article-byline { flex-direction: row; gap: var(--s-3); align-items: center; justify-content: space-between; padding: var(--s-3) 0; }
  .article-byline .author-info span { display: none; }
  .article-byline .author-info b { font-size: 15px; }
  .article-head { padding: var(--s-5) 0 var(--s-4); }
  /* Breadcrumb: single line on mobile — crumbs keep their size, the article
     title (last span) absorbs the squeeze and ellipsizes. */
  .article-head .breadcrumb { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
  .article-head .breadcrumb a,
  .article-head .breadcrumb .sep { flex-shrink: 0; }
  .article-head .breadcrumb span:last-child { min-width: 0; flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; }
  .article-head h1 { font-size: clamp(24px, 7vw, 32px);line-height: 1.3; }
  .article-hero-img { aspect-ratio: 16/10; margin-top: var(--s-4); border-radius: 12px; }
  .article-layout { gap: var(--s-7); margin: var(--s-7) auto; padding: 0; }
  .article-tableau { padding: var(--s-8) 0; margin-top: var(--s-8); }
  .section-head { grid-template-columns: 1fr; gap: var(--s-2); padding: var(--s-6) 0 var(--s-3); margin-bottom: var(--s-4); }
  .section-head .more { justify-self: start; }
  .section-head h2 { font-size: clamp(20px, 5.5vw, 26px); }

  /* Hero — compact mobile */
  .hero-refined {
    grid-template-columns: 1fr;
    gap: var(--s-4);
    padding: var(--s-5) 0 var(--s-6);
  }
  .hero-refined .hero-img { aspect-ratio: 16/10; order: -1; }
  .hero-refined h1 { font-size: clamp(22px, 6.5vw, 30px); }
  .hero-refined .deck { font-size: 20px; }
  .hero-refined .meta-row { font-size: 20px; padding-top: var(--s-2); }
  .home-secondary { padding-top: var(--s-4); padding-bottom: var(--s-5); }
  .home-hero-wrap { padding-top: var(--s-4); }

  /* Homepage head — single column on mobile */
  .home-head { padding-top: 20px; padding-bottom: var(--s-5); }
  .head-grid { grid-template-columns: 1fr; grid-template-rows: none; height: auto; gap: var(--s-4); }
  .head-card-hero { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3.4; }
  .head-card-sm { aspect-ratio: 16 / 9; }
  .head-card .head-body { padding: var(--s-4); gap: var(--s-2); }
  .head-card-hero .head-title { font-size: clamp(20px, 5.4vw, 26px); }
  .head-card-sm .head-title { font-size: clamp(17px, 4.6vw, 21px); }

  /* Cards mobile — tighter */
  .a-card .body { padding: var(--s-3) var(--s-4) var(--s-4); }
  .a-card h3 { font-size: 20px; }
  .a-card .deck { font-size: 20px; }

  /* Archive + chapter heads */
  .archive-head { padding: var(--s-6) 0 var(--s-5); margin-bottom: var(--s-6); }
  .archive-head h1 { font-size: clamp(28px, 8vw, 42px); }
  .chapter { padding-top: var(--s-6); padding-bottom: var(--s-3); }
  .chapter h2 { font-size: clamp(28px, 9vw, 44px); }
  .chapter-deck { margin: var(--s-4) 0 var(--s-6); font-size: 20px; }

  /* Footer compact */
  .site-footer { padding: var(--s-7) 0 var(--s-5); margin-top: var(--s-7); }

  /* Section spacing tight on mobile */
  .home-section, .home-pick, .home-hero-wrap { padding-top: var(--s-3); padding-bottom: var(--s-3); }
  
  /* Aside (article sidebar) compact */
  .article-aside { gap: var(--s-5); }
  .article-layout .article-aside-block { display: none; }
  .aside-card { grid-template-columns: 150px 0.9fr; gap: var(--s-3); padding: var(--s-3) 0; width:95%; margin: 0 auto; }
  .aside-card h4 { font-size: 18px; }
  .aside-newsletter { padding: var(--s-5); }

  /* Static pages */
  .static-page { padding: var(--s-7) var(--s-4); }
  .static-page h1 { font-size: clamp(28px, 8vw, 40px); margin-bottom: var(--s-5); }
  .static-page h2 { margin: var(--s-6) 0 var(--s-3); }
  .static-page p, .static-page li { font-size: 20px; line-height: 1.7; }

  /* Auth */
  .auth-shell { padding: var(--s-6) var(--s-4); min-height: 50vh; }
  .auth-card { padding: var(--s-7) var(--s-5); }
}

/* mast-nav-inner hidden on mobile (hamburger handles mobile nav) */
@media (max-width: 760px) {
  .mast-nav-inner { display: none; }
}

/* ===== A11y ===== */
:focus-visible { outline: 2px solid var(--voom-red); outline-offset: 3px; }
.skip-link:focus { left: var(--s-4); top: var(--s-4); z-index: 100; }

/* ===== Quill editor formats (align + size) ===== */
/* The article WYSIWYG saves alignment/size as ql-* classes; without these rules
   "center"/"small" set in the editor don't render on the public page. */
/* +2px pass over the body copy: blocks that carry their own size from
   lead-form.css (review cards, benefits boxes) and the editor's alignment
   wrappers, which are <div class="ql-align-…"> and so miss the
   `div:not([class])` rule above. Scoped to the article so the same widgets
   keep their own size on a lead-form page. */
.article-content div[class^="ql-align"],
.article-content div[class*=" ql-align"] {
  font-family: var(--sans);
  font-size: 22px;
  line-height: 1.85;
  color: var(--ink-2);
  margin: 0 0 var(--s-6);
}
.article-content .benefits-box-title { font-size: 24px; }
.article-content .benefits-box-item  { font-size: 21px; }
.article-content .benefits-box-check { font-size: 17px; }
.article-content .lf-reviews-title      { font-size: 24px; }
.article-content .lf-reviews-title--bar { font-size: 26px; }
.article-content .lf-review-name { font-size: 22px; }
.article-content .lf-review-date { font-size: 15px; }
.article-content .lf-review-text { font-size: 18px; }
.article-content .lf-reviews .lf-subtitle { font-size: 20px; }
.article-content .lf-rating-score { font-size: 22px; }
.article-content .lf-rating-count { font-size: 16px; }
/* The newer source template's own typography, copied from the <style> block it
   ships inline (which the importer drops): a cyan rule opening each section.
   Scoped to .kan-container so articles from the older templates are untouched. */
.article-content .kan-container h2,
.article-content .kan-container h3 {
  border-right: 6px solid #02aeef;
  padding-right: 15px;
  color: #000;
}
.article-content .kan-container h2 { font-size: 32px; font-weight: 700; margin: 40px 0 20px; }
.article-content .kan-container h3 { font-size: 30px; font-weight: 600; margin: 30px 0 15px; }
.article-content .kan-faq-item { margin: 0 0 var(--s-4); }
.article-content .kan-faq-content { padding: var(--s-4) 0 var(--s-2); }
/* Photo credits read as a note under the picture, not as body copy — but body
   copy is 22px, and at 15px the credit was small enough to be missed. */
.article-content figcaption { font-size: 20px; text-align: center; }
/* Imported posts carry the old theme's credit as
   <span class="image-credit" style="font-size:12px">, and an inline style
   outranks every stylesheet — this is the one place the size has to be forced,
   or every article written before the import keeps the 12px credit forever.
   The class only ever marks a credit, so nothing legitimate is overridden. */
.article-content .image-credit,
.hero-image .image-credit { font-size: 20px !important; }
/* Imported image carousel. One picture at a time, the arrows sized so they do
   not cover the photo on a narrow screen. */
/* The container clips the slide track, so a carousel that has not started yet
   still shows one picture rather than the whole strip spilling sideways. */
.article-content .el-carousel { margin: var(--s-8) 0; overflow: hidden; position: relative; }
.article-content .el-carousel .swiper-slide { width: 100%; flex-shrink: 0; }
.article-content .el-carousel figure { margin: 0; min-width: 0; }
.article-content .el-carousel img { margin: 0; border-radius: 12px; width: 100%; }
.article-content .el-carousel figcaption { padding: 0 var(--s-3); }
.article-content .el-carousel .swiper-button-next,
.article-content .el-carousel .swiper-button-prev {
  color: #fff;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .38);
}
.article-content .el-carousel :is(.swiper-button-next, .swiper-button-prev)::after { font-size: 16px; font-weight: 700; }
.article-content .el-carousel .swiper-pagination {
  position: static;
  margin-top: 8px;
}
.article-content .el-carousel .swiper-pagination-bullet { background: var(--ink-4); opacity: .35; }
.article-content .el-carousel .swiper-pagination-bullet-active { background: var(--voom-red); opacity: 1; }
.article-content .ql-align-center { text-align: center; }
.article-content .ql-align-right  { text-align: right; }
.article-content .ql-align-left   { text-align: left; }
.article-content .ql-align-justify { text-align: justify; }
/* Same scale the editor shows (quill.snow.css), so what is picked in the
   admin is what the page renders. A fixed 20px here read as *smaller* than
   the 22px body copy, which made "large" look like it did nothing. */
.article-content .ql-size-small { font-size: 0.75em; }
.article-content .ql-size-large { font-size: 1.5em; }
.article-content .ql-size-huge  { font-size: 1.8em; }
/* Content already saved with the previous marker yellow (#ffe066), so the new
   colour applies without rebuilding every article. Buttons are excluded: their
   fill is not a marker and must keep whatever colour the source gave it. */
.article-content [style*="ffe066"]:not(.el-cta):not(.highlight-scroll):not(:has(.highlight-scroll)),
.article-content [style*="255, 224, 102"]:not(.el-cta):not(.highlight-scroll):not(:has(.highlight-scroll)) {
  background-color: #ffff00 !important;
}
/* Only markers that carry the previous default yellow are repainted. Matching
   every .highlight-scroll instead forced the new yellow onto markers that were
   deliberately given another colour. A marker with no --hl-color of its own
   needs no rule at all — the gradient's fallback is already the new yellow. */
.article-content .highlight-scroll[style*="ffe066"],
.article-content .highlight-scroll[style*="255, 224, 102"] {
  --hl-color: #ffff00 !important;
}

/* ===== Utility ===== */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.hidden { display: none; }
.hide-mobile { display: inline-flex; }
.hide-desktop { display: none; }
@media (max-width: 760px) {
  .hide-mobile { display: none; }
  .hide-desktop { display: inline-flex; }
}
.no-results {
  font-family: var(--display);
  font-style: normal;
  font-size: 20px;
  color: var(--ink-3);
  text-align: center;
  padding: var(--s-10) 0;
}

/* ===== Highlight scroll effect ===== */
.highlight-scroll {
  display: inline;
  background: linear-gradient(var(--hl-color, #ffff00), var(--hl-color, #ffff00)) no-repeat right center !important;
  background-size: 0% 88% !important;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  color: inherit;
  border-radius: 2px;
  padding: 0 2px;
  transition: background-size 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.highlight-scroll.hl-active {
  background-size: 100% 88% !important;
}
/* A CTA that is also a scroll-highlight. The rules above are written for a run
   of text inside a paragraph — inline display, a fill 88% of the line height —
   and applied to a button they broke it out of its own box and left a band of
   unpainted colour top and bottom. Declared after the block above because both
   carry !important. */
.article-content a.el-cta.highlight-scroll {
  display: block;
  padding: var(--s-5) var(--s-4);
  border-radius: 5px;
  /* The marker sweep belongs to a highlighted run of text, not to a button —
     a button is filled from the moment it is on screen. The gradient is
     dropped and its colour becomes the fill, so the CTA looks the same as
     every other one. */
  background-image: none !important;
  background-color: var(--hl-color, #000) !important;
  background-size: auto !important;
  /* Only this kind of CTA gets the black frame and the black hover. The other
     kind arrives fully styled from the source — its own fill, padding, radius
     and shadow — and must keep the look it came with. */
  border: 2px solid #000 !important;
  transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.article-content a.el-cta.highlight-scroll:hover {
  filter: none;
  background-color: #000 !important;
  color: #fff !important;
}
.article-content a.el-cta.highlight-scroll:hover * { color: #fff !important; }

/* ===== Article ticket badge ===== */
.article-ticket {
  display: inline-block;
  background: var(--voom-red);
  color: #fff;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  line-height: 1.4;
  max-width: fit-content;
}
.article-ticket--cat {
  background: transparent;
  color: var(--voom-red);
  
  font-size:20px; 
  border: 0px solid transparent;
}

/* ===== Highlight sidebar block ===== */
.article-highlight-block {
  background: transparent;
  position: relative;
  border-top: 3px solid var(--voom-red);
  border-bottom: 3px solid var(--voom-red);
  padding: var(--s-5) var(--s-4);
  overflow: hidden;
  min-height: 150px;
}
.article-highlight-block::before {
  content: '\201C';
  position: absolute;
  rotate: 180deg;
  max-height: fit-content;
  bottom: 30px;
  right: 10px;
  font-size: 250px;
  font-weight: 900;
  color: var(--voom-red);
  opacity: 0.12;
  line-height: 1;
  pointer-events: none;
  font-family: Georgia, serif;
}
.article-highlight-text {
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.65;
  color: var(--ink);
  margin: 0;
  position: relative;
  z-index: 1;
}

/* ===== Home search bar ===== */
.home-search-wrap { padding: var(--s-6) 0 var(--s-4); }
.home-search-form {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  background: var(--hair, #f5f5f5);
  border-radius: 999px;
  padding: 10px 18px;
  max-width: 560px;
  margin: 0 auto;
  color: var(--ink-3);
}
.home-search-form input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  outline: none;
  direction: rtl;
  text-align: right;
}
.home-search-form input::placeholder { color: var(--ink-4, #aaa); }

/* ===== Shorts carousel ===== */
.shorts-carousel-wrap { margin: var(--s-9) 0; }
.shorts-carousel .swiper-button-next,
.shorts-carousel .swiper-button-prev {
  --swiper-navigation-color: var(--voom-red);
}
.shorts-carousel-title {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: var(--s-5);
  color: var(--ink);
}
.short-embed-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 9/16;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}
.short-embed-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.short-thumb-wrap { cursor: pointer; }
.short-thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.short-play-btn {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  padding-right: 2px;
}
.short-thumb-wrap:hover .short-play-btn {
  background: rgba(255,0,0,0.85);
  transform: scale(1.08);
}

/* ===== Affiliation — shared base ===== */
.affiliation-card,
.affiliation-inline {
  --aff-bg:        #fff;
  --aff-fg:        var(--ink, #1a1410);
  --aff-fg2:       var(--ink-3, #6b7280);
  --aff-border:    #e5e7eb;
  --aff-label-fg:  #9ca3af;
  --aff-btn-bg:    var(--voom-red, #c91d36);
  --aff-btn-fg:    #fff;
  --aff-overlay:   none;
  --aff-marker:    rgba(255, 209, 0, .5);
  /* Font size is a per-card setting (admin: "גודל פונט"). Every text size in
     the block is multiplied by this, so one class scales the whole card. */
  --aff-scale:     1;
  position: relative;
  overflow: hidden;
}

/* ── Sidebar card ─────────────────────────────────────────── */
.affiliation-card {
  padding: 0 0 18px !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--aff-border) !important;
  background: var(--aff-bg) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
  border-radius: 12px !important;
  max-width: 100%;
}
@media (max-width: 760px) {
  .affiliation-card {
    max-width: 90vw;
  }
  .affiliation-card:hover .affiliation-card-img { transform: none; }
  .affiliation-card:hover .affiliation-card-overlay { opacity: 0; } 
  .affiliation-card-subtitle, .affiliation-card-title, .affiliation-card-text{
    text-align:center;
  } 
  .affiliation-card-btn{
    justify-self:center;
    margin: 0 auto;
  }
}

.affiliation-card-img-wrap { order: 1; }
.affiliation-card-img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius:16px 16px 0 0;
  display: block;
  transition: transform .4s ease;
}
.affiliation-card:hover .affiliation-card-img { transform: scale(1.04); }
.affiliation-card-title {
  order: 2;
  font-family: var(--display);
  font-weight: 800;
font-size: calc(22px * var(--aff-scale));
  margin: 6px 0 0;
  padding: 0 16px;
  color: var(--aff-fg);
  line-height: 1.25;
}
.affiliation-card-subtitle {
  order: 3;
  font-family: var(--sans);
font-size: calc(18px * var(--aff-scale));
  color: var(--aff-fg2);
  margin: 0;
  padding: 0 16px;
  line-height: 1.5;
}
.affiliation-card-text {
  order: 3;
  font-family: var(--sans);
font-size: calc(16px * var(--aff-scale));
  line-height: 1.6;
  color: var(--aff-fg2);
  margin: 0;
  padding: 0 16px;
}
.affiliation-card-btn {
  order: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--aff-btn-bg);
  color: var(--aff-btn-fg);
  font-family: var(--sans);
font-size: calc(13px * var(--aff-scale));
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  transition: transform .2s ease;
  letter-spacing: .02em;
  width: fit-content;
  margin: 4px 16px 0;
  justify-content: center;
}
.affiliation-card-btn:hover {  transform: translateX(-2px); color:white !important; }

/* ── Title / subtitle highlight ("marker") ───────────────────── */
.affiliation-card-title--marker > span,
.affiliation-inline-title--marker > span,
.affiliation-card-subtitle--marker > span,
.affiliation-inline-subtitle--marker > span {
  background-image: linear-gradient(var(--aff-marker), var(--aff-marker));
  background-repeat: no-repeat;
  background-size: 100% 40%;
  background-position: 0 85%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 1px;
}

/* ── Inline block ─────────────────────────────────────────── */
.affiliation-inline {
  margin: 32px 0;
  border-radius: 14px;
  border: 1px solid var(--aff-border);
  background: var(--aff-bg);
}
.affiliation-inline-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--aff-label-fg);
  padding: 10px 20px 0;
  display: block;
}
.affiliation-inline-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 20px 20px;
}
.affiliation-inline-img-wrap { overflow: hidden; border-radius: 10px; }
.affiliation-inline-img {
  width: 100%;
  aspect-ratio: 21/9;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.affiliation-inline:hover .affiliation-inline-img { transform: scale(1.04); }
.affiliation-inline-title {
  font-family: var(--display);
  font-weight: 800;
font-size: calc(20px * var(--aff-scale));
  margin: 0;
  color: var(--aff-fg);
  line-height: 1.25;
}
.affiliation-inline-subtitle {
  font-family: var(--sans);
font-size: calc(14px * var(--aff-scale));
  color: var(--aff-fg2);
  margin: 0;
  line-height: 1.5;
}
.affiliation-inline-text {
  font-family: var(--sans);
font-size: calc(15px * var(--aff-scale));
  line-height: 1.6;
  color: var(--aff-fg2);
  margin: 0;
}
.affiliation-inline-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--aff-btn-bg);
  color: var(--aff-btn-fg);
  font-family: var(--sans);
font-size: calc(14px * var(--aff-scale));
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
  transition: opacity .15s, transform .15s;
  align-self: flex-start;
  margin-top: 4px;
}
.affiliation-inline-btn:hover { opacity: .88; transform: translateX(-2px); }

/* ── Style variants ─────────────────────────────────────────── */

/* dark — כהה עם גרדיאנט ותמונה בולטת */
.aff-style--dark {
  --aff-bg:       linear-gradient(160deg, #111827 0%, #1f2937 100%);
  --aff-fg:       #f9fafb;
  --aff-fg2:      rgba(249,250,251,.65);
  --aff-border:   transparent;
  --aff-label-fg: rgba(249,250,251,.45);
  --aff-overlay:  linear-gradient(180deg, transparent 35%, rgba(17,24,39,.9) 100%);
}
.aff-style--dark.affiliation-card  { background: linear-gradient(160deg, #111827 0%, #1f2937 100%) !important; border-color: transparent !important; box-shadow: 0 8px 32px rgba(0,0,0,.22) !important; }
.aff-style--dark.affiliation-inline { background: linear-gradient(135deg, #111827 0%, #1f2937 100%); border-color: transparent; }

/* brand — צבע מותג (אדום) */
.aff-style--brand {
  --aff-bg:       var(--voom-red, #c91d36);
  --aff-fg:       #fff;
  --aff-fg2:      rgba(255,255,255,.78);
  --aff-border:   transparent;
  --aff-label-fg: rgba(255,255,255,.5);
  --aff-btn-bg:   #fff;
  --aff-btn-fg:   var(--voom-red, #c91d36);
}
.aff-style--brand.affiliation-card  { background: var(--voom-red, #c91d36) !important; border-color: transparent !important; }
.aff-style--brand.affiliation-inline { background: var(--voom-red, #c91d36); border-color: transparent; }

/* minimal — מסגרת בלבד, ללא רקע */
.aff-style--minimal {
  --aff-bg:       transparent;
  --aff-border:   currentColor;
  --aff-label-fg: var(--ink-3, #6b7280);
}
.aff-style--minimal.affiliation-card  { background: transparent !important; border: 1.5px solid var(--border-color, #e5e7eb) !important; box-shadow: none !important; }
.aff-style--minimal.affiliation-inline { background: transparent; border: 1.5px solid var(--border-color, #e5e7eb); }

/* Font size, set per card in the admin ("גודל פונט") and overridable per
   article. Only the multiplier changes — every text size in the block, sidebar
   and inline alike, is written as calc(Npx * var(--aff-scale)). */
.affiliation-card.aff-size--sm, .affiliation-inline.aff-size--sm { --aff-scale: 0.85; }
.affiliation-card.aff-size--md, .affiliation-inline.aff-size--md { --aff-scale: 1; }
.affiliation-card.aff-size--lg, .affiliation-inline.aff-size--lg { --aff-scale: 1.2; }
.affiliation-card.aff-size--xl, .affiliation-inline.aff-size--xl { --aff-scale: 1.45; }

/* Text alignment, set per card in the admin ("יישור טקסט") and overridable
   per article. Default is the start edge (right in RTL), which is what every
   card looked like before the option existed. Both blocks are flex columns,
   so centring the text also has to centre the fit-content button. */
.affiliation-card.aff-align--center,
.affiliation-inline.aff-align--center .affiliation-inline-inner {
  text-align: center;
}
.affiliation-card.aff-align--center .affiliation-card-btn,
.affiliation-inline.aff-align--center .affiliation-inline-btn {
  align-self: center;
}

@media (max-width: 600px) {
  .affiliation-inline-inner { padding: 14px 16px 18px; }
}

/* ===== Don't-miss carousel ===== */
.dont-miss-wrap { margin: var(--s-9) 0; }
.dont-miss-title {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: var(--s-5);
  color: var(--ink);
}
.dont-miss-card {
  display: block;
  text-decoration: none;
  color: var(--ink);
}
.dont-miss-img {
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 10px;
  margin-bottom: var(--s-3);
}
.dont-miss-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.dont-miss-card h4 {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  margin: var(--s-2) 0 0;
  color: var(--ink);
}
.dont-miss-card:hover h4 { color: var(--voom-red); }

/* ===== Global rounded corners ===== */
img { border-radius: 8px; }
/* The hero fills its figure edge to edge. Without the margin reset it inherits
   `.article-content img { margin: 10px 0 }`, which exposes the figure's --hair
   background as a band above and below the photo on imported articles. */
.article-hero-img img { display: block; border-radius: 12px; object-fit: cover; width: 100%; height: 100%; margin: 0; aspect-ratio: auto; min-width: 0; }
.avatar img, .avatar { border-radius: 50% !important; }
.article-byline .avatar { border-radius: 50% !important; }

figure{
  min-width:100%;
  margin:10px 0;
}

/* ===== Hero figure = picture frame + credit =====
   .article-hero-img keeps its fixed ratio and overflow:hidden, so the credit
   cannot live inside it. .article-hero wraps the frame and the caption, carries
   no box of its own, and owns the gap that separates the pair from the text
   below — the caption's own margin would be flattened by the
   `.article-content figure + div { margin-top: 0 }` rule further up. */
.article-hero { min-width: 0; margin: 0; padding: 0; }
.article-content .article-hero--inline { margin: 0 0 var(--s-5); }

/* The frame used to BE the <figure>, so the global `figure { min-width: 100% }`
   stretched it across the column and its own 1100px cap never took effect. Now
   that it is a plain div the cap would suddenly apply and shrink every hero, so
   the width it has always had is restated here. */
.article-hero > .article-hero-img { max-width: none; }

/* A full blank line between the credit and the first paragraph, so the text
   does not start right under the caption. */
.article-hero .article-hero-caption { margin-bottom: var(--s-6); }
.article-content .article-hero--inline .article-hero-caption {
  max-width: 100%;
  margin: var(--s-2) 0 var(--s-6);
}
/* The frame sits directly above its own caption — its bottom margin belongs to
   the figure now, not between the picture and the words describing it. */
.article-content .article-hero--inline .article-hero-img--inline { margin: 0; }
/* ===== Split-head article layout =====
   The head (category, title, deck, byline) renders inside the content column,
   so the title shares the 2/3–1/3 split and the aside rises up beside it.
   The centered full-width treatment is overridden here only under the
   modifier, so removing the class on <article> restores the old display. */
.article-page--split-head .article-layout { margin-top: 0}
.article-page--split-head .article-head {
  max-width: none;
  margin: 0 0 var(--s-6);
  padding: 0;
  text-align: start;
}
.article-page--split-head .article-head .deck { margin: 0 !important; }

/* ===== Price-table card (.el-pricebox) =====

   Elementor's price-table widget, which the source uses for a sponsored
   feature box. Measured off the live solution-for-drive page: a grey header
   band with the title reversed out of it, a diagonal ribbon in the corner,
   and a centred tick list under it. The importer emits the structure; the
   geometry is here because it is identical on every one of them.

   Colours are defaults only — the widget's own header and ribbon colours
   arrive as inline styles and override these. */
.article-content .el-pricebox {
  position: relative;
  overflow: hidden;
  margin: 32px 0;
  /* No ground of its own. Measured on the live page: the widget's background
     is transparent and the section behind it is rgb(249,250,250) — the same
     off-white this theme already paints. A white card here was mine, not the
     source's, and it read as a raised panel the original does not have. */
  background-color: transparent;
}
.article-content .el-pricebox__head {
  background-color: #54595f;
  padding: 20px 0;
  text-align: center;
}
.article-content .el-pricebox__title {
  margin: 0 !important;
  font-size: 24px !important;
  /* !important because site-theme.css sets every heading in the article body
     to 700 and would otherwise win on cascade order. */
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: #fff !important;
  text-align: center;
}
.article-content .el-pricebox__sub {
  margin: 16px 0 0;
  text-align: center;
}
/* 80px of clear space above the list. The source's widget renders an empty
   .elementor-price-table__price block between the header and the features —
   these cards carry no price, so all it contributes is its own 40px vertical
   padding, twice. Reproduced as a margin rather than an empty element. */
.article-content .el-pricebox ul.el-pricebox__list {
  margin: 80px 0 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
/* Written as `.el-pricebox ul.el-pricebox__list > li` rather than the shorter
   form: the same element also carries .el-checklist, whose rules are a class
   and a tag more specific and were winning — which is why the card's rows came
   out at 24px bold with a 34px black ring around the tick instead of the small
   grey line the source draws. */
.article-content .el-pricebox ul.el-pricebox__list > li {
  padding: 0;
  margin: 0;
  font-size: 14px !important;
  font-weight: 400;
  line-height: 1.4 !important;
  color: #7a7a7a !important;
  text-align: center !important;
  border-bottom: 0;
}
/* The rule between rows. The source draws it as a block ::before on every row
   but the first; ::before here already carries the tick, so the same line is
   drawn as an ::after on every row but the last — the gaps land in the same
   four places. Width and border are the source's own: 75% of the card,
   centred, 2px double #ddd, 15px of air on each side. */
.article-content .el-pricebox ul.el-pricebox__list > li:not(:last-child)::after {
  content: "";
  display: block;
  width: 75%;
  height: 0;
  margin: 15px auto;
  border-top: 2px double #ddd;
}
/* A small hollow circle around the tick, the way the source's icon font draws
   it. Positioned in the flow, not absolutely: the row is centred, so the mark
   travels with the text instead of hanging in a margin that is not there. */
.article-content .el-pricebox ul.el-pricebox__list > li::before {
  content: "\2713";
  position: static;
  transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-inline-end: 10px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: 11px;
  color: inherit;
  vertical-align: middle;
}

/* Elementor's corner ribbon. The source builds it from a square rotated 45°
   and clipped by the card; one rotated bar anchored in the corner lands in
   the same place and needs no extra element, which matters because the
   importer emits a single <span> carrying the label. In RTL it sits top-left,
   the side the live page puts it on. The widget's own colour arrives as an
   inline background-color and overrides the default. */
.article-content .el-pricebox__ribbon {
  position: absolute;
  top: 22px;
  left: -52px;
  z-index: 2;
  width: 200px;
  padding: 6px 0;
  background-color: #ff8c00;
  font-size: 13px;
  line-height: 1.4;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  transform: rotate(-45deg);
}

/* The card's CTA. The importer emits it as a bare <p> holding an a.el-cta, so
   the <p> plays the part of .elementor-price-table__footer: 30px of padding
   above and below, contents centred.

   Both selectors are written long enough to outrank site-theme.css, which
   loads after this file and sets `.article-content p:not(.deck):not(.social-text)`
   at 0,3,1 — text-align:start there is what was pushing this button to the
   start edge instead of centring it.

   The button itself is NOT full width. Measured on the live page: it shrinks
   to its text (414px of 740), 15px/30px padding, 4px radius, 16px/500 with a
   line-height of 1 — a pill, not a bar. The generic .el-cta rules in this file
   size it at 28px/700 with 20px/16px padding, which is right for the standalone
   CTAs in other articles and wrong inside this card. */
.article-content .el-pricebox > p:not(.deck):not(.social-text) {
  margin: 0;
  padding: 30px 0;
  text-align: center;
}
.article-content .el-pricebox > p > a.el-cta {
  display: inline-block;
  width: auto;
  margin: 0;
  padding: 15px 30px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
}

/* ===== Comparison-article template (.infinix-article-v2) =====
   The source ships these rules in a <style> block inside the post body.
   The importer drops source stylesheets, so — as with .vooom-article and
   .kan-container before it — the equivalents live here under the same class
   names. Everything is scoped to .infinix-article-v2 so the Bootstrap-style
   utility names (.border, .rounded, .row) cannot reach the rest of the page.

   !important appears where the article theme sets body copy and headings:
   site-theme.css sizes .article-content p at 26px and pins
   #article_page h2 at a fixed size, both of which would otherwise win. */

.article-content .infinix-article-v2 {
  color: #333;
  text-align: right;
  background: #fff;
  overflow: hidden;
}

.infinix-article-v2 p,
.infinix-article-v2 li {
  font-size: 1.1rem !important;
  line-height: 1.8 !important;
  color: #333;
}

.infinix-article-v2 a {
  color: #0d6efd;
  text-decoration: underline;
  font-weight: 400;
}

.infinix-article-v2 a:hover { color: #0a58ca; }

/* Opening pill above the intro. */
.infinix-article-v2 .badge-category {
  display: inline-block;
  padding: 5px 15px;
  border-radius: 50px;
  background-color: #0d6efd;
  font-size: .9rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 20px;
}

/* Section headings: a grey band with a black rule on the leading edge.
   border-inline-start rather than border-right so it follows the RTL flow. */
.infinix-article-v2 .section-title {
  display: block;
  width: 100%;
  padding: 12px 15px;
  margin: 40px 0 25px;
  background-color: #f4f4f4;
  border-inline-start: 5px solid #000;
  font-size: 1.4rem !important;
  font-weight: 700;
  line-height: 1.4 !important;
  color: #000;
}

/* Spec table: black header, tinted product columns. */
.infinix-article-v2 .table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

.infinix-article-v2 .table-responsive { overflow-x: auto; }

.infinix-article-v2 .table-bordered th,
.infinix-article-v2 .table-bordered td { border: 1px solid #dee2e6; }

.infinix-article-v2 .table-custom thead th {
  background-color: #000 !important;
  color: #fff;
  text-align: center;
  font-weight: 700;
  border: none;
}

.infinix-article-v2 .table-custom td {
  vertical-align: middle;
  text-align: center;
  border-color: #dee2e6;
}

.infinix-article-v2 .align-middle th,
.infinix-article-v2 .align-middle td { vertical-align: middle; }

.infinix-article-v2 .feature-name {
  font-weight: 700 !important;
  text-align: right !important;
  background-color: #f9f9f9;
}

.infinix-article-v2 .infinix-col  { background-color: #f0fff4 !important; }
.infinix-article-v2 .redmagic-col { background-color: #fff5f5 !important; }

/* Figure with caption. */
.infinix-article-v2 .article-figure {
  display: block;
  margin: 35px auto;
  text-align: center;
  max-width: 100%;
}

.infinix-article-v2 .article-image {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

.infinix-article-v2 figcaption {
  margin-top: 10px;
  font-size: .95rem;
  font-style: italic;
  line-height: 1.4;
  color: #666;
}

.infinix-article-v2 .highlight-box {
  padding: 20px;
  margin: 20px 0;
  background-color: #fcfcfc;
  border: 1px solid #eee;
}

/* Bootstrap utilities the template relies on. */
.infinix-article-v2 .row { display: block; margin-inline: 0 !important; }
.infinix-article-v2 .col-12 { width: 100%; }
.infinix-article-v2 .bg-light { background-color: #f8f9fa; }
.infinix-article-v2 .rounded { border-radius: .25rem; }
.infinix-article-v2 .border { border: 1px solid #dee2e6; }
.infinix-article-v2 .fw-bold { font-weight: 700; }
.infinix-article-v2 .shadow-sm { box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075); }
.infinix-article-v2 .p-4 { padding: 1.5rem; }
.infinix-article-v2 .mb-0 { margin-bottom: 0; }
.infinix-article-v2 .mb-3 { margin-bottom: 1rem; }
.infinix-article-v2 .mb-4 { margin-bottom: 1.5rem; }
.infinix-article-v2 .my-4 { margin: 1.5rem 0; }

/* Summary and closing-CTA blocks used by both comparison variants. */
.infinix-article-v2 .summary-box {
  padding: 25px;
  margin-bottom: 20px;
  background-color: #fffaf0;
  border: 1px solid #e6e1d5;
  color: #000;
}

.infinix-article-v2 .final-cta {
  margin-top: 20px;
  text-align: right;
}

/* Samsung comparison variant of .infinix-article-v2. */
.infinix-article-v2 .infinix-header { color: #ccff00 !important; }
.infinix-article-v2 .samsung-header { color: #90caf9 !important; }
.infinix-article-v2 .samsung-col    { background-color: #e3f2fd !important; }

.infinix-article-v2 .device-card-infinix {
  border-top: 5px solid #ccff00 !important;
  margin-bottom: 30px;
}

.infinix-article-v2 .device-card-samsung {
  border-top: 5px solid #0d6efd !important;
  margin-bottom: 30px;
}

/* ===== Comparison-article template 2 (.gt30-article) =====

   The source ships TWO <style> blocks for this template, one after the other,
   and the second repaints the first. Both are mirrored here in the same order
   so the cascade resolves the way it does on the live page:

     block 1  a red scheme (#dc3545) keyed to .winner-col / .winner-header
     block 2  a magenta scheme (#e92ad5) keyed to the SECOND COLUMN by
              position — th:nth-child(2) / td:nth-child(2), with !important

   Block 2 never names .winner-col, so those rules are not dead: they still
   set the winner column's weight and min-width. What repaints it magenta is
   the positional rule, because the winner column happens to be the second.
   Reproducing only block 1 left the table red where the live page is
   magenta; reproducing only block 2 lost the weight. */

.article-content .gt30-article {
  font-family: Rubik, Heebo, system-ui, sans-serif;
  color: #333;
  text-align: right;
}

.gt30-article .article-content {
  font-size: 1.1rem;
  line-height: 1.8;
}

.gt30-article a { text-decoration: none; }

/* The scroll container gets the magenta thumb and a rounded clip. */
.gt30-article .table-responsive {
  border-radius: 8px;
  scrollbar-width: thin;
  scrollbar-color: #e92ad5 #f1f1f1;
}
.gt30-article .table-responsive::-webkit-scrollbar { height: 10px; }
.gt30-article .table-responsive::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}
.gt30-article .table-responsive::-webkit-scrollbar-thumb {
  background: #e92ad5;
  border-radius: 10px;
}

.gt30-article .table-custom thead th {
  background-color: #212529;
  color: #fff;
  vertical-align: middle;
  text-align: center;
  border: none;
  font-weight: normal;
  white-space: nowrap;
}

.gt30-article .table-custom td {
  vertical-align: middle;
  text-align: center;
  border-color: #dee2e6;
  min-width: 120px;
}

/* Block 1: the winner column's weight and measure. Its red fill and rules are
   overwritten below, but these two are not. */
.gt30-article .winner-col {
  font-weight: bold;
  min-width: 160px;
}

/* Block 2: the second column is pinned open as the reader scrolls the table
   sideways, and carries the magenta scheme. In RTL it sticks to the right. */
.gt30-article .table-custom th:nth-child(2),
.gt30-article .table-custom td:nth-child(2) {
  position: sticky;
  right: 0;
  z-index: 5;
  background-color: #fef4fc !important;
  border-left: 2px solid #e92ad5 !important;
  border-right: 2px solid #e92ad5 !important;
}

.gt30-article .table-custom th:nth-child(2) {
  background: #e92ad5 !important;
  color: #fff !important;
  z-index: 6;
}

/* Bootstrap's danger utilities are redefined by variable rather than by
   selector. .article-content .text-danger / .border-danger / .bg-danger sit
   LATER in this file at the same (0,2,0) weight and also carry !important, so
   a `.gt30-article .text-danger` override loses on source order. Repointing
   --bs-danger-rgb on the wrapper wins instead, because those utilities all
   read the variable and the nearer definition inherits down. */
.article-content .gt30-article,
.gt30-article,
/* The template wraps its body in a SECOND .article-content, and that inner
   wrapper matches the variable block above and resets --bs-danger-rgb back to
   Bootstrap's red for everything under it. Declaring it here too keeps the
   magenta all the way down. */
.gt30-article .article-content { --bs-danger-rgb: 233, 42, 213; }

.gt30-article .text-danger,
.gt30-article .btn-danger { color: #e92ad5 !important; }

.gt30-article .bg-danger,
.gt30-article .btn-danger {
  background-color: #e92ad5 !important;
  border-color: #e92ad5 !important;
  color: #fff !important;
}

.gt30-article .border-danger { border-color: #e92ad5 !important; }

.gt30-article .gaming-badge {
  background: linear-gradient(45deg, #e92ad5, #ff66e5);
  color: #fff;
  padding: 5px 12px;
  border-radius: 50px;
  font-weight: bold;
}

.gt30-article .pulse-btn { animation: gt30pulse 2s infinite; }

@keyframes gt30pulse {
  0%   { box-shadow: 0 0 0 0 rgba(233, 42, 213, .7); }
  70%  { box-shadow: 0 0 0 10px rgba(233, 42, 213, 0); }
  100% { box-shadow: 0 0 0 0 rgba(233, 42, 213, 0); }
}

.gt30-article .section-title {
  display: block;
  width: 100%;
  padding: 12px 15px;
  margin: 40px 0 25px;
  background-color: #f4f4f4;
  border-inline-start: 5px solid #000;
  font-size: 1.4rem !important;
  font-weight: 700;
  line-height: 1.4 !important;
  color: #000;
}

/* ===== Bootstrap 5.3.2 subset — imported article bodies =====

   tech.garden loads bootstrap.rtl.min.css and bootstrap-icons site-wide, and
   the newer comparison templates are written against it: the inline <style>
   block each article ships only adds its own palette on top of Bootstrap's
   utilities. That block is dropped on import like every other source
   stylesheet, so the utilities have to come from here or the markup renders
   unstyled.

   Rather than ship all 233 KB of Bootstrap — which would collide with this
   site's own .row/.btn/.badge/.small — only the rules whose every class is
   actually used by an imported body are extracted, and each selector is
   prefixed with .article-content. That keeps them inside article text and
   raises their specificity to (0,2,0) so they win over the site's bare
   element classes there, which is the same order of precedence the source
   page has. Regenerate by re-running the extractor against a pinned
   bootstrap.rtl.min.css if a new article introduces further utilities.

   The variables below are Bootstrap's light-theme :root values, narrowed to
   the ones this subset actually dereferences. */
.article-content {
  --bs-body-bg: #fff;
  --bs-body-color: #212529;
  --bs-border-color: #dee2e6;
  --bs-border-radius: 0.375rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-pill: 50rem;
  --bs-border-style: solid;
  --bs-border-width: 1px;
  --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --bs-danger-rgb: 220,53,69;
  --bs-dark-bg-subtle: #ced4da;
  --bs-dark-border-subtle: #adb5bd;
  --bs-dark-rgb: 33,37,41;
  --bs-dark-text-emphasis: #495057;
  --bs-emphasis-color: #000;
  --bs-emphasis-color-rgb: 0,0,0;
  --bs-heading-color: inherit;
  --bs-info-rgb: 13,202,240;
  --bs-light-rgb: 248,249,250;
  --bs-secondary-bg: #e9ecef;
  --bs-secondary-color: rgba(33, 37, 41, 0.75);
  --bs-success-bg-subtle: #d1e7dd;
  --bs-success-border-subtle: #a3cfbb;
  --bs-success-text-emphasis: #0a3622;
  --bs-tertiary-bg: #f8f9fa;
  --bs-warning-rgb: 255,193,7;
  --bs-white-rgb: 255,255,255;
}

.article-content .h5 {margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2;color:var(--bs-heading-color)}
.article-content .h5 {font-size:1.25rem}
.article-content .small {font-size:.875em}
.article-content .lead {font-size:1.25rem;font-weight:300}
.article-content .row {--bs-gutter-x:1.5rem;--bs-gutter-y:0;display:flex;flex-wrap:wrap;gap:0;align-items:normal;margin-top:calc(-1 * var(--bs-gutter-y));margin-left:calc(-.5 * var(--bs-gutter-x));margin-right:calc(-.5 * var(--bs-gutter-x))}
.article-content .row>* {flex-shrink:0;width:100%;max-width:100%;padding-left:calc(var(--bs-gutter-x) * .5);padding-right:calc(var(--bs-gutter-x) * .5);margin-top:var(--bs-gutter-y)}
.article-content .col-12 {flex:0 0 auto;width:100%}
.article-content .g-4 {--bs-gutter-x:1.5rem}
.article-content .g-4 {--bs-gutter-y:1.5rem}
@media (min-width:768px) {
  .article-content .col-md-6 {flex:0 0 auto;width:50%}
}
.article-content .table {--bs-table-color-type:initial;--bs-table-bg-type:initial;--bs-table-color-state:initial;--bs-table-bg-state:initial;--bs-table-color:var(--bs-emphasis-color);--bs-table-bg:var(--bs-body-bg);--bs-table-border-color:var(--bs-border-color);--bs-table-accent-bg:transparent;--bs-table-striped-color:var(--bs-emphasis-color);--bs-table-striped-bg:rgba(var(--bs-emphasis-color-rgb), 0.05);--bs-table-active-color:var(--bs-emphasis-color);--bs-table-active-bg:rgba(var(--bs-emphasis-color-rgb), 0.1);--bs-table-hover-color:var(--bs-emphasis-color);--bs-table-hover-bg:rgba(var(--bs-emphasis-color-rgb), 0.075);width:100%;margin-bottom:1rem;vertical-align:top;border-color:var(--bs-table-border-color)}
.article-content .table>:not(caption)>*>* {padding:.5rem .5rem;color:var(--bs-table-color-state,var(--bs-table-color-type,var(--bs-table-color)));background-color:var(--bs-table-bg);border-bottom-width:var(--bs-border-width);box-shadow:inset 0 0 0 9999px var(--bs-table-bg-state,var(--bs-table-bg-type,var(--bs-table-accent-bg)))}
.article-content .table>tbody {vertical-align:inherit}
.article-content .table>thead {vertical-align:bottom}
.article-content .table-bordered>:not(caption)>* {border-width:var(--bs-border-width) 0}
.article-content .table-bordered>:not(caption)>*>* {border-width:0 var(--bs-border-width)}
.article-content .table-striped>tbody>tr:nth-of-type(odd)>* {--bs-table-color-type:var(--bs-table-striped-color);--bs-table-bg-type:var(--bs-table-striped-bg)}
.article-content .table-hover>tbody>tr:hover>* {--bs-table-color-state:var(--bs-table-hover-color);--bs-table-bg-state:var(--bs-table-hover-bg)}
.article-content .table-responsive {overflow-x:auto;-webkit-overflow-scrolling:touch}
.article-content .btn {--bs-btn-padding-x:0.75rem;--bs-btn-padding-y:0.375rem;--bs-btn-font-family: ;--bs-btn-font-size:1rem;--bs-btn-font-weight:400;--bs-btn-line-height:1.5;--bs-btn-color:var(--bs-body-color);--bs-btn-bg:transparent;--bs-btn-border-width:var(--bs-border-width);--bs-btn-border-color:transparent;--bs-btn-border-radius:var(--bs-border-radius);--bs-btn-hover-border-color:transparent;--bs-btn-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.15),0 1px 1px rgba(0, 0, 0, 0.075);--bs-btn-disabled-opacity:0.65;--bs-btn-focus-box-shadow:0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);display:inline-block;padding:var(--bs-btn-padding-y) var(--bs-btn-padding-x);font-family:var(--bs-btn-font-family);font-size:var(--bs-btn-font-size);font-weight:var(--bs-btn-font-weight);line-height:var(--bs-btn-line-height);color:var(--bs-btn-color);text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;border:var(--bs-btn-border-width) solid var(--bs-btn-border-color);border-radius:var(--bs-btn-border-radius);background-color:var(--bs-btn-bg);transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}
@media (prefers-reduced-motion:reduce) {
  .article-content .btn {transition:none}
}
.article-content .btn:hover {color:var(--bs-btn-hover-color);background-color:var(--bs-btn-hover-bg);border-color:var(--bs-btn-hover-border-color)}
.article-content .btn:focus-visible {color:var(--bs-btn-hover-color);background-color:var(--bs-btn-hover-bg);border-color:var(--bs-btn-hover-border-color);outline:0;box-shadow:var(--bs-btn-focus-box-shadow)}
.article-content .btn:first-child:active {color:var(--bs-btn-active-color);background-color:var(--bs-btn-active-bg);border-color:var(--bs-btn-active-border-color)}
.article-content .btn:first-child:active:focus-visible {box-shadow:var(--bs-btn-focus-box-shadow)}
.article-content .btn:disabled, .article-content fieldset:disabled .btn {color:var(--bs-btn-disabled-color);pointer-events:none;background-color:var(--bs-btn-disabled-bg);border-color:var(--bs-btn-disabled-border-color);opacity:var(--bs-btn-disabled-opacity)}
.article-content .btn-danger {--bs-btn-color:#fff;--bs-btn-bg:#dc3545;--bs-btn-border-color:#dc3545;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#bb2d3b;--bs-btn-hover-border-color:#b02a37;--bs-btn-focus-shadow-rgb:225,83,97;--bs-btn-active-color:#fff;--bs-btn-active-bg:#b02a37;--bs-btn-active-border-color:#a52834;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#dc3545;--bs-btn-disabled-border-color:#dc3545}
.article-content .btn-lg {--bs-btn-padding-y:0.5rem;--bs-btn-padding-x:1rem;--bs-btn-font-size:1.25rem;--bs-btn-border-radius:var(--bs-border-radius-lg)}
.article-content .badge {--bs-badge-padding-x:0.65em;--bs-badge-padding-y:0.35em;--bs-badge-font-size:0.75em;--bs-badge-font-weight:700;--bs-badge-color:#fff;--bs-badge-border-radius:var(--bs-border-radius);display:inline-block;padding:var(--bs-badge-padding-y) var(--bs-badge-padding-x);font-size:var(--bs-badge-font-size);font-weight:var(--bs-badge-font-weight);line-height:1;color:var(--bs-badge-color);text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:var(--bs-badge-border-radius)}
.article-content .badge:empty {display:none}
.article-content .btn .badge {position:relative;top:-1px}
.article-content .alert {--bs-alert-bg:transparent;--bs-alert-padding-x:1rem;--bs-alert-padding-y:1rem;--bs-alert-margin-bottom:1rem;--bs-alert-color:inherit;--bs-alert-border-color:transparent;--bs-alert-border:var(--bs-border-width) solid var(--bs-alert-border-color);--bs-alert-border-radius:var(--bs-border-radius);--bs-alert-link-color:inherit;position:relative;padding:var(--bs-alert-padding-y) var(--bs-alert-padding-x);margin-bottom:var(--bs-alert-margin-bottom);color:var(--bs-alert-color);background-color:var(--bs-alert-bg);border:var(--bs-alert-border);border-radius:var(--bs-alert-border-radius)}
.article-content .alert-success {--bs-alert-color:var(--bs-success-text-emphasis);--bs-alert-bg:var(--bs-success-bg-subtle);--bs-alert-border-color:var(--bs-success-border-subtle);--bs-alert-link-color:var(--bs-success-text-emphasis)}
.article-content .alert-dark {--bs-alert-color:var(--bs-dark-text-emphasis);--bs-alert-bg:var(--bs-dark-bg-subtle);--bs-alert-border-color:var(--bs-dark-border-subtle);--bs-alert-link-color:var(--bs-dark-text-emphasis)}
.article-content .list-group {--bs-list-group-color:var(--bs-body-color);--bs-list-group-bg:var(--bs-body-bg);--bs-list-group-border-color:var(--bs-border-color);--bs-list-group-border-width:var(--bs-border-width);--bs-list-group-border-radius:var(--bs-border-radius);--bs-list-group-item-padding-x:1rem;--bs-list-group-item-padding-y:0.5rem;--bs-list-group-action-color:var(--bs-secondary-color);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-tertiary-bg);--bs-list-group-action-active-color:var(--bs-body-color);--bs-list-group-action-active-bg:var(--bs-secondary-bg);--bs-list-group-disabled-color:var(--bs-secondary-color);--bs-list-group-disabled-bg:var(--bs-body-bg);--bs-list-group-active-color:#fff;--bs-list-group-active-bg:#0d6efd;--bs-list-group-active-border-color:#0d6efd;display:flex;flex-direction:column;padding-right:0;margin-bottom:0;border-radius:var(--bs-list-group-border-radius)}
.article-content .list-group-item {position:relative;display:block;padding:var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x);color:var(--bs-list-group-color);text-decoration:none;background-color:var(--bs-list-group-bg);border:var(--bs-list-group-border-width) solid var(--bs-list-group-border-color)}
.article-content .list-group-item:first-child {border-top-right-radius:inherit;border-top-left-radius:inherit}
.article-content .list-group-item:last-child {border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}
.article-content .list-group-item:disabled {color:var(--bs-list-group-disabled-color);pointer-events:none;background-color:var(--bs-list-group-disabled-bg)}
.article-content .list-group-item+.list-group-item {border-top-width:0}
.article-content .list-group-flush {border-radius:0}
.article-content .list-group-flush>.list-group-item {border-width:0 0 var(--bs-list-group-border-width)}
.article-content .list-group-flush>.list-group-item:last-child {border-bottom-width:0}
.article-content .align-middle {vertical-align:middle!important}
.article-content .d-flex {display:flex!important}
.article-content .shadow {box-shadow:var(--bs-box-shadow)!important}
.article-content .shadow-sm {box-shadow:var(--bs-box-shadow-sm)!important}
.article-content .border {border:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important}
.article-content .border-0 {border:0!important}
.article-content .border-top {border-top:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important}
.article-content .border-bottom {border-bottom:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important}
.article-content .border-start {border-right:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important}
.article-content .border-danger {--bs-border-opacity:1;border-color:rgba(var(--bs-danger-rgb),var(--bs-border-opacity))!important}
.article-content .border-5 {border-width:5px!important}
.article-content .w-100 {width:100%!important}
.article-content .h-100 {height:100%!important}
.article-content .flex-grow-1 {flex-grow:1!important}
.article-content .flex-shrink-0 {flex-shrink:0!important}
.article-content .justify-content-center {justify-content:center!important}
.article-content .align-items-center {align-items:center!important}
.article-content .my-4 {margin-top:1.5rem!important;margin-bottom:1.5rem!important}
.article-content .my-5 {margin-top:3rem!important;margin-bottom:3rem!important}
.article-content .mt-3 {margin-top:1rem!important}
.article-content .mt-4 {margin-top:1.5rem!important}
.article-content .mt-5 {margin-top:3rem!important}
.article-content .mb-0 {margin-bottom:0!important}
.article-content .mb-1 {margin-bottom:.25rem!important}
.article-content .mb-2 {margin-bottom:.5rem!important}
.article-content .mb-3 {margin-bottom:1rem!important}
.article-content .mb-4 {margin-bottom:1.5rem!important}
.article-content .mb-5 {margin-bottom:3rem!important}
.article-content .ms-3 {margin-right:1rem!important}
.article-content .p-3 {padding:1rem!important}
.article-content .p-4 {padding:1.5rem!important}
.article-content .px-3 {padding-left:1rem!important;padding-right:1rem!important}
.article-content .px-5 {padding-left:3rem!important;padding-right:3rem!important}
.article-content .py-2 {padding-top:.5rem!important;padding-bottom:.5rem!important}
.article-content .py-3 {padding-top:1rem!important;padding-bottom:1rem!important}
.article-content .pt-4 {padding-top:1.5rem!important}
.article-content .pb-2 {padding-bottom:.5rem!important}
.article-content .fs-4 {font-size:calc(1.275rem + .3vw)!important}
.article-content .fs-5 {font-size:1.25rem!important}
.article-content .fw-bold {font-weight:700!important}
.article-content .text-start {text-align:right!important}
.article-content .text-center {text-align:center!important}
.article-content .text-warning {--bs-text-opacity:1;color:rgba(var(--bs-warning-rgb),var(--bs-text-opacity))!important}
.article-content .text-danger {--bs-text-opacity:1;color:rgba(var(--bs-danger-rgb),var(--bs-text-opacity))!important}
.article-content .text-dark {--bs-text-opacity:1;color:rgba(var(--bs-dark-rgb),var(--bs-text-opacity))!important}
.article-content .text-white {--bs-text-opacity:1;color:rgba(var(--bs-white-rgb),var(--bs-text-opacity))!important}
.article-content .text-muted {--bs-text-opacity:1;color:var(--bs-secondary-color)!important}
.article-content .bg-info {--bs-bg-opacity:1;background-color:rgba(var(--bs-info-rgb),var(--bs-bg-opacity))!important}
.article-content .bg-warning {--bs-bg-opacity:1;background-color:rgba(var(--bs-warning-rgb),var(--bs-bg-opacity))!important}
.article-content .bg-danger {--bs-bg-opacity:1;background-color:rgba(var(--bs-danger-rgb),var(--bs-bg-opacity))!important}
.article-content .bg-light {--bs-bg-opacity:1;background-color:rgba(var(--bs-light-rgb),var(--bs-bg-opacity))!important}
.article-content .bg-dark {--bs-bg-opacity:1;background-color:rgba(var(--bs-dark-rgb),var(--bs-bg-opacity))!important}
.article-content .bg-transparent {--bs-bg-opacity:1;background-color:transparent!important}
.article-content .rounded {border-radius:var(--bs-border-radius)!important}
.article-content .rounded-circle {border-radius:50%!important}
.article-content .rounded-pill {border-radius:var(--bs-border-radius-pill)!important}
@media (min-width:768px) {
  .article-content .d-md-none {display:none!important}
}
@media (min-width:1200px) {
  .article-content .fs-4 {font-size:1.5rem!important}
}
/* Bootstrap Icons 1.11.1 — the 18 glyphs imported bodies reference, over a
   self-hosted woff2 (the source pulls the whole font from jsDelivr). */
@font-face {
  font-family: "bootstrap-icons";
  font-display: swap;
  src: url("/vendor/fonts/bootstrap-icons/bootstrap-icons.woff2") format("woff2");
}
.article-content .bi::before,
.article-content [class^="bi-"]::before,
.article-content [class*=" bi-"]::before {
  display: inline-block;
  font-family: "bootstrap-icons" !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -0.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.article-content .bi-arrow-left-right::before { content: "\f12b"; }
.article-content .bi-award::before { content: "\f154"; }
.article-content .bi-box-seam::before { content: "\f1c7"; }
.article-content .bi-cart4::before { content: "\f245"; }
.article-content .bi-controller::before { content: "\f2d4"; }
.article-content .bi-crosshair::before { content: "\f769"; }
.article-content .bi-display::before { content: "\f302"; }
.article-content .bi-joystick::before { content: "\f448"; }
.article-content .bi-lightning-fill::before { content: "\f46e"; }
.article-content .bi-palette::before { content: "\f4b1"; }
.article-content .bi-phone::before { content: "\f4e7"; }
.article-content .bi-quote::before { content: "\f6b0"; }
.article-content .bi-shield-check::before { content: "\f52f"; }
.article-content .bi-shield-lock::before { content: "\f538"; }
.article-content .bi-snow2::before { content: "\f56e"; }
.article-content .bi-speaker::before { content: "\f57e"; }
.article-content .bi-translate::before { content: "\f658"; }
.article-content .bi-trophy-fill::before { content: "\f5e6"; }

/* ===== WordPress image chrome =====

   Inline images in the source sit in a <figure class="wp-caption"> with the
   caption in a sibling <p class="wp-caption-text">, or — for Elementor's own
   image widget — a <figcaption class="widget-image-caption">. The classes were
   dropped on import, which cost every inline caption on the site its styling,
   and the alignment classes their alignment. Both are content, not theme
   chrome, so they are carried over and styled to match the source. */

.article-content .wp-caption {
  max-width: 100%;
  margin: 0 0 1.5rem;
}

.article-content .wp-caption img,
.article-content .attachment-large,
.article-content .attachment-full,
.article-content .size-large,
.article-content .size-full {
  max-width: 100%;
  height: auto;
  display: block;
}

.article-content .wp-caption-text,
.article-content .widget-image-caption {
  margin-top: 10px;
  font-size: .95rem;
  font-style: italic;
  line-height: 1.4;
  color: #666;
  text-align: center;
}

/* WP's alignment classes are physical, not logical: alignleft is the left of
   the page in an RTL article too, which is what the source renders. */
.article-content .aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.article-content .alignleft  { float: left;  margin: 0 1.5rem 1rem 0; }
.article-content .alignright { float: right; margin: 0 0 1rem 1.5rem; }
.article-content .alignnone  { float: none; }

/* ===== Embedded tweets =====

   Four articles carry <blockquote class="twitter-tweet"> embeds. Twitter's
   widgets.js replaces each one with an iframe; until it loads — and if it never
   does, which is now the common case — the blockquote is what the reader sees,
   so it is styled to stand as a quotation on its own rather than inheriting the
   body's paragraph run. */
.article-content .twitter-tweet {
  max-width: 550px;
  margin: 1.5rem auto;
  padding: 16px 20px;
  border: 1px solid #cfd9de;
  border-radius: 12px;
  background: #fff;
  font-size: 1rem;
  line-height: 1.4;
}
.article-content .twitter-tweet p { margin: 0 0 .5rem; }
.article-content .twitter-tweet a { color: #1d9bf0; text-decoration: none; }

/* ===== .highlight-box inside the comparison templates =====

   Three stylesheets claim this class. The pull-quote treatment further up
   claims it because on the hand-built bodies that rule was written for, that is
   what the name meant: a quote with a side rule and an oversized watermark
   glyph. public/scss/article.scss claims it again as `#article_page
   .highlight-box`, with red rules above and below, centred bold text and a
   transparent fill — and that one compiles into a hashed stylesheet loaded
   after this file, at (1,1,0).

   The comparison templates use the same name for a plain tinted box holding
   running text, and ship their own CSS for it. Taking the house furniture back
   off therefore needs to beat an id selector, hence the #article_page prefix on
   the first selector; the second covers any layout that renders an article body
   without that id. */
#article_page .article-content :is(.infinix-article-v2, .gt30-article) .highlight-box,
.article-content :is(.infinix-article-v2, .gt30-article) .highlight-box {
  display: block;
  isolation: auto;
  min-height: 0;
  border: 1px solid #eee;
  border-radius: 0;
  padding: 20px;
  margin: 20px 0;
  background: #fcfcfc;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: normal;
  line-height: inherit;
  text-align: inherit;
  color: inherit;
}
#article_page .article-content :is(.infinix-article-v2, .gt30-article) .highlight-box::before,
.article-content :is(.infinix-article-v2, .gt30-article) .highlight-box::before {
  content: none;
}

/* ===== Comparison templates: parity corrections =====

   Measured against the live pages element by element. The template blocks
   above carry the source's own rules; what follows fixes where this site's
   article CSS still wins over them.

   The article theme styles body copy at high specificity — site-theme.css
   uses `.article-content p:not(.deck):not(.social-text)` (0,3,1) for family,
   size, colour and justification, and public/scss/article.scss compiles
   `#article_page …` selectors that load after this file. Matching the source
   therefore needs the id in the selector.

   Nothing here is marked !important, though. Every selector in this block is
   at (1,3,0) — an id plus three classes — which already outranks those
   #article_page rules, and each imported article now ships its OWN stylesheet
   inline with the body: same weight, later in the cascade. Marking these
   important pinned every article to one palette and one heading scale, which
   is the exact thing that per-article stylesheet exists to vary.

   Colour is set on the wrapper and left to inherit rather than forced onto
   every descendant: .badge-category, the table header and the winner columns
   all carry their own, and a blanket rule overwrites them. */

#article_page .article-content .infinix-article-v2,
#article_page .article-content .gt30-article,
.article-content .infinix-article-v2,
.article-content .gt30-article {
  font-family: Rubik, Heebo, system-ui, sans-serif;
  color: #333;
}

/* The theme names a family on paragraphs, list items and headings directly,
   so inheriting Rubik from the wrapper is not enough. */
#article_page .article-content :is(.infinix-article-v2, .gt30-article) :is(p, li, td, th, h2, h3, h4, h5, a, span, div),
.article-content :is(.infinix-article-v2, .gt30-article) :is(p, li, td, th, h2, h3, h4, h5, a, span, div) {
  font-family: Rubik, Heebo, system-ui, sans-serif;
}

/* .infinix-article-v2 carries `padding: 10px` on the source — it is what makes
   the body 720px wide inside a 740px column. .gt30-article has none. */
#article_page .article-content .infinix-article-v2,
.article-content .infinix-article-v2 { padding: 10px; }

/* The inner .article-content wrapper sets the body measure the whole template
   is sized against: 1.1rem at 1.8 leading. */
#article_page .article-content :is(.infinix-article-v2, .gt30-article) .article-content,
.article-content :is(.infinix-article-v2, .gt30-article) .article-content {
  font-size: 1.1rem;
  line-height: 1.8;
}

/* Body copy: the source's colour and the wrapper's right alignment, rather
   than the article theme's 26px justified black. */
#article_page .article-content :is(.infinix-article-v2, .gt30-article) :is(p, li),
.article-content :is(.infinix-article-v2, .gt30-article) :is(p, li) {
  font-size: 1.1rem;
  line-height: 1.8;
  /* inherit, not #333: an .alert sets its own colour on the box and the copy
     inside it is meant to pick that up. A flat value here painted the
     alert-dark note #333 where the live page has #495057. */
  color: inherit;
  text-align: right;
}

/* A .text-center box centres the copy inside it. The rule above forces right
   alignment on every p and li at (1,3,0), which outranks the .text-center
   utility's own, so the CTA's lines read right-aligned inside a
   centred block. Restated one level deeper to win it back. */
#article_page .article-content :is(.infinix-article-v2, .gt30-article) .text-center :is(p, li),
.article-content :is(.infinix-article-v2, .gt30-article) .text-center :is(p, li) {
  text-align: center;
}

/* Section headings: 1.4rem at 1.2 leading, not the 1.4 the article page gives
   its h3s. */
#article_page .article-content :is(.infinix-article-v2, .gt30-article) .section-title,
.article-content :is(.infinix-article-v2, .gt30-article) .section-title {
  font-size: 1.4rem;
  line-height: 1.2;
  color: #000;
}

/* Tables render at .9em of the body copy on the source — 15.84px against
   17.6px — and the feature column carries a grey fill. */
#article_page .article-content :is(.infinix-article-v2, .gt30-article) .table,
.article-content :is(.infinix-article-v2, .gt30-article) .table {
  font-size: .9em;
  color: #333;
}
#article_page .article-content :is(.infinix-article-v2, .gt30-article) .feature-name,
.article-content :is(.infinix-article-v2, .gt30-article) .feature-name {
  background-color: #f9f9f9;
  font-weight: 700;
  text-align: right;
}

/* Captions, the closing call to action, and in-body links. */
#article_page .article-content :is(.infinix-article-v2, .gt30-article) figcaption,
.article-content :is(.infinix-article-v2, .gt30-article) figcaption {
  margin-top: 10px;
  font-size: .95rem;
  font-style: italic;
  line-height: 1.4;
  color: #666;
  text-align: center;
}
#article_page .article-content :is(.infinix-article-v2, .gt30-article) .final-cta,
.article-content :is(.infinix-article-v2, .gt30-article) .final-cta {
  font-weight: 700;
  margin-top: 20px;
  text-align: right;
}
/* In-body links. A link styled as a button carries its own colour from
   .btn-danger / .pulse-btn, so it is excluded — otherwise the CTA's white
   label was repainted link-blue on a magenta fill. */
#article_page .article-content :is(.infinix-article-v2, .gt30-article) a:not(.btn):not(.pulse-btn):not(.btn-danger),
.article-content :is(.infinix-article-v2, .gt30-article) a:not(.btn):not(.pulse-btn):not(.btn-danger) {
  color: #0d6efd;
  text-decoration: underline;
  font-weight: 400;
}

/* Elements that carry their own colour, restated after the paragraph rule so
   the above cannot bleed into them. */
#article_page .article-content :is(.infinix-article-v2, .gt30-article) .badge-category,
.article-content :is(.infinix-article-v2, .gt30-article) .badge-category {
  color: #fff;
  font-size: .9rem;
  line-height: 1.8;
}
#article_page .article-content :is(.infinix-article-v2, .gt30-article) thead th,
.article-content :is(.infinix-article-v2, .gt30-article) thead th {
  color: #fff;
}

/* Headings inside the templates follow Bootstrap's scale, not the article
   page's own heading sizes, and take their colour from the box they sit in
   rather than the theme's #231f20. Colour is set without on
   purpose: .text-danger and the alert palettes do carry it, and they have to
   keep winning here the way they do on the live page. */
#article_page .article-content :is(.infinix-article-v2, .gt30-article) :is(h1, h2, h3, h4, h5, h6),
.article-content :is(.infinix-article-v2, .gt30-article) :is(h1, h2, h3, h4, h5, h6) {
  color: inherit;
  line-height: 1.2;
}
#article_page .article-content :is(.infinix-article-v2, .gt30-article) h1,
.article-content :is(.infinix-article-v2, .gt30-article) h1 { font-size: 2.5rem; }
#article_page .article-content :is(.infinix-article-v2, .gt30-article) h2,
.article-content :is(.infinix-article-v2, .gt30-article) h2 { font-size: 2rem; }
#article_page .article-content :is(.infinix-article-v2, .gt30-article) h3,
.article-content :is(.infinix-article-v2, .gt30-article) h3 { font-size: 1.75rem; }
#article_page .article-content :is(.infinix-article-v2, .gt30-article) h4,
.article-content :is(.infinix-article-v2, .gt30-article) h4 { font-size: 1.5rem; }
#article_page .article-content :is(.infinix-article-v2, .gt30-article) h5,
.article-content :is(.infinix-article-v2, .gt30-article) h5 { font-size: 1.25rem; }
#article_page .article-content :is(.infinix-article-v2, .gt30-article) h6,
.article-content :is(.infinix-article-v2, .gt30-article) h6 { font-size: 1rem; }
/* The .h5 class overrides the element it sits on — the source puts it on an
   h3 to get a small heading. Stated after the element rules so it wins. */
#article_page .article-content :is(.infinix-article-v2, .gt30-article) .h5,
.article-content :is(.infinix-article-v2, .gt30-article) .h5 { font-size: 1.25rem; }

/* Captions and inline text keep the template face too — the theme names a
   family on these directly, so inheriting from the wrapper is not enough. */
#article_page .article-content :is(.infinix-article-v2, .gt30-article) :is(p, li, figcaption, i, strong, em, b),
.article-content :is(.infinix-article-v2, .gt30-article) :is(p, li, figcaption, i, strong, em, b) {
  font-family: Rubik, Heebo, system-ui, sans-serif;
}

/* Table cells: Bootstrap's 1.5 leading, the source's centring, and the feature
   column right-aligned over it. */
#article_page .article-content :is(.infinix-article-v2, .gt30-article) .table :is(th, td),
.article-content :is(.infinix-article-v2, .gt30-article) .table :is(th, td) {
  line-height: 1.5;
}
/* Table cells. .text-danger cells are excluded from the colour: the winner
   column paints itself magenta and this rule would flatten it to black. */
#article_page .article-content :is(.infinix-article-v2, .gt30-article) .table-custom td:not(.text-danger),
.article-content :is(.infinix-article-v2, .gt30-article) .table-custom td:not(.text-danger) {
  color: #000;
}
/* .text-start is excluded: .gt30-article marks its feature column with the
   utility rather than .feature-name, and centring it lost the right edge the
   live table reads down. */
#article_page .article-content :is(.infinix-article-v2, .gt30-article) .table-custom td:not(.text-start),
.article-content :is(.infinix-article-v2, .gt30-article) .table-custom td:not(.text-start) {
  text-align: center;
}
#article_page .article-content :is(.infinix-article-v2, .gt30-article) .table-custom td,
.article-content :is(.infinix-article-v2, .gt30-article) .table-custom td {
  vertical-align: middle;
}
#article_page .article-content :is(.infinix-article-v2, .gt30-article) .table-custom thead th,
.article-content :is(.infinix-article-v2, .gt30-article) .table-custom thead th {
  color: #fff;
  text-align: center;
}
#article_page .article-content :is(.infinix-article-v2, .gt30-article) .feature-name,
.article-content :is(.infinix-article-v2, .gt30-article) .feature-name {
  text-align: right;
}

/* ===== Comparison tables: rules and striping =====

   The source page gets these from the WordPress theme's own table styling,
   which sits at a higher specificity than Bootstrap's .table-bordered and
   .table-striped and therefore wins there. Neither the theme nor those
   Bootstrap rules reach an imported body here — .table-bordered loses to the
   article page's own #article_page table selectors — so the finished values
   are restated at the same weight as the rest of this block.

   Measured off the live page: rows carry the horizontal rule, cells the
   vertical one, and odd body rows a 7% grey wash that the winner column's
   own fill paints over. */
/* The article page sets border-collapse:separate on its tables. A tr's border
   is only painted in collapse mode, so under separate the row rules below
   existed and drew nothing — the live table collapses. */
#article_page .article-content :is(.infinix-article-v2, .gt30-article) .table,
.article-content :is(.infinix-article-v2, .gt30-article) .table {
  border-collapse: collapse;
}
#article_page .article-content :is(.infinix-article-v2, .gt30-article) .table-bordered > :not(caption) > tr,
.article-content :is(.infinix-article-v2, .gt30-article) .table-bordered > :not(caption) > tr {
  border-top: 1px solid #dee2e6;
  border-bottom: 1px solid #dee2e6;
}
#article_page .article-content :is(.infinix-article-v2, .gt30-article) .table-bordered > :not(caption) > tr > td,
.article-content :is(.infinix-article-v2, .gt30-article) .table-bordered > :not(caption) > tr > td {
  border-top: 0;
  border-bottom: 0;
  border-right: 1px solid #dee2e6;
  border-left: 1px solid #dee2e6;
}
/* The header row's rule is the theme's translucent grey, not the cell grey,
   and it has no vertical rules of its own — the sticky second column adds
   its magenta pair on top. */
#article_page .article-content :is(.infinix-article-v2, .gt30-article) .table-custom thead th,
.article-content :is(.infinix-article-v2, .gt30-article) .table-custom thead th {
  border-top: 1px solid rgba(128, 128, 128, .5);
  border-bottom: 0;
}
#article_page .article-content :is(.infinix-article-v2, .gt30-article) .table-striped > tbody > tr:nth-of-type(odd) > *,
.article-content :is(.infinix-article-v2, .gt30-article) .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(128, 128, 128, .07);
}

/* ===== Badges inside imported bodies =====

   Two of this site's own stylesheets claim the bare `.badge` class:

     public/scss/home.scss  position:absolute, top/left 20px, z-index 100,
                            display:flex, border-radius 50% — written for the
                            homepage cards, but never scoped to them, and
                            ArticleController loads home.scss on article pages
     public.css             uppercase + letter-spacing

   The absolute positioning is what pinned an article's own badge to the
   top-left corner of the page, and because an absolutely positioned box is
   blockified it also broke the inline flow the source relies on.

   Only the properties Bootstrap does not declare need undoing here — fill,
   radius, padding and size already come from the subset and the utility
   classes at (0,2,0), which outrank both rules above. Padding and radius are
   deliberately NOT set: they come from .px-3/.py-2 and .rounded-pill on the
   markup, and setting them here would override the utilities instead. */
.article-content :is(.infinix-article-v2, .gt30-article) .badge {
  position: static;
  inset: auto;
  z-index: auto;
  width: auto;
  height: auto;
  text-transform: none;
  letter-spacing: normal;
  vertical-align: baseline;
}

/* The winner column's badge is sized by an inline `font-size: 0.6rem` on the
   source. The importer drops inline font-size on purpose — the old editor put
   18pt/24pt on nearly every span, and keeping it made body copy render half
   again too large — so the one place that genuinely needs it is restated here
   rather than reopening the property for every imported element. */
.article-content .gt30-article .winner-header .badge {
  font-size: .6rem;
}