/* Smart Blog UI, Bricks & Bytes black and white system */

.smart-blog-article {
  --sb-black:#111111;
  --sb-charcoal:#1d1d1f;
  --sb-gray-900:#242424;
  --sb-gray-800:#333333;
  --sb-gray-700:#4b4b4b;
  --sb-gray-600:#666666;
  --sb-gray-500:#7d7d7d;
  --sb-gray-400:#9d9d9d;
  --sb-gray-300:#c8c8c8;
  --sb-gray-200:#e4e4e4;
  --sb-gray-150:#efefef;
  --sb-gray-100:#f6f6f6;
  --sb-white:#ffffff;
  --sb-radius-sm:10px;
  --sb-radius-md:16px;
  --sb-radius-lg:22px;
  --sb-shadow:0 10px 30px rgba(0,0,0,.04);
  --sb-shadow-soft:0 6px 18px rgba(0,0,0,.035);
  --sb-max:100%;
}

.smart-blog-article .summary-card, .smart-blog-article .cob-widget, .smart-blog-article .stat-box, .smart-blog-article .stats-container-2-stats-box, .smart-blog-article .accordion-p-item, .smart-blog-article .standard-table-carousel-card, .smart-blog-article .comparison-container {
  background:var(--sb-white);
  color:var(--sb-black);
  border:1px solid var(--sb-gray-200);
  box-shadow:var(--sb-shadow-soft);
}

.smart-blog-article .darkpink, .smart-blog-article .darkblue, .smart-blog-article .blue, .smart-blog-article .darkeraqua {
  color:var(--sb-black) !important;
}

.smart-blog-article .darkpink {
  font-weight:700;
}

.smart-blog-article .blog-tt {
  position:relative;
  cursor:help;
  text-decoration:underline;
  text-decoration-color:var(--sb-gray-400);
  text-underline-offset:2px;
}

.smart-blog-article .blog-tt .tooltip-content {
  position:absolute;
  left:0;
  bottom:calc(100% + 10px);
  min-width:240px;
  max-width:320px;
  background:var(--sb-black);
  color:var(--sb-white);
  border-radius:12px;
  padding:12px 14px;
  font-size:13px;
  line-height:1.5;
  box-shadow:var(--sb-shadow);
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
  z-index:30;
}

.smart-blog-article .blog-tt .tooltip-content a {
  color:var(--sb-white);
  text-decoration:underline;
}

.smart-blog-article .blog-tt:hover .tooltip-content, .smart-blog-article .blog-tt:focus .tooltip-content, .smart-blog-article .blog-tt:focus-within .tooltip-content {
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

/* Comparison table */

.smart-blog-article .comparison-wrapper {
  width:100%;
  margin:24px 0;
}

.smart-blog-article .comparison-container {
  border-radius:var(--sb-radius-lg);
  overflow:hidden;
}

.smart-blog-article .table-scroll-container {
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.smart-blog-article .comparison-table {
  width:100%;
  min-width:680px;
  border-collapse:collapse;
  background:var(--sb-white);
}

.smart-blog-article .comparison-table .table-header th, .smart-blog-article .comparison-table thead th, .smart-blog-article .table-header th {
  background:var(--sb-gray-100);
  color:var(--sb-black);
  text-align:left;
  font-size:14px;
  font-weight:700;
  padding:16px 18px;
  border-bottom:1px solid var(--sb-gray-200);
}

.smart-blog-article .comparison-table .feature-row td, .smart-blog-article .feature-row td {
  padding:16px 18px;
  border-bottom:1px solid var(--sb-gray-200);
  vertical-align:top;
  font-size:15px;
  line-height:1.55;
  color:var(--sb-gray-900);
}

.smart-blog-article .comparison-table .feature-row:last-child td {
  border-bottom:none;
}

.smart-blog-article .feature-name {
  font-weight:700;
  color:var(--sb-black);
  width:28%;
}

.smart-blog-article .feature-cell {
  color:var(--sb-gray-800);
}

.smart-blog-article .feature-cell strong {
  color:var(--sb-black);
}

/* Standard table carousel */

.smart-blog-article .standard-table-carousel {
  position:relative;
  width:100%;
  margin:26px 0;
  border:1px solid var(--sb-gray-200);
  border-radius:var(--sb-radius-lg);
  overflow:hidden;
  background:var(--sb-white);
  box-shadow:var(--sb-shadow-soft);
}

.smart-blog-article .standard-table-carousel-track {
  display:flex;
  width:100%;
  transition:transform .35s ease;
  will-change:transform;
}

.smart-blog-article .standard-table-carousel-card {
  min-width:100%;
  padding:22px;
  box-sizing:border-box;
  border:none;
  box-shadow:none;
}

.smart-blog-article .standard-table-carousel-card h3, .smart-blog-article .standard-table-carousel-card h4 {
  margin:0 0 14px 0;
  color:var(--sb-black);
}

.smart-blog-article .standard-table-card-item {
  padding:14px 0;
  border-top:1px solid var(--sb-gray-200);
}

.smart-blog-article .standard-table-card-item:first-child {
  border-top:none;
  padding-top:0;
}

.smart-blog-article .standard-table-card-item:last-child {
  padding-bottom:0;
}

.smart-blog-article .standard-table-card-item strong {
  display:block;
  margin-bottom:4px;
  color:var(--sb-black);
}

.smart-blog-article .standard-table-carousel-controls {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 18px;
  border-top:1px solid var(--sb-gray-200);
  background:var(--sb-gray-100);
}

.smart-blog-article .standard-table-carousel-btns {
  display:flex;
  gap:8px;
}

.smart-blog-article .standard-table-carousel-btn {
  appearance:none;
  border:1px solid var(--sb-gray-300);
  background:var(--sb-white);
  color:var(--sb-black);
  min-width:42px;
  height:42px;
  border-radius:999px;
  cursor:pointer;
  font-size:18px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}

.smart-blog-article .standard-table-carousel-btn:hover, .smart-blog-article .standard-table-carousel-btn:focus {
  background:var(--sb-black);
  color:var(--sb-white);
  border-color:var(--sb-black);
  outline:none;
}

.smart-blog-article .standard-table-carousel-dots {
  display:flex;
  gap:8px;
  align-items:center;
}

.smart-blog-article .standard-table-carousel-dot {
  width:10px;
  height:10px;
  border-radius:999px;
  background:var(--sb-gray-300);
  border:none;
  padding:0;
  cursor:pointer;
  transition:background .18s ease, transform .18s ease;
}

.smart-blog-article .standard-table-carousel-dot.is-active {
  background:var(--sb-black);
  transform:scale(1.15);
}

/* Stat boxes */

.smart-blog-article .stats-container {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin:26px 0;
}

.smart-blog-article .stat-box {
  border-radius:var(--sb-radius-lg);
  padding:22px 18px;
  text-align:left;
}

.smart-blog-article .stat-number {
  font-size:34px;
  line-height:1;
  font-weight:800;
  color:var(--sb-black);
  letter-spacing:-.02em;
  margin-bottom:10px;
}

.smart-blog-article .stat-label {
  font-size:14px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--sb-gray-700);
  margin-bottom:8px;
}

.smart-blog-article .stat-description {
  font-size:15px;
  line-height:1.55;
  color:var(--sb-gray-800);
}

.smart-blog-article .stats-container-2-stats-wrapper {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin:26px 0;
}

.smart-blog-article .stats-container-2-stats-box {
  border-radius:var(--sb-radius-lg);
  padding:24px 20px;
}

.smart-blog-article .stats-container-2-stats-number {
  font-size:38px;
  line-height:1;
  font-weight:800;
  color:var(--sb-black);
  margin-bottom:10px;
}

.smart-blog-article .stats-container-2-stats-label {
  font-size:14px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--sb-gray-700);
  margin-bottom:8px;
}

.smart-blog-article .stats-container-2-stats-description {
  font-size:15px;
  line-height:1.55;
  color:var(--sb-gray-800);
}

/* Callout extensions */

.smart-blog-article .cob-container {
  margin:26px 0;
}

.smart-blog-article .cob-widget {
  border-radius:var(--sb-radius-lg);
  overflow:hidden;
  position:relative;
}

.smart-blog-article .cob-widget::before {
  content:"";
  display:block;
  width:100%;
  height:4px;
  background:var(--sb-black);
}

.smart-blog-article .cob-content-wrapper {
  display:grid;
  grid-template-columns:56px minmax(0,1fr);
  gap:16px;
  align-items:flex-start;
  padding:20px;
}

.smart-blog-article .cob-icon-wrapper {
  display:flex;
  align-items:flex-start;
  justify-content:center;
}

.smart-blog-article .cob-icon-circle {
  width:44px;
  height:44px;
  border-radius:999px;
  background:var(--sb-black);
  color:var(--sb-white);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}

.smart-blog-article .cob-icon {
  width:20px;
  height:20px;
  fill:currentColor;
}

.smart-blog-article .cob-text-content {
  min-width:0;
}

.smart-blog-article .cob-title {
  font-size:18px;
  line-height:1.25;
  font-weight:800;
  color:var(--sb-black);
  margin-bottom:10px;
}

.smart-blog-article .cob-description {
  color:var(--sb-gray-900);
  font-size:15px;
  line-height:1.65;
}

.smart-blog-article .cob-description p {
  margin:0 0 12px 0;
}

.smart-blog-article .cob-description p:last-child {
  margin-bottom:0;
}

.smart-blog-article .cob-highlight {
  font-weight:700;
  color:var(--sb-black);
}

.smart-blog-article .check-list {
  margin:0;
  padding-left:18px;
}

.smart-blog-article .check-list li {
  margin:0 0 10px 0;
  color:var(--sb-gray-900);
}

.smart-blog-article .check-list li:last-child {
  margin-bottom:0;
}

/* Visual variants stay monochrome */

.smart-blog-article .cob-purple, .smart-blog-article .cob-warning, .smart-blog-article .cob-info, .smart-blog-article .cob-search {
  background:var(--sb-white);
}

.smart-blog-article .cob-purple::before {background:var(--sb-black);}
.smart-blog-article .cob-warning::before {background:var(--sb-gray-700);}
.smart-blog-article .cob-info::before {background:var(--sb-gray-500);}
.smart-blog-article .cob-search::before {background:var(--sb-gray-900);}

/* Accordion */

.smart-blog-article .accordion-p-container {
  margin:28px 0;
}

.smart-blog-article .accordion-p-accordion {
  display:grid;
  gap:12px;
}

.smart-blog-article .accordion-p-item {
  border-radius:var(--sb-radius-md);
  overflow:hidden;
  padding-top:0;
}

.smart-blog-article .accordion-p-header {
  appearance:none !important;
  width:100% !important;
  padding:20px !important;
  background:var(--sb-white) !important;
  border:none !important;
  cursor:pointer !important;
  text-align:left !important;
  display:flex !important;
  align-items:center !important;
  justify-content: flex-start !important;
  gap:18px !important;
  transition:background .18s ease;
}

.smart-blog-article .accordion-p-header:hover {
  background:var(--sb-gray-100);
}

.smart-blog-article .accordion-p-header-content {
  display:flex;
  align-items:flex-start;
  gap:14px;
  min-width:0;
}

.smart-blog-article .accordion-p-icon {
  width: 20px;
  height: 24px;
  border:1px solid var(--sb-gray-300);
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:1px;
  flex:0 0 auto;
}

.smart-blog-article .accordion-p-chevron-right {
  width:9px;
  height:9px;
  border-top:2px solid var(--sb-black);
  border-right:2px solid var(--sb-black);
  transform:rotate(45deg);
  transition:transform .2s ease;
  margin-left:-2px;
}

.smart-blog-article .accordion-p-question {
  margin:0;
  font-size:17px;
  line-height:1.45;
  font-weight:700;
  color:var(--sb-black);
}

.smart-blog-article .accordion-p-toggle-icon {
  width: 300px;
  height:28px;
  position:relative;
  flex:0 0 auto;
}

.smart-blog-article .accordion-p-plus-icon, .smart-blog-article .accordion-p-plus-icon::before {
  position:absolute;
  top:50%;
  left:50%;
  width:14px;
  height:2px;
  background:var(--sb-black);
  content:"";
  transform:translate(-50%,-50%);
  border-radius:999px;
  transition:transform .2s ease, opacity .2s ease;
}

.smart-blog-article .accordion-p-plus-icon::before {
  width:2px;
  height:14px;
}

.smart-blog-article .accordion-p-item.is-open .accordion-p-plus-icon::before {
  opacity:0;
  transform:translate(-50%,-50%) scaleY(.4);
}

.smart-blog-article .accordion-p-item.is-open .accordion-p-chevron-right {
  transform:rotate(135deg);
}

.smart-blog-article .accordion-p-content {
  display:block !important;
  max-height:0;
  overflow:hidden !important;
  transition:max-height .28s ease;
}

.smart-blog-article .accordion-p-content[hidden] {
  display:block !important;
}

.smart-blog-article .accordion-p-item.is-open .accordion-p-content {
  display:block !important;
}

.smart-blog-article .accordion-p-content-inner {
  padding:0 20px 20px 20px;
}

.smart-blog-article .accordion-p-divider {
  border-top:1px solid var(--sb-gray-200);
  padding-top:16px;
}

.smart-blog-article .accordion-p-answer {
  margin:0;
  font-size:15px;
  line-height:1.7;
  color:var(--sb-gray-900);
}

/* Summary card */

.smart-blog-article .summary-card {
  margin:34px 0 0 0;
  border-radius:var(--sb-radius-lg);
  padding:24px;
}

.smart-blog-article .summary-title {
  margin:0 0 14px 0;
  font-size:24px;
  line-height:1.2;
  color:var(--sb-black);
}

.smart-blog-article .summary-description {
  margin:0 0 12px 0;
  color:var(--sb-gray-900);
  line-height:1.7;
}

.smart-blog-article .summary-description:last-of-type {
  margin-bottom:0;
}

.smart-blog-article .summary-divider {
  height:1px;
  background:var(--sb-gray-200);
  margin:22px 0;
}

.smart-blog-article .summary-main-content {
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  gap:24px;
  align-items:start;
}

.smart-blog-article .summary-links-section {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
}

.smart-blog-article .summary-section-title {
  margin:0 0 12px 0;
  font-size:15px;
  line-height:1.3;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--sb-gray-700);
}

.smart-blog-article .summary-link-list {
  list-style:none;
  margin:0;
  padding:0;
}

.smart-blog-article .summary-link-item {
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0 0 12px 0;
}

.smart-blog-article .summary-link-item:last-child {
  margin-bottom:0;
}

.smart-blog-article .summary-link-icon {
  width:16px;
  height:16px;
  stroke:var(--sb-black);
  flex:0 0 auto;
  margin-top:3px;
}

.smart-blog-article .summary-link {
  color:var(--sb-black);
  text-decoration:none;
  border-bottom:1px solid var(--sb-gray-300);
}

.smart-blog-article .summary-link:hover {
  border-bottom-color:var(--sb-black);
}

.smart-blog-article .summary-cta-section {
  display:grid;
  gap:10px;
}

.smart-blog-article .summary-cta-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 16px;
  border-radius:999px;
  background:var(--sb-black);
  color:var(--sb-white) !important;
  text-decoration:none;
  border:1px solid var(--sb-black);
  font-weight:700;
  transition:background .18s ease, color .18s ease;
}

.smart-blog-article .summary-cta-button.secondary {
  background:var(--sb-white);
  color:var(--sb-black) !important;
}

.smart-blog-article .summary-cta-button:hover {
  opacity:.92;
}

/* Generic typography polish for generated article blocks */

.smart-blog-article .summary-card p, .smart-blog-article .cob-description, .smart-blog-article .accordion-p-answer, .smart-blog-article .stat-description, .smart-blog-article .stats-container-2-stats-description, .smart-blog-article .comparison-table td, .smart-blog-article .comparison-table th, .smart-blog-article .standard-table-card-item {
  font-family:inherit;
}

.smart-blog-article table {
  max-width:100%;
}

.smart-blog-article img {
  max-width:100%;
  height:auto;
  display:block;
}

/* Responsive */

@media (max-width:980px){
  .smart-blog-article .summary-main-content {
    grid-template-columns:1fr;
  }

  .smart-blog-article .summary-links-section {
    grid-template-columns:1fr;
  }

  .smart-blog-article .stats-container {
    grid-template-columns:1fr;
  }

  .smart-blog-article .stats-container-2-stats-wrapper {
    grid-template-columns:1fr;
  }
}

@media (max-width:640px){
  .smart-blog-article .cob-content-wrapper {
    grid-template-columns:1fr;
    gap:14px;
  }

  .smart-blog-article .cob-icon-wrapper {
    justify-content:flex-start;
  }

  .smart-blog-article .summary-card {
    padding:18px;
  }

  .smart-blog-article .accordion-p-header {
    padding:16px;
  }

  .smart-blog-article .accordion-p-content-inner {
    padding:0 16px 16px 16px;
  }

  .smart-blog-article .standard-table-carousel-card {
    padding:16px;
  }

  .smart-blog-article .standard-table-carousel-controls {
    padding:12px 14px;
  }
}

.smart-blog-article .summary-link-list {
  display:grid;
  gap:14px;
}

.smart-blog-article .summary-link-item {
  margin:0;
  padding:0;
}

.smart-blog-article .summary-links-section {
  gap:30px;
}

.smart-blog-article .summary-link {
  display:inline-block;
  line-height:1.6;
}