/* ============================================================================
   Q8 CAR WASH (Posefore Wash & Polish) — BLOG DESIGN COMPONENTS  (v1.0)
   ----------------------------------------------------------------------------
   This file is the PALETTE / DESIGN REFERENCE stylesheet for the content
   pipeline. It styles every reusable on-brand article block demonstrated in
   /blog/العناية-بالسيارة-في-صيف-الكويت/ (the design-reference template page).

   HOW THE PIPELINE USES IT:
     • Each block in the template is wrapped in  <!-- ▸ BLOCK: name -->  markers.
     • Generated posts pick only the blocks that fit their content & structure.
     • Copy a block, swap the inner text/data, drop the rest.
     • Link this file AFTER /css/style.css on every generated blog post.

   RULES:
     • Never edit /css/style.css — all blog additions live here.
     • Logical properties only (inline-start/end) so every block is correct in
       both the Arabic root (RTL) and the /en/ mirror (LTR).
     • Zero JavaScript: interactive blocks use native <details> only.

   Brand: Charcoal #0D1117 · Cyan #00BCD4 · Star #FACC15
   Fonts: Clash Display (display) · IBM Plex Sans Arabic (body)
============================================================================= */

:root {
  /* Blog-component palette (bc-*) — derived from the site tokens */
  --bc-cyan-dark: #0097A7;      /* cyan that passes contrast on white */
  --bc-success: #10B981;
  --bc-success-dark: #0B815A;
  --bc-error: #EF4444;
  --bc-error-dark: #C53030;
}

/* ==========================================================================
   ARTICLE LAYOUT & BASE TYPOGRAPHY
   ========================================================================== */
.blog-post { background: var(--white); padding-bottom: 4rem; }

.blog-post-content {
  max-width: 780px;
  margin-inline: auto;
  padding: 3rem 1rem 0;
}

@media (min-width: 640px) { .blog-post-content { padding-inline: 1.5rem; } }

.blog-post-content p {
  color: var(--slate-dark);
  font-size: 1rem;
  line-height: 1.9;
  margin-bottom: 1.25rem;
}

.blog-post-content h2 {
  color: var(--charcoal);
  margin: 3rem 0 1.25rem;
  padding-inline-start: 0.9rem;
  border-inline-start: 4px solid var(--cyan);
  scroll-margin-top: 6rem;
}

.blog-post-content h3 {
  color: var(--charcoal);
  margin: 2.25rem 0 1rem;
  scroll-margin-top: 6rem;
}

.blog-post-content a:not([class]) {
  color: var(--bc-cyan-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.blog-post-content ul:not([class]) { list-style: disc; padding-inline-start: 1.5rem; margin-bottom: 1.25rem; color: var(--slate-dark); }
.blog-post-content ol:not([class]) { list-style: decimal; padding-inline-start: 1.5rem; margin-bottom: 1.25rem; color: var(--slate-dark); }

/* Inline highlight */
.blog-post-content mark {
  background: linear-gradient(transparent 55%, rgba(250, 204, 21, 0.5) 55%);
  color: inherit;
  padding: 0 2px;
}

/* Brand blockquote */
.blog-post-content blockquote {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  background: var(--light-bg);
  border-inline-start: 4px solid var(--star);
  border-radius: var(--radius-lg);
}
.blog-post-content blockquote p { margin: 0; font-weight: 600; color: var(--charcoal); font-size: 1.05rem; }

/* Figure with caption */
.blog-post-content figure { margin: 2.5rem 0; }
.blog-post-content figure img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.blog-post-content figcaption {
  margin-top: 0.6rem;
  text-align: center;
  font-size: 0.82rem;
  color: var(--slate);
}

/* ==========================================================================
   ARTICLE HERO (full-bleed cover image + charcoal gradient + cyan glow)
   Set the image per post via inline style:
   style="--hero-img:url('/images/<file>')"
   ========================================================================== */
.article-hero {
  position: relative;
  padding: clamp(7.5rem, 13vw, 9.5rem) 1rem clamp(3rem, 7vw, 4.5rem);
  color: var(--white);
  background-color: var(--charcoal);
  background-image:
    linear-gradient(115deg, rgba(13, 17, 23, 0.96) 0%, rgba(13, 17, 23, 0.82) 45%, rgba(13, 17, 23, 0.55) 100%),
    var(--hero-img, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  box-shadow: inset 0 -3px 0 var(--cyan);
}

/* Cyan glow accent in the corner */
.article-hero::after {
  content: "";
  position: absolute;
  inset-inline-end: -100px;
  bottom: -100px;
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, var(--cyan-glow), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.article-hero-inner {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

.article-hero h1 {
  font-size: clamp(1.9rem, 5vw, 3rem);
  color: var(--white);
  margin: 0;
  line-height: 1.25;
  text-wrap: balance;
}

.article-hero-lead {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.72);
  max-width: 62ch;
  line-height: 1.8;
  margin: 0;
}

/* Hero breadcrumb (overrides the centered inner-page breadcrumb) */
.article-hero .breadcrumb {
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.55);
}
.article-hero .breadcrumb a { color: var(--cyan); }
.article-hero .breadcrumb a:hover { color: var(--cyan-hover); text-decoration: none; }

/* Badges */
.hero-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.3em 0.85em;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.5;
  border-radius: 50px;
  background: var(--cyan);
  color: var(--charcoal);
}
.badge svg { width: 14px; height: 14px; }
.badge-star { background: var(--star); color: var(--charcoal); }
.badge-amber { background: var(--star); color: var(--charcoal); }
.badge-soft { background: rgba(0, 188, 212, 0.14); color: var(--cyan); border: 1px solid rgba(0, 188, 212, 0.35); }
/* Light-surface variant (inside white article body) */
.badge-light { background: var(--cyan-light); color: var(--bc-cyan-dark); }

/* Hero meta bar: author + dates + read time */
.hero-meta-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.hero-author { display: flex; align-items: center; gap: 12px; }
.author-avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--bc-cyan-dark));
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700; font-size: 1rem; color: var(--white);
  border: 2px solid rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
}
.hero-author-info { display: flex; flex-direction: column; line-height: 1.4; }
.hero-author-info strong { color: var(--white); font-weight: 700; font-size: 0.95rem; }
.hero-author-info strong a { color: inherit; text-decoration: none; }
.hero-author-info strong a:hover { text-decoration: underline; }
.hero-author-info span { font-size: 0.8rem; color: rgba(255, 255, 255, 0.55); }
.hero-divider-v { width: 1px; height: 34px; background: rgba(255, 255, 255, 0.18); }
.hero-meta-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 0.85rem; color: rgba(255, 255, 255, 0.72); }
.hero-meta-chip svg { width: 16px; height: 16px; color: var(--cyan); flex-shrink: 0; }
.hero-meta-chip strong { color: var(--white); font-weight: 600; }

/* Hero actions row: share + save */
.hero-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
  width: 100%; padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.hero-actions-label { font-weight: 700; color: var(--white); font-size: 0.85rem; margin-inline-end: 4px; }
.hero-actions .share-btn { background: rgba(255, 255, 255, 0.1); color: var(--white); width: 40px; height: 40px; }
.hero-actions .share-btn:hover { color: var(--white); }
.hero-save {
  display: inline-flex; align-items: center; gap: 7px; margin-inline-start: auto;
  padding: 0.55em 1.3em;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--white);
  border-radius: 50px;
  font-family: var(--font-body); font-weight: 700; font-size: 0.85rem;
  cursor: pointer;
  transition: all var(--transition);
}
.hero-save:hover { background: var(--star); border-color: var(--star); color: var(--charcoal); }
.hero-save svg { width: 16px; height: 16px; }

/* Hero "Summarize with AI" row */
.hero-ai { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; width: 100%; }
.hero-ai-label { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--white); font-size: 0.85rem; margin-inline-end: 4px; }
.hero-ai-label svg { width: 18px; height: 18px; color: var(--star); flex-shrink: 0; }
.ai-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0.45em 1.1em;
  background: rgba(0, 188, 212, 0.08);
  border: 1px solid rgba(0, 188, 212, 0.35);
  color: var(--white);
  border-radius: 50px;
  font-size: 0.83rem; font-weight: 600;
  transition: all var(--transition);
}
.ai-chip:hover { background: var(--cyan); color: var(--charcoal); border-color: var(--cyan); transform: translateY(-2px); }

/* ==========================================================================
   TABLE OF CONTENTS  (collapsible <details>, collapsed by default, no JS)
   ========================================================================== */
.toc {
  background: var(--light-bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
}
.toc-title {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-size: 1.05rem; font-weight: 700;
  color: var(--charcoal); margin: 0;
  cursor: pointer; list-style: none; user-select: none;
}
.toc-title::-webkit-details-marker { display: none; }
.toc-title:hover { color: var(--bc-cyan-dark); }
.toc-title svg { width: 22px; height: 22px; color: var(--cyan); flex-shrink: 0; }
/* Chevron toggles ▾ → ▴ */
.toc-title::after {
  content: ""; margin-inline-start: auto; flex-shrink: 0;
  width: 10px; height: 10px;
  border-inline-end: 2.5px solid var(--cyan);
  border-bottom: 2.5px solid var(--cyan);
  transform: rotate(45deg);
  transition: transform var(--transition);
}
.toc[open] .toc-title::after { transform: rotate(-135deg); }
.toc ol { list-style: none; counter-reset: toc; padding: 0; margin: 1rem 0 0; }
.toc li { counter-increment: toc; margin: 0; }
.toc li a {
  display: flex; align-items: baseline; gap: 10px;
  padding: 0.55rem 0.5rem;
  color: var(--slate-dark); font-weight: 600; font-size: 0.92rem;
  border-radius: var(--radius);
  border-bottom: 1px dashed var(--border-light);
  transition: all var(--transition);
}
.toc li:last-child a { border-bottom: 0; }
.toc li a::before {
  content: counter(toc);
  flex-shrink: 0;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0, 188, 212, 0.12); color: var(--bc-cyan-dark);
  border-radius: 50%; font-size: 0.78rem; font-weight: 700;
  font-family: var(--font-display);
}
.toc li a:hover { background: rgba(0, 188, 212, 0.07); color: var(--bc-cyan-dark); padding-inline-start: 0.85rem; }

/* ==========================================================================
   QUICK ANSWER / TL;DR
   ========================================================================== */
.quick-answer {
  display: flex;
  gap: 1.25rem;
  padding: 1.5rem;
  margin: 0 0 2.5rem;
  background: linear-gradient(135deg, rgba(0, 188, 212, 0.07), rgba(13, 17, 23, 0.04));
  border: 1px solid rgba(0, 188, 212, 0.25);
  border-inline-start: 5px solid var(--cyan);
  border-radius: var(--radius-lg);
}
.quick-answer .qa-icon {
  flex-shrink: 0;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: var(--cyan); color: var(--charcoal);
  border-radius: 50%;
}
.quick-answer .qa-icon svg { width: 26px; height: 26px; }
.quick-answer h3 { margin: 0 0 6px; font-size: 1.05rem; color: var(--charcoal); }
.quick-answer p { margin: 0; }

/* ==========================================================================
   CALLOUTS  (info / tip / warning / note / danger)
   ========================================================================== */
.callout {
  display: flex;
  gap: 1rem;
  padding: 1.15rem 1.4rem;
  margin: 1.75rem 0;
  border-radius: var(--radius-lg);
  border-inline-start: 5px solid var(--cyan);
  background: rgba(0, 188, 212, 0.06);
}
.callout-icon { flex-shrink: 0; width: 28px; height: 28px; color: var(--cyan); }
.callout-icon svg { width: 28px; height: 28px; }
.callout-body { flex: 1; }
.callout-body > :first-child { margin-top: 0; }
.callout-body > :last-child { margin-bottom: 0; }
.callout-title { font-weight: 700; margin-bottom: 4px; color: var(--charcoal); }
.callout p { margin-bottom: 0; font-size: 0.95rem; }

.callout-info    { border-color: var(--cyan); background: rgba(0, 188, 212, 0.06); }
.callout-info .callout-icon,    .callout-info .callout-title    { color: var(--bc-cyan-dark); }
.callout-tip     { border-color: var(--bc-success); background: rgba(16, 185, 129, 0.07); }
.callout-tip .callout-icon,     .callout-tip .callout-title     { color: var(--bc-success-dark); }
.callout-warning { border-color: var(--star); background: rgba(250, 204, 21, 0.10); }
.callout-warning .callout-icon, .callout-warning .callout-title { color: #92700C; }
.callout-note    { border-color: var(--charcoal); background: rgba(13, 17, 23, 0.04); }
.callout-note .callout-icon,    .callout-note .callout-title    { color: var(--charcoal); }
.callout-danger  { border-color: var(--bc-error); background: rgba(239, 68, 68, 0.07); }
.callout-danger .callout-icon,  .callout-danger .callout-title  { color: var(--bc-error-dark); }

/* ==========================================================================
   STAT CARDS  (headline numbers)
   ========================================================================== */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}
.stat-card {
  text-align: center;
  padding: 1.5rem 1rem;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(0, 188, 212, 0.4); }
.stat-card .stat-number {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--bc-cyan-dark);
  background: linear-gradient(135deg, var(--cyan), var(--charcoal));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat-card.star .stat-number { background: linear-gradient(135deg, var(--star), #B45309); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat-card .stat-label { margin-top: 8px; font-size: 0.85rem; color: var(--slate-dark); font-weight: 600; }

/* ==========================================================================
   FEATURE / ICON CARDS
   ========================================================================== */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}
.feature-card {
  padding: 1.5rem;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(0, 188, 212, 0.35); }
.feature-card .feature-icon {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: var(--cyan-light);
  color: var(--bc-cyan-dark);
  border-radius: var(--radius);
  margin-bottom: 0.9rem;
}
.feature-card .feature-icon svg { width: 26px; height: 26px; color: var(--bc-cyan-dark); }
.feature-card h4 { margin: 0 0 6px; color: var(--charcoal); font-size: 1rem; }
.feature-card p { margin: 0; color: var(--slate-dark); font-size: 0.9rem; line-height: 1.7; }

/* ==========================================================================
   STEP-BY-STEP PROCESS  (numbered, with connector line)
   ========================================================================== */
.steps { list-style: none; padding: 0; margin: 2rem 0; position: relative; }
.step {
  position: relative;
  display: flex;
  gap: 1.15rem;
  padding-bottom: 1.75rem;
}
.step:not(:last-child)::before {
  content: "";
  position: absolute;
  inset-inline-start: 22px;
  top: 48px; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--cyan), transparent);
}
.step-num {
  flex-shrink: 0;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--cyan), var(--bc-cyan-dark));
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.15rem;
  border-radius: 50%;
  box-shadow: 0 4px 12px var(--cyan-glow);
  z-index: 1;
}
.step-content { padding-top: 6px; }
.step-content h4 { margin: 0 0 4px; color: var(--charcoal); font-size: 1rem; }
.step-content p { margin: 0; font-size: 0.95rem; }

/* ==========================================================================
   STYLED COMPARISON / DATA TABLE  (.is-recommended highlights a row)
   ========================================================================== */
.table-wrap {
  overflow-x: auto;
  margin: 2rem 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  -webkit-overflow-scrolling: touch;
}
.styled-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  min-width: 480px;
  font-size: 0.92rem;
}
.styled-table thead th {
  background: linear-gradient(135deg, var(--charcoal), var(--charcoal-light));
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 600;
  padding: 0.85rem 1.1rem;
  text-align: start;
  white-space: nowrap;
}
.styled-table tbody td { padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--border-light); color: var(--slate-dark); }
.styled-table tbody tr:nth-child(even) { background: var(--light-bg); }
.styled-table tbody tr:hover { background: rgba(0, 188, 212, 0.05); }
.styled-table tbody tr.is-recommended { background: rgba(250, 204, 21, 0.10); }
.styled-table tbody tr.is-recommended td { font-weight: 600; color: var(--charcoal); }
.styled-table tbody tr.is-recommended td:first-child { box-shadow: inset 4px 0 0 var(--star); }
.styled-table .cell-price { font-weight: 700; color: var(--bc-cyan-dark); white-space: nowrap; }

/* ==========================================================================
   PRICING CARDS  (.featured = highlighted plan)
   Scoped under .blog-post to override the dark-glass .price-card used on the
   homepage pricing section (style.css).
   ========================================================================== */
.blog-post .pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  max-width: none;
  margin: 2rem 0;
  align-items: stretch;
}
.blog-post .price-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 1.5rem;
  background: var(--white);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: all var(--transition);
}
.blog-post .price-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); border-color: rgba(0, 188, 212, 0.35); }
.blog-post .price-card.featured { border-color: var(--cyan); box-shadow: 0 8px 30px rgba(0, 188, 212, 0.18); }
.blog-post .price-card .ribbon {
  position: absolute;
  top: 1rem;
  inset-inline-end: 1rem;
  background: var(--star); color: var(--charcoal);
  font-size: 0.7rem; font-weight: 700;
  padding: 0.25em 0.8em; border-radius: 50px;
}
.blog-post .price-plan { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--charcoal); margin-bottom: 4px; }
.blog-post .price-amount { font-family: var(--font-display); font-size: 2.2rem; font-weight: 700; color: var(--bc-cyan-dark); line-height: 1.1; }
.blog-post .price-amount small { font-size: 0.85rem; font-weight: 500; color: var(--slate); }
.blog-post .price-features { list-style: none; padding: 0; margin: 1rem 0; flex: 1; }
.blog-post .price-features li {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; color: var(--slate-dark); font-size: 0.9rem;
  border-bottom: 1px solid var(--border-light);
}
.blog-post .price-features li:last-child { border-bottom: 0; }
.blog-post .price-features li::before {
  content: "✓"; flex-shrink: 0;
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(16, 185, 129, 0.14); color: var(--bc-success-dark);
  border-radius: 50%; font-weight: 700; font-size: 0.7rem;
}

/* ==========================================================================
   PROS / CONS
   ========================================================================== */
.proscons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin: 2rem 0;
}
.proscons-col { padding: 1.5rem; border-radius: var(--radius-lg); }
.proscons .pros { background: rgba(16, 185, 129, 0.06); border: 1px solid rgba(16, 185, 129, 0.25); }
.proscons .cons { background: rgba(239, 68, 68, 0.05); border: 1px solid rgba(239, 68, 68, 0.22); }
.proscons h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 0.75rem; font-size: 1rem; }
.proscons .pros h4 { color: var(--bc-success-dark); }
.proscons .cons h4 { color: var(--bc-error-dark); }
.proscons ul { list-style: none; padding: 0; margin: 0; }
.proscons li { display: flex; gap: 8px; padding: 6px 0; color: var(--slate-dark); font-size: 0.92rem; }
.proscons li::before { flex-shrink: 0; font-weight: 700; }
.proscons .pros li::before { content: "＋"; color: var(--bc-success); }
.proscons .cons li::before { content: "－"; color: var(--bc-error); }

/* ==========================================================================
   KEY TAKEAWAY  (charcoal box with cyan glow edge)
   ========================================================================== */
.key-takeaway {
  position: relative;
  display: flex; gap: 1.25rem;
  padding: 1.75rem 2rem;
  margin: 2.5rem 0;
  background: linear-gradient(135deg, var(--charcoal), var(--charcoal-light));
  color: var(--white);
  border: 1px solid rgba(0, 188, 212, 0.35);
  border-radius: var(--radius-xl);
  box-shadow: 0 0 0 1px rgba(0, 188, 212, 0.15), 0 8px 30px rgba(0, 188, 212, 0.18);
  overflow: hidden;
}
.key-takeaway::after {
  content: "";
  position: absolute; inset-inline-end: -40px; top: -40px;
  width: 170px; height: 170px;
  background: radial-gradient(circle, var(--cyan-glow), transparent 70%);
  pointer-events: none;
}
.key-takeaway .kt-icon { flex-shrink: 0; width: 40px; height: 40px; color: var(--star); z-index: 1; }
.key-takeaway .kt-icon svg { width: 40px; height: 40px; }
.key-takeaway h3 { color: var(--white); margin: 0 0 6px; z-index: 1; }
.key-takeaway p { margin: 0; color: rgba(255, 255, 255, 0.8); z-index: 1; }

/* ==========================================================================
   CHECKLIST
   ========================================================================== */
.checklist { list-style: none; padding: 0; margin: 1.5rem 0; }
.checklist li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 0; color: var(--slate-dark); font-size: 0.97rem;
}
.checklist li svg {
  flex-shrink: 0; width: 22px; height: 22px; margin-top: 2px;
  color: var(--bc-success);
}

/* ==========================================================================
   FAQ ACCORDION  (native <details>, no JS)
   Wrapper is .faq-acc — NOT .faq — to avoid the homepage JS-driven FAQ styles.
   ========================================================================== */
.faq-acc { margin: 2rem 0; }
.faq-acc .faq-item {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  margin-bottom: 0.75rem;
  overflow: hidden;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.faq-acc .faq-item[open] { box-shadow: var(--shadow-md); border-color: rgba(0, 188, 212, 0.4); }
.faq-acc .faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.25rem;
  font-weight: 700; font-size: 0.95rem; color: var(--charcoal); cursor: pointer;
  list-style: none;
}
.faq-acc .faq-item summary::-webkit-details-marker { display: none; }
.faq-acc .faq-item summary::after {
  content: "";
  flex-shrink: 0;
  width: 10px; height: 10px;
  border-inline-end: 2.5px solid var(--cyan);
  border-bottom: 2.5px solid var(--cyan);
  transform: rotate(45deg);
  transition: transform var(--transition);
}
.faq-acc .faq-item[open] summary::after { transform: rotate(-135deg); }
.faq-acc .faq-item summary:hover { color: var(--bc-cyan-dark); }
/* Neutralize the homepage .faq-answer collapse (max-height:0) */
.faq-acc .faq-answer {
  max-height: none;
  overflow: visible;
  padding: 0 1.25rem 1rem;
  color: var(--slate-dark);
  transition: none;
}
.faq-acc .faq-answer > :first-child { margin-top: 0; }
.faq-acc .faq-answer p { margin-bottom: 0; font-size: 0.92rem; }

/* ==========================================================================
   STAR RATING + METER BARS
   (star fill comes from the site-wide .stars rule in style.css)
   ========================================================================== */
.rating { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--charcoal); }
.rating .stars svg { width: 20px; height: 20px; }
.rating small { color: var(--slate); font-weight: 600; }

.meter-row { margin: 0.75rem 0; }
.meter-row .meter-label { display: flex; justify-content: space-between; font-size: 0.85rem; font-weight: 600; color: var(--slate-dark); margin-bottom: 4px; }
.meter { height: 10px; background: var(--border-light); border-radius: 50px; overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: 50px; background: linear-gradient(90deg, var(--cyan), var(--cyan-hover)); box-shadow: 0 0 8px var(--cyan-glow); }

/* ==========================================================================
   TESTIMONIAL
   ========================================================================== */
.testimonial {
  display: flex; gap: 1.25rem;
  padding: 1.75rem 2rem;
  margin: 2.5rem 0;
  background: var(--light-bg);
  border: 1px solid var(--border-light);
  border-inline-start: 5px solid var(--star);
  border-radius: var(--radius-lg);
  position: relative;
}
.testimonial .quote-mark {
  position: absolute; inset-inline-start: 1.25rem; top: -8px;
  font-size: 3.5rem; line-height: 1; color: var(--star); opacity: 0.55; font-family: Georgia, serif;
}
.testimonial-avatar {
  flex-shrink: 0; width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--charcoal));
  display: flex; align-items: center; justify-content: center;
  color: var(--white); font-weight: 700; font-size: 1.1rem;
  font-family: var(--font-display);
}
.testimonial p { margin: 0 0 6px; font-style: italic; color: var(--charcoal); }
.testimonial cite { font-style: normal; font-weight: 700; color: var(--charcoal); font-size: 0.92rem; }
.testimonial cite span { display: block; font-weight: 600; font-size: 0.8rem; color: var(--slate); }

/* ==========================================================================
   DECORATIVE DIVIDER
   ========================================================================== */
.divider {
  display: flex; align-items: center; gap: 1.25rem;
  margin: 3rem 0;
  color: var(--cyan);
}
.divider::before, .divider::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(to left, transparent, var(--border-light), transparent);
}
.divider svg { width: 26px; height: 26px; flex-shrink: 0; }

/* ==========================================================================
   AUTHOR BIO
   ========================================================================== */
.author-bio {
  display: flex; gap: 1.25rem; align-items: center;
  padding: 1.5rem;
  margin: 2.5rem 0;
  background: var(--light-bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
}
.author-bio .author-pic {
  flex-shrink: 0; width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--charcoal), var(--cyan));
  display: flex; align-items: center; justify-content: center;
  color: var(--white); font-weight: 700; font-size: 1.25rem;
  font-family: var(--font-display);
}
.author-bio h4 { margin: 0 0 4px; color: var(--charcoal); font-size: 1rem; }
.author-bio h4 a { color: inherit; text-decoration: none; }
.author-bio h4 a:hover { color: var(--cyan-hover); }
.author-bio p { margin: 0; color: var(--slate-dark); font-size: 0.88rem; }

/* ==========================================================================
   SHARE ROW
   ========================================================================== */
.share-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
  margin: 2.5rem 0;
  padding: 1.25rem 0;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}
.share-row span { font-weight: 700; color: var(--charcoal); font-size: 0.92rem; }
.share-btn {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--light-bg); color: var(--slate-dark);
  border: 1px solid var(--border-light);
  transition: all var(--transition);
}
.share-btn:hover { transform: translateY(-3px); color: var(--white); border-color: transparent; }
.share-btn svg { width: 19px; height: 19px; }
.share-btn.x:hover { background: #000; }
.share-btn.fb:hover { background: #1877F2; }
.share-btn.wa:hover { background: var(--whatsapp); }

/* ==========================================================================
   TAG ROW
   ========================================================================== */
.tag-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0; }
.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.35em 0.95em;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--slate-dark);
  background: var(--light-bg);
  border: 1px solid var(--border-light);
  border-radius: 50px;
  transition: all var(--transition);
}
.tag:hover { background: var(--cyan); border-color: var(--cyan); color: var(--charcoal); }

/* ==========================================================================
   RELATED POSTS
   ========================================================================== */
.related-posts { margin: 3.5rem auto; max-width: 1000px; }
.related-posts > h3 { color: var(--charcoal); margin-bottom: 1.5rem; }
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.25rem;
}
.related-card {
  display: block;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition);
}
.related-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: rgba(0, 188, 212, 0.35); }
.related-card img { width: 100%; height: 150px; object-fit: cover; }
.related-card .related-body { padding: 1.1rem 1.25rem 1.25rem; }
.related-card .related-cat { font-size: 0.72rem; font-weight: 700; color: var(--bc-cyan-dark); text-transform: uppercase; letter-spacing: 0.08em; }
.related-card h4 { margin: 6px 0 0; color: var(--charcoal); font-size: 1rem; line-height: 1.45; }

/* ==========================================================================
   CLOSURE CTA BOX
   ========================================================================== */
.blog-post-cta {
  position: relative;
  max-width: 1000px;
  margin: 3.5rem auto 0;
  padding: 2.75rem 1.5rem;
  text-align: center;
  background: linear-gradient(135deg, var(--charcoal) 0%, var(--charcoal-light) 100%);
  border: 1px solid rgba(0, 188, 212, 0.25);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.blog-post-cta::after {
  content: "";
  position: absolute; inset-inline-start: -80px; top: -80px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, var(--cyan-glow), transparent 70%);
  pointer-events: none;
}
.blog-post-cta h3 { color: var(--white); font-size: clamp(1.3rem, 3vw, 1.75rem); margin-bottom: 0.6rem; position: relative; z-index: 1; }
.blog-post-cta p { color: rgba(255, 255, 255, 0.65); margin-bottom: 1.75rem; position: relative; z-index: 1; }
.blog-post-cta-buttons {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem;
  position: relative; z-index: 1;
}

/* --- BUTTON SAFETY NET: CTA + pricing links always look like real buttons --
   The site's .btn / .btn-cyan / .btn-whatsapp carry the brand styling; these
   context rules guarantee shape even if a generated post drops the class. */
.blog-post-cta-buttons a,
.blog-post .price-card a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 2rem;
  font-weight: 700;
  line-height: 1.2;
  border-radius: var(--radius);
  text-decoration: none;
  transition: all var(--transition);
}
.blog-post-cta-buttons a { font-size: 1rem; min-width: 220px; }
.blog-post .price-card a { width: 100%; margin-top: auto; font-size: 0.92rem; }
.blog-post-cta-buttons a svg, .blog-post .price-card a svg { flex-shrink: 0; width: 20px; height: 20px; }

/* Outline button variant (used on non-featured pricing cards) */
.btn-outline {
  background: transparent;
  border: 2px solid var(--cyan);
  color: var(--bc-cyan-dark);
}
.btn-outline:hover { background: var(--cyan); color: var(--charcoal); box-shadow: 0 4px 20px var(--cyan-glow); }

/* ==========================================================================
   EXTRA BLOCKS (set 2)
   ========================================================================== */

/* --- Trust badges strip -------------------------------------------------- */
.trust-strip {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.75rem 2rem;
  padding: 1.1rem 1.5rem;
  margin: 2rem 0;
  background: var(--light-bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
}
.trust-item { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--charcoal); font-size: 0.85rem; }
.trust-item svg { width: 25px; height: 25px; color: var(--cyan); flex-shrink: 0; }

/* --- Before / After showcase --------------------------------------------- */
.beforeafter { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2rem 0; }
.ba-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); margin: 0; }
.ba-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; margin: 0; border-radius: 0; box-shadow: none; }
.ba-label {
  position: absolute; top: 0.75rem; inset-inline-start: 0.75rem;
  padding: 0.3em 0.9em; border-radius: 50px;
  font-weight: 700; font-size: 0.8rem;
}
.ba-before .ba-label { background: var(--charcoal); color: var(--white); }
.ba-after  .ba-label { background: var(--cyan); color: var(--charcoal); }

/* --- Pull quote ---------------------------------------------------------- */
.pullquote {
  text-align: center; max-width: 60ch;
  margin: 3rem auto;
  padding: 1.5rem 2rem;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3vw, 1.55rem); font-weight: 600; line-height: 1.55;
  color: var(--charcoal);
}
.pullquote::before {
  content: "”"; display: block; font-family: Georgia, serif;
  font-size: 4rem; line-height: 0.4; color: var(--cyan); margin-bottom: 1rem;
}
.pullquote span { display: block; margin-top: 1rem; font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; color: var(--bc-cyan-dark); }

/* --- VS head-to-head cards ----------------------------------------------- */
.vs-wrap { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: stretch; margin: 2rem 0; }
.vs-card { padding: 1.5rem; background: var(--white); border: 2px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.vs-card.win { border-color: var(--cyan); box-shadow: 0 6px 24px rgba(0, 188, 212, 0.15); }
.vs-card h4 { margin: 0 0 0.75rem; color: var(--charcoal); display: flex; align-items: center; gap: 8px; font-size: 1rem; }
.vs-card.win h4 { color: var(--bc-cyan-dark); }
.vs-card ul { list-style: none; padding: 0; margin: 0; }
.vs-card li { padding: 5px 0; color: var(--slate-dark); font-size: 0.9rem; }
.vs-badge {
  align-self: center; width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: var(--charcoal); color: var(--cyan);
  font-family: var(--font-display); font-weight: 700;
  border-radius: 50%; box-shadow: 0 4px 12px var(--cyan-glow);
}

/* --- Coupon / offer ticket ----------------------------------------------- */
.coupon {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; margin: 2rem 0; padding: 1.5rem 2rem;
  background: linear-gradient(135deg, var(--star), #EAB308);
  color: var(--charcoal); border-radius: var(--radius-lg);
}
.coupon::before, .coupon::after {
  content: ""; position: absolute; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; background: var(--white); border-radius: 50%;
}
.coupon::before { inset-inline-start: -14px; }
.coupon::after  { inset-inline-end: -14px; }
.coupon-text h4 { margin: 0; font-size: 1.15rem; color: var(--charcoal); }
.coupon-text p { margin: 4px 0 0; font-weight: 600; color: rgba(13, 17, 23, 0.75); font-size: 0.9rem; }
.coupon-code {
  padding: 0.5em 1.2em; background: rgba(13, 17, 23, 0.1);
  border: 2px dashed var(--charcoal); border-radius: var(--radius);
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: 1px;
}

/* --- Inline mid-article CTA banner --------------------------------------- */
.cta-banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; margin: 2.5rem 0; padding: 1.5rem 2rem;
  background: linear-gradient(135deg, var(--charcoal), #063E48);
  border: 1px solid rgba(0, 188, 212, 0.3);
  border-radius: var(--radius-lg); color: var(--white);
}
.cta-banner-text h4 { margin: 0 0 4px; color: var(--white); font-size: 1.15rem; }
.cta-banner-text p { margin: 0; color: rgba(255, 255, 255, 0.7); font-size: 0.9rem; }
.cta-banner .btn { flex-shrink: 0; }

/* --- Image gallery grid -------------------------------------------------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; margin: 2rem 0; }
.gallery figure, .gallery a { margin: 0; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.gallery img { width: 100%; height: 160px; object-fit: cover; margin: 0; border-radius: 0; box-shadow: none; transition: transform var(--transition); }
.gallery img:hover { transform: scale(1.08); }

/* --- Quick info / contact card ------------------------------------------- */
.info-card { margin: 2rem 0; padding: 1.5rem; background: var(--light-bg); border: 1px solid var(--border-light); border-radius: var(--radius-lg); }
.info-card h4 { margin: 0 0 0.75rem; color: var(--charcoal); display: flex; align-items: center; gap: 8px; font-size: 1rem; }
.info-row { display: flex; align-items: center; gap: 0.75rem; padding: 9px 0; border-bottom: 1px solid var(--border-light); color: var(--slate-dark); font-size: 0.92rem; }
.info-row:last-child { border-bottom: 0; }
.info-row svg { width: 20px; height: 20px; color: var(--cyan); flex-shrink: 0; }
.info-row strong { color: var(--charcoal); }

/* --- Responsive video embed (16:9, poster + play) ------------------------- */
.video-embed {
  position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 2rem 0;
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); background: var(--charcoal);
}
.video-embed iframe, .video-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-embed .video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; }
.video-embed .play-btn {
  position: absolute; inset: 0; margin: auto; width: 74px; height: 74px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 188, 212, 0.92); color: var(--charcoal); border-radius: 50%;
  box-shadow: 0 8px 30px var(--cyan-glow); transition: transform var(--transition);
}
.video-embed:hover .play-btn { transform: scale(1.1); }
.video-embed .play-btn svg { width: 30px; height: 30px; margin-inline-start: 3px; }

/* --- Glossary / definition box ------------------------------------------- */
.glossary { margin: 2rem 0; padding: 1.5rem 2rem; background: rgba(0, 188, 212, 0.04); border: 1px solid rgba(0, 188, 212, 0.2); border-radius: var(--radius-lg); }
.glossary h4 { margin: 0 0 0.5rem; color: var(--charcoal); display: flex; align-items: center; gap: 8px; font-size: 1rem; }
.glossary h4 svg, .info-card h4 svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--cyan); }
.glossary dl { margin: 0; }
.glossary dt { font-weight: 700; color: var(--bc-cyan-dark); margin-top: 0.75rem; }
.glossary dd { margin: 2px 0 0; margin-inline-start: 0; color: var(--slate-dark); font-size: 0.92rem; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
  .quick-answer, .callout, .testimonial, .key-takeaway, .author-bio { flex-direction: column; gap: 0.75rem; }
  .key-takeaway { padding: 1.5rem; }
  .article-hero h1 { font-size: 1.7rem; }
  .blog-post-cta-buttons a { width: 100%; }
  .cta-banner { justify-content: center; text-align: center; }
}
@media (max-width: 600px) {
  .vs-wrap { grid-template-columns: 1fr; }
  .vs-badge { margin: 0 auto; }
}
@media (max-width: 540px) {
  .beforeafter { grid-template-columns: 1fr; }
  .hero-save { margin-inline-start: 0; }
}