/* =====================================================================
   Marketing: Tools hub & tool cards
   - Scoped styles ONLY for /tools and tool-detail pages
   ===================================================================== */

/* Hero layout tweaks for tools hub */
.tools-hero .split-grid {
  align-items: center;
  gap: 2.5rem;
}

/* “Tool stack” pills block on the left */
.tool-stack-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1.25rem 1.5rem;
  border-radius: 1.25rem;
  background: #020617;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.55);
}

.tool-pill {
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.9);
  color: #e5e7eb;
  font-size: 0.8rem;
  font-weight: 500;
  border: 1px solid rgba(148, 163, 184, 0.45);
  white-space: nowrap;
}

.tool-stack-grid + .micro-note {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: #9ca3af;
}

/* Tools grid + cards */
.tools-grid {
  margin-top: 2rem;
}

.tools-grid .tool-card {
  background: #020617;
  color: #e5e7eb;
  border-radius: 1rem;
  padding: 1.5rem 1.25rem 1.3rem;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.35);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.tools-grid .tool-card h3 {
  font-size: 1.1rem;
  margin-bottom: 0.4rem;
}

.tools-grid .tool-card h3 a {
  color: #f9fafb;
}

.tools-grid .tool-card h3 a:hover {
  color: #a5b4fc;
}

.tools-grid .tool-card p {
  font-size: 0.9rem;
  margin-bottom: 0.9rem;
  color: #cbd5f5;
}

/* Tiny pill list inside each dark tool card */
.tools-grid .micro-list {
  margin-top: 0.25rem;
}

.tools-grid .micro-list li {
  padding: 0.35rem 0.7rem;
  font-size: 0.8rem;
  box-shadow: none;
  background: #0b1120;
  border-color: #111827;
  color: #e5e7eb;      /* good contrast on dark */
}

.tools-grid .micro-list li span {
  color: inherit;
}

/* Small-screen spacing */
@media (max-width: 768px) {
  .tools-hero .split-grid {
    gap: 1.75rem;
  }

  .tools-grid {
    margin-top: 1.5rem;
  }
}

/* =====================================================================
   Marketing shared styles (Tools / Use Cases)
   ===================================================================== */

/* 1. Use cases hero tweaks */
.use-cases-hero .chip-group {
  margin-top: 0.75rem;
  gap: 0.4rem;
}

.use-cases-hero .chip {
  font-size: 0.8rem;
  padding: 0.35rem 0.8rem;
}

.use-cases-hero .split-grid {
  align-items: flex-start;
}

.use-cases-hero .micro-note {
  margin-top: 0.75rem;
  font-size: 0.88rem;
  color: #64748b;
}

/* 2. Use case tiles: typography + pill clean-up
   (these reuse .stratmind-feature + .feature-list from styles.css) */

.section-alt.sb-title-premium .stratmind-feature,
.section.sb-title-premium .stratmind-feature {
  background: #f8fafc;
  border-radius: 1rem;
  padding: 1.25rem 1.1rem 1.1rem;
  text-align: left;
  border: 1px solid #e2e8f0;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.03);
}

.section-alt.sb-title-premium .stratmind-feature h3,
.section.sb-title-premium .stratmind-feature h3 {
  font-size: 1.02rem;
  line-height: 1.35;
  margin-bottom: 0.45rem;
  color: #0f172a;
}

.section-alt.sb-title-premium .stratmind-feature p,
.section.sb-title-premium .stratmind-feature p {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #475569;
}

/* Micro lists inside these tiles – softer pills, body-sized text */
.section-alt.sb-title-premium .stratmind-feature .micro-list,
.section.sb-title-premium .stratmind-feature .micro-list {
  margin-top: 0.6rem;
}

.section-alt.sb-title-premium .stratmind-feature .micro-list li,
.section.sb-title-premium .stratmind-feature .micro-list li {
  font-size: 0.86rem;
  padding: 0.4rem 0.75rem;
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
  color: #1f2937;
}

.section-alt.sb-title-premium .stratmind-feature .micro-list li span,
.section.sb-title-premium .stratmind-feature .micro-list li span {
  color: inherit;
}

/* Links at the bottom of each tile – keep subtle but readable */
.section-alt.sb-title-premium .stratmind-feature a,
.section.sb-title-premium .stratmind-feature a {
  font-size: 0.86rem;
  font-weight: 500;
  color: #4f46e5;
}

.section-alt.sb-title-premium .stratmind-feature a:hover,
.section.sb-title-premium .stratmind-feature a:hover {
  color: #6d28d9;
}

/* 3. Tool cards pill text (for /tools/ page only) – ensure contrast */
.tool-card .feature-list li {
  color: #f9fafb;
  background: rgba(15, 23, 42, 0.9);
  border-color: rgba(148, 163, 184, 0.5);
}

/* ============================================
   Use-cases tiles: make micro-list rows text,
   not circular / pill badges
   ============================================ */

   .section-alt.sb-title-premium .stratmind-feature .micro-list,
   .section.sb-title-premium .stratmind-feature .micro-list {
     margin-top: 0.6rem;
     padding: 0;
     list-style: none;
   }
   
   .section-alt.sb-title-premium .stratmind-feature .micro-list li,
   .section.sb-title-premium .stratmind-feature .micro-list li {
     background: none;          /* remove pill background */
     border: 0;                 /* no outline */
     box-shadow: none;
     border-radius: 0;          /* no circles */
     padding: 0.12rem 0;        /* comfy vertical spacing */
     font-size: 0.9rem;
     color: #1f2937;
   }
   
   /* optional: subtle bullet dot before each line */
   .section-alt.sb-title-premium .stratmind-feature .micro-list li::before,
   .section.sb-title-premium .stratmind-feature .micro-list li::before {
     content: "•";
     display: inline-block;
     margin-right: 0.4rem;
     font-size: 0.8rem;
     color: #9ca3af;
   }
   
   /* ============================================
   Use-cases grid: cleaner, less "wall of text"
   ============================================ */

.use-cases-grid .stratmind-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.75rem;
  margin-top: 2rem;
}

/* Card shell */
.use-cases-grid .stratmind-feature {
  background: #f9fafb;
  border-radius: 1.1rem;
  padding: 1.4rem 1.3rem 1.25rem;
  border: 1px solid #e5eaf5;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
}

/* Card heading area */
.use-cases-grid .stratmind-feature .kicker {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
  color: #9ca3af;
}

.use-cases-grid .stratmind-feature h3 {
  font-size: 1.02rem;
  line-height: 1.3;
  margin-bottom: 0.35rem;
}

/* Main paragraph */
.use-cases-grid .stratmind-feature > p {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #4b5563;
  margin-bottom: 0.6rem;
}

/* Bullet list inside tiles – lighter + compact */
.use-cases-grid .micro-list {
  margin-top: 0.25rem;
  margin-bottom: 0.55rem;
}

.use-cases-grid .micro-list li {
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0.12rem 0;
  font-size: 0.86rem;
  color: #4b5563;
}

.use-cases-grid .micro-list li::before {
  content: "•";
  display: inline-block;
  margin-right: 0.4rem;
  font-size: 0.78rem;
  color: #cbd5e1;
}

/* Links at the bottom of each card */
.use-cases-grid .stratmind-feature p a {
  font-size: 0.86rem;
  font-weight: 600;
}

/* Desktop: lock to 3 columns so it feels intentional */
@media (min-width: 1024px) {
  .use-cases-grid .stratmind-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ============================================
   Marketing – Workflows hub
   ============================================ */

/* Hero tweaks */
.workflows-hero .micro-note {
  margin-top: 0.9rem;
  font-size: 0.88rem;
  color: #64748b;
}

/* Mini map inside hero visual */
.workflow-mini-map {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
  padding: 1.1rem 1.25rem;
  border-radius: 1rem;
  background: #020617;
  color: #e5e7eb;
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.7);
}

.workflow-mini-step {
  padding: 0.55rem 0.65rem;
  border-radius: 0.75rem;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.4);
  font-size: 0.86rem;
}

.workflow-mini-step .label {
  display: inline-block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  opacity: 0.85;
  margin-bottom: 0.15rem;
}

/* Workflow cards grid */
.workflow-grid {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.75rem;
}

.workflow-card {
  background: #ffffff;
  border-radius: 1rem;
  padding: 1.6rem 1.4rem 1.5rem;
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.workflow-card h3 {
  font-size: 1.15rem;
  margin: 0.1rem 0 0.15rem;
}

.workflow-tag {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #64748b;
}

.workflow-summary {
  font-size: 0.92rem;
  color: #4b5563;
}

.workflow-points {
  margin: 0.4rem 0 0.3rem;
  padding-left: 1.15rem;
  font-size: 0.9rem;
  color: #4b5563;
}

.workflow-points li + li {
  margin-top: 0.25rem;
}

.workflow-links a {
  font-size: 0.9rem;
  font-weight: 600;
}

.workflow-links small {
  display: block;
  margin-top: 0.1rem;
  color: #6b7280;
}

/* Subtle hover lift */
@media (hover: hover) {
  .workflow-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08);
  }
}

/* System explainer three-column grid */
.workflow-system-grid {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.workflow-system-card {
  background: #ffffff;
  border-radius: 0.9rem;
  padding: 1.3rem 1.2rem;
  border: 1px solid #e5e7eb;
  text-align: left;
  font-size: 0.92rem;
  color: #4b5563;
}

.workflow-system-card h3 {
  font-size: 1.02rem;
  margin-bottom: 0.4rem;
}

/* Timeline section */
.workflow-timeline-steps {
  margin-top: 1.8rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.25rem;
  counter-reset: wf-step;
  list-style: none;
  padding-left: 0;
}

.workflow-step {
  background: #ffffff;
  border-radius: 0.9rem;
  padding: 1.1rem 1rem;
  border: 1px solid #e5e7eb;
  font-size: 0.9rem;
  color: #4b5563;
  position: relative;
}

.workflow-step h3 {
  font-size: 0.96rem;
  margin-bottom: 0.35rem;
}

/* FAQ wrapper spacing */
.workflows-faq .faq-list {
  margin-top: 1.75rem;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .workflow-mini-map {
    margin-top: 1rem;
  }
}

/* ============================================
   Ecommerce workflow timeline (use-case pages)
   ============================================ */

   .workflow-timeline {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  
  .workflow-timeline .timeline-list {
    list-style: none;
    margin: 2rem auto 0;
    padding: 0;
    max-width: 760px;
    counter-reset: ecom-step;
  }
  
  /* Each step row */
  .workflow-timeline .timeline-list li {
    position: relative;
    padding-left: 3.25rem;
    padding-bottom: 1.6rem;
    margin-bottom: 0.4rem;
    border-left: 2px solid #e2e8f0; /* soft vertical line */
  }
  
  /* Remove line on last item for a clean finish */
  .workflow-timeline .timeline-list li:last-child {
    border-left-color: transparent;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  
  /* Number badge (separate from text, so it never wraps/cuts) */
  .workflow-timeline .timeline-list li::before {
    counter-increment: ecom-step;
    content: counter(ecom-step);
    position: absolute;
    left: -1.1rem;
    top: 0.15rem;
    width: 2rem;
    height: 2rem;
    border-radius: 0.75rem;              /* rounded square, not a circle */
    background: linear-gradient(135deg,#6F00FF,#22d3ee);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 8px 20px rgba(15,23,42,0.18);
  }
  
  /* Step title */
  .workflow-timeline .timeline-list h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.35rem;
    color: #0f172a;
  }
  
  /* Step description */
  .workflow-timeline .timeline-list p {
    margin: 0;
    font-size: 0.93rem;
    line-height: 1.6;
    color: #4b5563;
  }
  
  /* Micro note under the list */
  .workflow-timeline .micro-note {
    margin-top: 1.75rem;
    font-size: 0.9rem;
  }
  
  /* Mobile tweaks */
  @media (max-width: 640px) {
    .workflow-timeline .timeline-list {
      margin-top: 1.5rem;
    }
  
    .workflow-timeline .timeline-list li {
      padding-left: 2.75rem;
      padding-bottom: 1.3rem;
    }
  
    .workflow-timeline .timeline-list li::before {
      left: -1.2rem;
      width: 1.8rem;
      height: 1.8rem;
      font-size: 0.85rem;
    }
  }
  
  /* ======================================================
   Workflow: schedule table (Sample rhythm)
   ====================================================== */

.schedule-table-wrapper {
  margin-top: 2rem;
  overflow-x: auto;
}

.schedule-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 1rem;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  font-size: 0.95rem;
}

.schedule-table thead {
  background: #0f172a;
  color: #e5e7eb;
}

.schedule-table th,
.schedule-table td {
  padding: 0.85rem 1rem;
  text-align: left;
  vertical-align: top;
}

.schedule-table th {
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.schedule-table tbody tr:nth-child(even) {
  background: #f9fafb;
}

.schedule-table tbody tr:nth-child(odd) {
  background: #ffffff;
}

.schedule-table tbody tr + tr td {
  border-top: 1px solid #e5e7eb;
}

.schedule-table td:first-child {
  white-space: nowrap;
  font-weight: 600;
  color: #111827;
}

.schedule-table td:nth-child(2) {
  color: #374151;
}

.schedule-table td:last-child {
  color: #4b5563;
  font-size: 0.9rem;
}

/* Small screens: keep it readable */
@media (max-width: 640px) {
  .schedule-table th,
  .schedule-table td {
    padding: 0.75rem 0.75rem;
  }

  .schedule-table td:last-child {
    min-width: 140px;
  }
}

/* Micro note under table */
.schedule-table-wrapper + .micro-note {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: #6b7280;
}



/* ======================================================
   Workflow: FAQ block (Questions)
   ====================================================== */

.faq-section {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.faq-grid .faq-item {
  background: #ffffff;
  border-radius: 1rem;
  padding: 1.4rem 1.5rem;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.35);
}

.faq-grid .faq-item h3 {
  font-size: 1rem;
  margin: 0 0 0.6rem;
  color: #0f172a;
  font-weight: 700;
}

.faq-grid .faq-item p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.55;
  color: #4b5563;
}

/* Subtle hover lift */
@media (hover: hover) {
  .faq-grid .faq-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
  }
}

/* Mobile spacing */
@media (max-width: 640px) {
  .faq-section {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .faq-grid {
    gap: 1.25rem;
  }
}

/* ============================================
   Comparisons hub
   ============================================ */

   .comparison-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.75rem;
    margin-top: 2rem;
  }
  
  .comparison-card {
    background: #ffffff;
    border-radius: 1.2rem;
    padding: 1.4rem 1.5rem;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(148, 163, 184, 0.4);
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
  }
  
  .comparison-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
  }
  
  .comparison-tag {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6366f1;
    background: rgba(99, 102, 241, 0.06);
    display: inline-block;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
  }
  
  .comparison-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
  }
  
  .comparison-card h3 a {
    color: #0f172a;
  }
  
  .comparison-card h3 a:hover {
    color: #6F00FF;
  }
  
  .comparison-summary {
    font-size: 0.95rem;
    color: #4b5563;
  }
  
  .comparison-points {
    list-style: none;
    margin: 0.4rem 0 0.2rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.9rem;
    color: #374151;
  }
  
  .comparison-points li::before {
    content: "•";
    margin-right: 0.4rem;
    color: #9ca3af;
  }
  
  .comparison-link {
    margin-top: 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
  }
  
  .comparison-link a {
    color: #6F00FF;
  }
  
  .comparison-link a:hover {
    text-decoration: underline;
  }
  
  /* FAQ grid variant for comparisons */
  .faq-section .faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
  }
  
  .faq-section .faq-item {
    background: #ffffff;
    border-radius: 1rem;
    padding: 1.2rem 1.3rem;
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
  }
  
  .faq-section .faq-item h3 {
    font-size: 0.98rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
    color: #0f172a;
  }
  
  .faq-section .faq-item p {
    font-size: 0.9rem;
    color: #4b5563;
    line-height: 1.5;
  }
  
  /* ============================================
   Leo · AI Reel Maker – hero video
   ============================================ */

.reel-hero-figure {
  margin: 0;
}

.reel-hero-video {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  background: #020617;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.22);
  max-width: 360px;
  margin-inline: auto;
}

.reel-hero-video video {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 9 / 16;    /* vertical preview */
  object-fit: cover;
}

/* Slightly tighten caption under hero video */
.reel-hero-figure .micro-note {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: #6b7280;
}

/* On larger screens, let the video breathe a bit more */
@media (min-width: 1024px) {
  .tools-hero .col-media {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .reel-hero-video {
    max-width: 400px;
  }
}

/* ============================
   Use case blocks (Reel Maker, etc.)
   ============================ */

   .usecase-block {
    background: #f9fafb;
    border-radius: 1.25rem;
    padding: 1.5rem 1.75rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }
  
  /* Tiny label above each card */
  .usecase-block .figure-tag {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: 0.3rem;
  }
  
  /* Headline inside card */
  .usecase-block h3 {
    font-size: 1.05rem;
    margin-bottom: 0.35rem;
  }
  
  /* Bullet list inside use case cards */
  .usecase-block .feature-list {
    margin-top: 0.6rem;
    padding-left: 0;
  }
  
  .usecase-block .feature-list li {
    list-style: none;
    font-size: 0.9rem;
    line-height: 1.5;
    padding: 0.3rem 0 0.3rem 0.85rem;
    border-left: 2px solid #e5e7eb;
  }
  
  /* Micro-note link at the bottom */
  .usecase-block .micro-note {
    margin-top: 0.75rem;
    font-size: 0.84rem;
    color: #6b7280;
  }
  
  /* Spacing between columns on desktop */
  .section-alt .split-grid {
    gap: 2rem;
  }
  
  /* Stack cards nicely on mobile */
  @media (max-width: 768px) {
    .usecase-block {
      padding: 1.25rem 1.4rem;
    }
  }
  
/* Chatbot tool hero image sizing */
.chatbot-hero-figure {
  max-width: 260px;        /* desktop size */
  margin: 0;               /* align left by default */
  padding: 0.75rem;
  border-radius: 1.5rem;   /* curved outer edges */
  overflow: hidden;        /* clip image corners */
}

.chatbot-hero-figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 1.25rem;  /* curved image edges */
  object-fit: cover;
}

/* On medium/small screens, center it and let it breathe */
@media (max-width: 768px) {
  .chatbot-hero-figure {
    margin: 0 auto;
    max-width: 70vw;
  }
}

/* ================
   IMAGE PREVIEW GRID
   ================ */

   .image-preview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;       /* side by side on desktop */
    gap: 2rem;
    margin: 2rem 0;
    align-items: start;
  }
  
  /* Each card */
  .image-preview-card {
    background: #ffffff10;                /* subtle glassy background */
    padding: 1rem;
    border-radius: 1.2rem;
    backdrop-filter: blur(6px);
    border: 1px solid #ffffff15;
    text-align: center;
  }
  
  /* Images inside */
  .image-preview-card img {
    width: 100%;
    max-width: 280px;                     /* shrink images significantly */
    margin: 0 auto;
    border-radius: 1rem;
    display: block;
    object-fit: cover;
  }
  
  /* Caption styling */
  .image-preview-card .micro-note {
    margin-top: 0.75rem;
    opacity: 0.8;
    font-size: 0.8rem;
  }
  
  /* MOBILE — stack + shrink */
  @media (max-width: 768px) {
    .image-preview-grid {
      grid-template-columns: 1fr;         /* stack vertically */
      gap: 1.5rem;
    }
  
    .image-preview-card img {
      max-width: 70vw;                    /* reduce size on mobile */
    }
  }
  
  /* VERY SMALL SCREENS */
  @media (max-width: 480px) {
    .image-preview-card img {
      max-width: 85vw;
    }
  }
  
  /* ============================================
   Blog Writer Hero Image (Mira)
   ============================================ */

.blog-hero-figure {
  max-width: 260px;            /* Small, clean hero size on desktop */
  margin: 0;                   /* Left-align by default (desktop) */
  padding: 0.75rem;
  border-radius: 1.5rem;       /* curved container edges */
  overflow: hidden;            /* clip corners */
  background: #ffffff08;       /* subtle softness (optional) */
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.20);
}

.blog-hero-figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 1.25rem;      /* curved image inside */
  object-fit: cover;
}

/* On medium & mobile, center it & allow more breathing room */
@media (max-width: 900px) {
  .tools-hero .col-media .blog-hero-figure {
    margin: 0 auto;
    max-width: 70vw;
  }
}

@media (max-width: 480px) {
  .blog-hero-figure {
    max-width: 80vw;
  }
}

/* ============================================================
   Prompt Library — Scoped Styling for /prompts/*
   ============================================================ */

/* Hero layout (tools hero reused for prompts) */
.tools-hero .split-grid {
  align-items: center;
  gap: 2.5rem;
}

.tools-hero .hero-title {
  margin-bottom: 1rem;
}

.tools-hero .hero-ctas .btn {
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Prompt “pill” grid */
.tool-stack-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1.25rem 1.5rem;
  border-radius: 1.25rem;
  background: #020617;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.55);
}

.tool-pill {
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: rgba(15,23,42,0.9);
  color: #e5e7eb;
  font-size: 0.8rem;
  border: 1px solid rgba(148,163,184,0.45);
  white-space: nowrap;
}

/* Template block — code/prompt box */
.template-block {
  background: #0f172a;
  color: #e2e8f0;
  padding: 1.25rem;
  border-radius: 1rem;
  box-shadow: 0 18px 40px rgba(15,23,42,0.45);
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.template-block pre {
  white-space: pre-wrap;
  font-family: Consolas, Menlo, monospace;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #f1f5f9;
}

/* Prompt group headers */
.offer-heading {
  margin-top: 0.3rem;
  margin-bottom: 1rem;
}

.section-subtext {
  max-width: 650px;
}

/* FAQ reused for prompt pages */
.faq-grid {
  margin-top: 2rem;
}

/* Related Tools / Templates dark grid */
.tools-grid {
  margin-top: 2rem;
}

.tool-card {
  background: #020617;
  color: #e5e7eb;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 18px 40px rgba(15,23,42,0.55);
  border: 1px solid rgba(148,163,184,0.35);
}

.tool-card h3 {
  font-size: 1.1rem;
  margin-bottom: 0.4rem;
}

/* CTA block */
.final-cta {
  padding-top: 3rem;
  padding-bottom: 3rem;
  text-align: center;
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .tools-hero .split-grid {
    gap: 1.8rem;
  }

  .template-block {
    padding: 1rem;
  }
}
/* ============================================================
   AI Models – shared layout & tiles
   ============================================================ */

/* Optional: if you add class="ai-models-hero" on hero sections */
.ai-models-hero .split-grid {
  align-items: center;
  gap: 2.5rem;
}

/* Sections that use the 'comparison-section' helper class
   (used in AI model capability tables & before/after sections) */
.comparison-section {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

/* We already use .schedule-table-wrapper/.schedule-table,
   so comparison-table-wrapper just reuses that spacing */
.comparison-table-wrapper {
  margin-top: 2rem;
}

/* ============================================================
   AI Models – prompt pattern tiles
   (used in gpt_5_1, nano_banana_pro, flux_2, veo_3_1, gemini_3_pro,
    claude_3_7_sonnet pages)
   ============================================================ */

.prompt-grid {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.prompt-card {
  background: #ffffff;
  border-radius: 1rem;
  padding: 1.25rem 1.3rem 1.2rem;
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.04);
  font-size: 0.92rem;
  color: #4b5563;
}

.prompt-card h3 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
  color: #0f172a;
}

/* Code / prompt block inside each card */
.prompt-snippet {
  background: #0f172a;
  border-radius: 0.9rem;
  padding: 1rem 1.1rem;
  overflow-x: auto;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.45);
}

.prompt-snippet code {
  font-family: Consolas, Menlo, Monaco, "SF Mono", monospace;
  font-size: 0.88rem;
  line-height: 1.6;
  color: #e5e7eb;
  white-space: pre-wrap;
}

/* Mobile tweaks for prompt tiles */
@media (max-width: 768px) {
  .prompt-card {
    padding: 1.1rem 1.1rem 1rem;
  }

  .prompt-snippet {
    padding: 0.9rem;
  }
}

/* ============================================================
   AI Models – misc helpers
   ============================================================ */

/* Make sure .stratmind-feature tiles inside AI model pages
   look like your existing use-case/workflow tiles */
.section-alt.sb-title-premium .stratmind-feature,
.section.sb-title-premium .stratmind-feature {
  /* already styled above in your CSS; this is here only so
     AI model sections that use sb-title-premium stay consistent */
}