/*
  blogsandpages.com – Site Component Styles
  Companion to style.css – uses the same Design Tokens.

  Components:
    1. Service Card
    2. Niche Card
    3. Showcase Card
    4. Template Preview Card
    5. Feature List
    6. Process Steps (Projektablauf / How It Works)
    7. Divider — wave
    8. Service Hero
    9. Features Grid
   10. Feature List Section
   11. Infographic: Compare (Theme vs. Plugins)
   12. Infographic: PageSpeed
   13. Feature Matrix
   14. Browser Mockup
   15. Deliverables List
   16. Use Case Hero
   17. Use Case Pain Points
   18. Use Case Services Grid
   19. Use Case Card (Overview)
*/

/* ==========================================================================
   1. Service Card
   ========================================================================== */

.service-card {
  background-color: var(--color-white);
  border: var(--border-width) solid var(--color-pencil);
  border-radius: var(--radius-wobbly-1);
  padding: var(--spacing-8);
  box-shadow: var(--shadow-subtle);
  text-align: center;
  transition: var(--transition-snappy);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.service-card:hover {
  transform: rotate(1deg) translateY(-4px);
  box-shadow: var(--shadow-base);
}

.service-card__illustration {
  width: 120px;
  height: auto;
  margin-bottom: var(--spacing-4);
  transition: var(--transition-snappy);
}

.service-card:hover .service-card__illustration {
  transform: rotate(-3deg) scale(1.05);
}

.service-card__icon {
  display: block;
  font-size: 3rem;
  margin-bottom: var(--spacing-4);
  transform: rotate(-3deg);
  transition: var(--transition-snappy);
}

.service-card:hover .service-card__icon {
  transform: rotate(5deg) scale(1.15);
}

.service-card__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  margin-bottom: var(--spacing-3);
  transform: rotate(-1deg);
  display: inline-block;
}

.service-card__description {
  font-size: var(--fs-body);
  color: var(--color-text-subdued);
  margin-bottom: var(--spacing-6);
  flex: 1;
  max-width: none;
}

/* Service Card CTA Button */
.service-card__btn {
  margin-top: auto;
  font-size: var(--fs-body);
  padding: 0.6rem 1.25rem;
}

/* Service Card Variants — each card gets a distinct look */
.service-card--theme {
  background-color: var(--color-accent-100);
  border-color: var(--color-accent-300);
  border-radius: var(--radius-wobbly-1);
  transform: rotate(-1deg);
}
.service-card--theme:hover { transform: rotate(2deg) translateY(-4px); }
.service-card--theme .service-card__icon { color: var(--color-accent); }
.service-card--theme .service-card__title { color: var(--color-accent-700); }
.service-card--theme .service-card__btn {
  background-color: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent-700);
}
.service-card--theme .service-card__btn:hover {
  background-color: var(--color-accent-700);
}

.service-card--custom {
  background-color: var(--color-secondary-100);
  border-color: var(--color-secondary-300);
  border-radius: var(--radius-wobbly-2);
  transform: rotate(1deg);
}
.service-card--custom:hover { transform: rotate(-2deg) translateY(-4px); }
.service-card--custom .service-card__icon { color: var(--color-secondary); }
.service-card--custom .service-card__title { color: var(--color-secondary-700); }
.service-card--custom .service-card__btn {
  background-color: var(--color-secondary);
  color: var(--color-white);
  border-color: var(--color-secondary-700);
}
.service-card--custom .service-card__btn:hover {
  background-color: var(--color-secondary-700);
}

.service-card--publishing {
  background-color: var(--color-accent-50);
  border-color: var(--color-accent-200);
  border-radius: var(--radius-wobbly-3);
  transform: rotate(0.5deg);
}
.service-card--publishing:hover { transform: rotate(-1.5deg) translateY(-4px); }
.service-card--publishing .service-card__icon { color: var(--color-accent-600); }
.service-card--publishing .service-card__title { color: var(--color-accent-700); }
.service-card--publishing .service-card__btn {
  background-color: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent-700);
}
.service-card--publishing .service-card__btn:hover {
  background-color: var(--color-accent-700);
}

.service-card--migration {
  background-color: var(--color-secondary-50);
  border-color: var(--color-secondary-200);
  border-radius: var(--radius-wobbly-1);
  transform: rotate(-0.5deg);
}
.service-card--migration:hover { transform: rotate(1.5deg) translateY(-4px); }
.service-card--migration .service-card__icon { color: var(--color-secondary-600); }
.service-card--migration .service-card__title { color: var(--color-secondary-700); }
.service-card--migration .service-card__btn {
  background-color: var(--color-secondary);
  color: var(--color-white);
  border-color: var(--color-secondary-700);
}
.service-card--migration .service-card__btn:hover {
  background-color: var(--color-secondary-700);
}

/* ==========================================================================
   2. Niche Card
   ========================================================================== */

.niche-card {
  background-color: var(--color-secondary-50);
  border: var(--border-width) solid var(--color-pencil);
  border-radius: var(--radius-wobbly-1);
  padding: var(--spacing-6);
  box-shadow: var(--shadow-subtle);
  transition: var(--transition-snappy);
  display: flex;
  flex-direction: column;
}

.niche-card:hover {
  transform: rotate(1deg) translateY(-4px);
  box-shadow: var(--shadow-base);
}

.niche-card__stamp {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 62px;
  background-color: var(--color-secondary-100);
  border: var(--border-width) solid var(--color-pencil);
  border-radius: var(--radius-wobbly-2);
  margin-bottom: var(--spacing-4);
  transform: rotate(-3deg);
  flex-shrink: 0;
  transition: var(--transition-snappy);
}

.niche-card:hover .niche-card__stamp {
  transform: rotate(3deg) scale(1.08);
}

.niche-card__stamp img {
  width: 56px;
  height: 45px;
  object-fit: contain;
  filter: drop-shadow(1px 1px 0px rgba(0,0,0,0.1));
}

.niche-card__name {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  margin-bottom: var(--spacing-3);
  transform: rotate(-1deg);
  display: inline-block;
}

.niche-card__features {
  list-style: none;
  padding: 0;
  margin-bottom: var(--spacing-4);
  flex: 1;
}

.niche-card__features li {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  padding: var(--spacing-2) 0;
  border-bottom: 1px dashed var(--color-secondary-200);
  position: relative;
  padding-left: var(--spacing-6);
}

.niche-card__features li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  color: var(--color-secondary);
  transform: rotate(-5deg);
}

.niche-card__features li:last-child {
  border-bottom: none;
}

.niche-card__link {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  color: var(--color-secondary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: var(--transition-snappy);
  margin-top: auto;
  display: inline-block;
}

.niche-card__link:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* Niche Card Variants */
.niche-card--travel {
  background-color: var(--color-secondary-50);
  border-radius: var(--radius-wobbly-2);
  transform: rotate(-1deg);
}
.niche-card--travel:hover { transform: rotate(1.5deg) translateY(-4px); }
.niche-card--travel .niche-card__stamp { background-color: var(--color-secondary-100); }

.niche-card--food {
  background-color: var(--color-secondary-100);
  border-radius: var(--radius-wobbly-1);
  transform: rotate(0.8deg);
}
.niche-card--food:hover { transform: rotate(-1.5deg) translateY(-4px); }
.niche-card--food .niche-card__stamp { background-color: var(--color-secondary-200); }

.niche-card--fitness {
  background-color: var(--color-secondary-100);
  border-radius: var(--radius-wobbly-3);
  transform: rotate(-0.5deg);
}
.niche-card--fitness:hover { transform: rotate(1deg) translateY(-4px); }
.niche-card--fitness .niche-card__stamp { background-color: var(--color-secondary-200); }

.niche-card--parenting {
  background-color: var(--color-secondary-50);
  border-radius: var(--radius-wobbly-1);
  transform: rotate(0.5deg);
}
.niche-card--parenting:hover { transform: rotate(-1deg) translateY(-4px); }
.niche-card--parenting .niche-card__stamp { background-color: var(--color-secondary-100); }

.niche-card--diy {
  background-color: var(--color-secondary-100);
  border-radius: var(--radius-wobbly-2);
  transform: rotate(0.6deg);
}
.niche-card--diy:hover { transform: rotate(-1.5deg) translateY(-4px); }
.niche-card--diy .niche-card__stamp { background-color: var(--color-secondary-200); }

/* ==========================================================================
   3. Showcase Card
   ========================================================================== */

.showcase-card {
  background-color: var(--color-white);
  border: var(--border-width) solid var(--color-pencil);
  border-radius: var(--radius-wobbly-1);
  overflow: hidden;
  box-shadow: var(--shadow-subtle);
  transition: var(--transition-snappy);
  display: flex;
  flex-direction: column;
}

.showcase-card:hover {
  transform: rotate(-1deg) translateY(-4px);
  box-shadow: var(--shadow-deep);
}

.showcase-card__screenshot {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: var(--border-width) solid var(--color-pencil);
}

.showcase-card__screenshot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-smooth);
}

.showcase-card:hover .showcase-card__screenshot img {
  transform: scale(1.04);
}

.showcase-card__badge {
  position: absolute;
  top: var(--spacing-3);
  right: var(--spacing-3);
  background-color: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
  z-index: 2;
}

.showcase-card__body {
  padding: var(--spacing-6);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.showcase-card__name {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  margin-bottom: var(--spacing-3);
  transform: rotate(-1deg);
  display: inline-block;
}

.showcase-card__tags {
  display: flex;
  gap: var(--spacing-2);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-4);
}

.showcase-card__link {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  color: var(--color-secondary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: var(--transition-snappy);
  margin-top: auto;
  display: inline-block;
}

.showcase-card__link:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.showcase-card__screenshot--placeholder {
  background-color: var(--color-secondary-50);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
}

.demos-label {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  margin-bottom: var(--spacing-6);
  transform: rotate(-1deg);
  display: inline-block;
}

/* ==========================================================================
   4. Template Preview Card
   ========================================================================== */

.template-preview-card {
  background-color: var(--color-white);
  border: var(--border-width) solid var(--color-pencil);
  border-radius: var(--radius-wobbly-1);
  overflow: hidden;
  box-shadow: var(--shadow-subtle);
  transition: var(--transition-snappy);
  display: flex;
  flex-direction: column;
}

.template-preview-card:hover {
  transform: rotate(1deg);
  box-shadow: var(--shadow-base);
}

.template-preview-card__screenshot {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-bottom: var(--border-width) solid var(--color-pencil);
  position: relative;
}

.template-preview-card__screenshot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-smooth);
}

.template-preview-card:hover .template-preview-card__screenshot img {
  transform: scale(1.03);
}

/* Browser-chrome dots (decorative) */
.template-preview-card__screenshot::before {
  content: '';
  position: absolute;
  top: var(--spacing-2);
  left: var(--spacing-3);
  width: 10px;
  height: 10px;
  background: var(--color-accent);
  border-radius: var(--radius-round);
  border: 1px solid var(--color-pencil);
  z-index: 2;
  box-shadow:
    16px 0 0 0 var(--color-warning),
    32px 0 0 0 var(--color-success);
}

.template-preview-card__body {
  padding: var(--spacing-6);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.template-preview-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-3);
  gap: var(--spacing-2);
}

.template-preview-card__name {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  margin-bottom: 0;
  transform: rotate(-1deg);
  display: inline-block;
}

.template-preview-card__features {
  list-style: none;
  padding: 0;
  margin: 0;
}

.template-preview-card__features li {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  padding: var(--spacing-1) 0;
  position: relative;
  padding-left: var(--spacing-6);
  color: var(--color-text-subdued);
}

.template-preview-card__features li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  color: var(--color-success);
  font-size: var(--fs-body);
  transform: rotate(-8deg);
}

/* ==========================================================================
   5. Feature List
   ========================================================================== */

.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  padding: var(--spacing-3) 0;
  border-bottom: 2px dashed var(--color-muted);
  transition: var(--transition-snappy);
}

.feature-list__item:last-child {
  border-bottom: none;
}

.feature-list__item:hover {
  padding-left: var(--spacing-2);
  background-color: rgba(255, 249, 196, 0.3);
  border-radius: 4px;
}

.feature-list__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body-lg);
  color: var(--color-success);
  border: 2px solid var(--color-success);
  border-radius: var(--radius-wobbly-2);
  transform: rotate(-5deg);
  transition: var(--transition-snappy);
}

.feature-list__item:hover .feature-list__check {
  transform: rotate(5deg) scale(1.1);
  background-color: var(--color-success);
  color: var(--color-white);
}

.feature-list__text {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-pencil);
  padding-top: 2px;
}

/* Two-column variant */
.feature-list--cols-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

@media (min-width: 640px) {
  .feature-list--cols-2 {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--spacing-8);
  }
}

/* ==========================================================================
   6. Process Steps (Projektablauf / How It Works)
   ========================================================================== */

.process-steps {
  position: relative;
  margin-bottom: var(--spacing-12);
}

.process-step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--spacing-6);
  margin-bottom: var(--spacing-8);
  position: relative;
}

/* Vertical connector line between steps */
.process-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 27px;
  top: 64px;
  bottom: calc(-1 * var(--spacing-8));
  width: 2px;
  background: repeating-linear-gradient(
    to bottom,
    var(--color-pencil) 0px,
    var(--color-pencil) 6px,
    transparent 6px,
    transparent 12px
  );
  opacity: 0.4;
}

.process-step__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  background-color: var(--color-accent);
  border: var(--border-width) solid var(--color-pencil);
  border-radius: var(--radius-wobbly-2);
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body-lg);
  color: var(--color-white);
  transform: rotate(-3deg);
  box-shadow: var(--shadow-subtle);
  transition: var(--transition-snappy);
}

.process-step:hover .process-step__number {
  transform: rotate(3deg) scale(1.05);
}

/* Alternate rotation for even steps */
.process-step:nth-child(even) .process-step__number {
  transform: rotate(2deg);
  background-color: var(--color-secondary);
}
.process-step:nth-child(even):hover .process-step__number {
  transform: rotate(-2deg) scale(1.05);
}

.process-step__content {
  background-color: var(--color-white);
  border: var(--border-width) solid var(--color-pencil);
  border-radius: var(--radius-wobbly-1);
  padding: var(--spacing-6);
  box-shadow: var(--shadow-subtle);
  transition: var(--transition-snappy);
}

.process-step:hover .process-step__content {
  box-shadow: var(--shadow-base);
  transform: translateY(-2px);
}

.process-step__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-3);
}

.process-step__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  margin: 0;
}

.process-step__description {
  font-size: var(--fs-body);
  color: var(--color-text-subdued);
  margin-bottom: var(--spacing-3);
  line-height: var(--lh-relaxed);
}

.process-step__details {
  margin: var(--spacing-3) 0 0;
  padding-left: var(--spacing-5);
  list-style: disc;
}
.process-step__details li {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--spacing-1);
}

.process-step__duration {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--color-text-subdued);
  background-color: var(--color-muted);
  border: 1px dashed var(--color-pencil);
  border-radius: var(--radius-sm);
  padding: 2px var(--spacing-3);
  transform: rotate(-1deg);
}

@media (min-width: 640px) {
  .process-step {
    grid-template-columns: 68px 1fr;
    gap: var(--spacing-8);
  }

  .process-step__number {
    width: 68px;
    height: 68px;
    font-size: var(--fs-h4);
  }

  .process-step:not(:last-child)::after {
    left: 33px;
    top: 76px;
  }
}

/* ==========================================================================
   6b. Crosslinks — related-content link list
   ========================================================================== */

.crosslinks__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.crosslinks__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.crosslinks__item a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
}

.crosslinks__item a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   7. Divider — wave
   ========================================================================== */

.divider-wave,
.divider-zigzag,
.divider-wave-fill {
  width: 100%;
  text-align: center;
  line-height: 0;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.divider-zigzag,
.divider-wave-fill {
  margin: -2px 0;
}

.divider-wave img,
.divider-zigzag img,
.divider-wave-fill img {
  width: 100%;
  height: 24px;
  display: block;
  margin: 0 auto;
  opacity: 0.6;
}

/* ==========================================================================
   8. Service Hero
   ========================================================================== */

.service-hero {
  text-align: center;
  margin-bottom: var(--spacing-8);
}

.service-hero__headline {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  margin-bottom: var(--spacing-3);
  transform: rotate(-1deg);
  display: inline-block;
}

.service-hero__subheadline {
  font-size: var(--fs-body-lg);
  color: var(--color-text-subdued);
  max-width: 640px;
  margin: 0 auto;
  line-height: var(--lh-relaxed);
}

.service-hero__icon {
  display: block;
  font-size: 3rem;
  margin-bottom: var(--spacing-4);
  transform: rotate(-3deg);
}

.service-hero__illustration {
  display: block;
  max-width: 240px;
  height: auto;
  margin: 0 auto var(--spacing-6);
  transition: var(--transition-snappy);
}

.service-hero__illustration:hover {
  transform: rotate(-2deg) scale(1.03);
}

/* ==========================================================================
   9. Features Grid
   ========================================================================== */

.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-6);
}

@media (min-width: 640px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .features-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.feature-card {
  background-color: var(--color-white);
  border: var(--border-width) solid var(--color-pencil);
  border-radius: var(--radius-wobbly-1);
  padding: var(--spacing-6);
  box-shadow: var(--shadow-subtle);
  transition: var(--transition-snappy);
}

.feature-card:hover {
  transform: rotate(1deg) translateY(-3px);
  box-shadow: var(--shadow-base);
}

.feature-card:nth-child(even) {
  border-radius: var(--radius-wobbly-2);
}

.feature-card:nth-child(3n) {
  border-radius: var(--radius-wobbly-3);
}

.feature-card__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  margin-bottom: var(--spacing-2);
  transform: rotate(-1deg);
  display: inline-block;
}

.feature-card__desc {
  font-size: var(--fs-body);
  color: var(--color-text-subdued);
  line-height: var(--lh-relaxed);
}

/* ==========================================================================
  10. Feature List Section (wrapper for the checklist)
   ========================================================================== */

.feature-list-section__heading {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  margin-bottom: var(--spacing-6);
  transform: rotate(-1deg);
  display: inline-block;
}

/* ==========================================================================
  11. Infographic: Compare (Theme vs. Plugins)
   ========================================================================== */

.infographic-compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-6);
  margin-bottom: var(--spacing-4);
}

@media (min-width: 640px) {
  .infographic-compare {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-8);
  }
}

.infographic-compare__side {
  border: var(--border-width) solid var(--color-pencil);
  border-radius: var(--radius-wobbly-1);
  padding: var(--spacing-6);
  box-shadow: var(--shadow-subtle);
  text-align: center;
}

.infographic-compare__side--ours {
  background-color: var(--color-secondary-50);
  border-color: var(--color-secondary);
  transform: rotate(-0.5deg);
}

.infographic-compare__side--typical {
  background-color: var(--color-accent-50);
  border-color: var(--color-accent);
  transform: rotate(0.5deg);
}

.infographic-compare__label {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  margin-bottom: var(--spacing-4);
  display: block;
}

.infographic-compare__block {
  background-color: var(--color-white);
  border: var(--border-width) solid var(--color-pencil);
  border-radius: var(--radius-wobbly-2);
  padding: var(--spacing-3) var(--spacing-4);
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  margin-bottom: var(--spacing-2);
}

.infographic-compare__block--single {
  background-color: var(--color-secondary-100);
  font-size: var(--fs-body-lg);
  padding: var(--spacing-6) var(--spacing-4);
}

.infographic-compare__stats {
  list-style: none;
  padding: 0;
  margin-top: var(--spacing-4);
  text-align: left;
}

.infographic-compare__stats li {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2);
  padding: var(--spacing-2) 0;
  font-size: var(--fs-small);
  border-bottom: 1px dashed var(--color-muted);
}

.infographic-compare__stats li:last-child {
  border-bottom: none;
}

.infographic-compare__heading {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  margin-bottom: var(--spacing-6);
  text-align: center;
  transform: rotate(-1deg);
  display: inline-block;
}

/* ==========================================================================
  12. Infographic: PageSpeed
   ========================================================================== */

.infographic-pagespeed {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-6);
  text-align: center;
}

@media (min-width: 640px) {
  .infographic-pagespeed {
    grid-template-columns: 1fr 1fr;
  }
}

.infographic-pagespeed__item {
  border: var(--border-width) solid var(--color-pencil);
  border-radius: var(--radius-wobbly-1);
  padding: var(--spacing-6);
  box-shadow: var(--shadow-subtle);
}

.infographic-pagespeed__item--good {
  background-color: var(--color-secondary-50);
  transform: rotate(-0.5deg);
}

.infographic-pagespeed__item--bad {
  background-color: var(--color-accent-50);
  transform: rotate(0.5deg);
}

.infographic-pagespeed__score {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display);
  line-height: 1;
  margin-bottom: var(--spacing-2);
}

.infographic-pagespeed__item--good .infographic-pagespeed__score {
  color: var(--color-success);
}

.infographic-pagespeed__item--bad .infographic-pagespeed__score {
  color: var(--color-accent);
}

.infographic-pagespeed__label {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  margin-bottom: var(--spacing-2);
}

.infographic-pagespeed__bar {
  height: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-pencil);
  background-color: var(--color-muted);
  overflow: hidden;
  margin-top: var(--spacing-3);
}

.infographic-pagespeed__bar-fill {
  height: 100%;
  border-radius: var(--radius-sm);
  transition: width 0.6s ease;
}

.infographic-pagespeed__item--good .infographic-pagespeed__bar-fill {
  background-color: var(--color-success);
}

.infographic-pagespeed__item--bad .infographic-pagespeed__bar-fill {
  background-color: var(--color-accent);
}

.infographic-pagespeed__heading {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  margin-bottom: var(--spacing-6);
  text-align: center;
  transform: rotate(-1deg);
  display: inline-block;
}

/* ==========================================================================
  13. Feature Matrix
   ========================================================================== */

.feature-matrix {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: var(--border-width) solid var(--color-pencil);
  border-radius: var(--radius-wobbly-1);
  overflow: hidden;
  box-shadow: var(--shadow-subtle);
  font-size: var(--fs-small);
}

.feature-matrix th,
.feature-matrix td {
  padding: var(--spacing-3) var(--spacing-4);
  text-align: left;
  border-bottom: 1px dashed var(--color-muted);
}

.feature-matrix thead th {
  background-color: var(--color-secondary-50);
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  border-bottom: var(--border-width) solid var(--color-pencil);
}

.feature-matrix tbody tr:last-child td {
  border-bottom: none;
}

.feature-matrix tbody tr:hover {
  background-color: rgba(255, 249, 196, 0.3);
}

.feature-matrix__feature {
  font-weight: var(--fw-bold);
  font-family: var(--font-heading);
}

.feature-matrix__check {
  color: var(--color-success);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
}

.feature-matrix__plugin {
  color: var(--color-text-muted);
  font-style: italic;
}

.feature-matrix__heading {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  margin-bottom: var(--spacing-6);
  transform: rotate(-1deg);
  display: inline-block;
}

/* Responsive: horizontal scroll on small screens */
.feature-matrix-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: var(--spacing-4);
}

.feature-matrix-wrap .feature-matrix {
  min-width: 540px;
}

/* ==========================================================================
  14. Browser Mockup
   ========================================================================== */

.browser-mockup {
  border: var(--border-width) solid var(--color-pencil);
  border-radius: var(--radius-wobbly-1);
  overflow: hidden;
  box-shadow: var(--shadow-base);
  background-color: var(--color-white);
  max-width: 720px;
  margin: 0 auto;
}

.browser-mockup__chrome {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  background-color: var(--color-secondary-50);
  border-bottom: var(--border-width) solid var(--color-pencil);
}

.browser-mockup__dots {
  display: flex;
  gap: 6px;
}

.browser-mockup__dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-round);
  border: 1px solid var(--color-pencil);
}

.browser-mockup__dot--red { background-color: var(--color-accent); }
.browser-mockup__dot--yellow { background-color: var(--color-warning); }
.browser-mockup__dot--green { background-color: var(--color-success); }

.browser-mockup__url {
  flex: 1;
  background-color: var(--color-white);
  border: 1px solid var(--color-muted);
  border-radius: var(--radius-sm);
  padding: var(--spacing-1) var(--spacing-3);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.browser-mockup__content {
  padding: var(--spacing-6);
  min-height: 200px;
}

/* Sketched blog layout inside mockup */
.browser-mockup__sketch-header {
  height: 24px;
  background-color: var(--color-secondary-50);
  border: 1px dashed var(--color-muted);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-4);
}

.browser-mockup__sketch-hero {
  height: 80px;
  background: linear-gradient(135deg, var(--color-secondary-50), var(--color-accent-50));
  border: 1px dashed var(--color-muted);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.browser-mockup__sketch-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-3);
}

.browser-mockup__sketch-card {
  background-color: var(--color-white);
  border: 1px dashed var(--color-muted);
  border-radius: var(--radius-sm);
  padding: var(--spacing-3);
  min-height: 80px;
}

.browser-mockup__sketch-card-img {
  height: 36px;
  background-color: var(--color-secondary-50);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-2);
}

.browser-mockup__sketch-card-line {
  height: 6px;
  background-color: var(--color-muted);
  border-radius: 3px;
  margin-bottom: var(--spacing-1);
}

.browser-mockup__sketch-card-line:nth-child(3) {
  width: 70%;
}

.browser-mockup__heading {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  margin-bottom: var(--spacing-6);
  text-align: center;
  transform: rotate(-1deg);
  display: inline-block;
}

@media (max-width: 639px) {
  .browser-mockup__sketch-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==========================================================================
  15. Deliverables List
   ========================================================================== */

.deliverables-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-4);
}

@media (min-width: 640px) {
  .deliverables-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.deliverables-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-4);
  background-color: var(--color-white);
  border: var(--border-width) solid var(--color-pencil);
  border-radius: var(--radius-wobbly-2);
  padding: var(--spacing-6) var(--spacing-6);
  box-shadow: var(--shadow-subtle);
  transition: var(--transition-snappy);
}

.deliverables-item:hover {
  box-shadow: var(--shadow-base);
  transform: translateY(-2px);
}

.deliverables-item .ds-icon {
  flex-shrink: 0;
  color: var(--color-secondary);
  margin-top: 2px;
}

.deliverables-item__text {
  font-size: var(--fs-body);
}

.deliverables-item__title {
  display: block;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  margin-bottom: var(--spacing-1);
}

.deliverables-item__desc {
  font-size: var(--fs-small);
  color: var(--color-text-subdued);
}

.deliverables-heading {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  margin-bottom: var(--spacing-6);
  transform: rotate(-1deg);
  display: inline-block;
}

/* ==========================================================================
  16. Use Case Hero
   ========================================================================== */

.use-case-hero {
  text-align: center;
  margin-bottom: var(--spacing-8);
}

.use-case-hero__headline {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  margin-bottom: var(--spacing-3);
  transform: rotate(-1deg);
  display: inline-block;
}

.use-case-hero__subheadline {
  font-size: var(--fs-body-lg);
  color: var(--color-text-subdued);
  max-width: 640px;
  margin: 0 auto;
  line-height: var(--lh-relaxed);
}

.use-case-hero__illustration {
  display: block;
  max-width: 240px;
  height: auto;
  margin: 0 auto var(--spacing-6);
  transition: var(--transition-snappy);
}

.use-case-hero__illustration:hover {
  transform: rotate(-2deg) scale(1.03);
}

/* ==========================================================================
  17. Use Case Pain Points
   ========================================================================== */

.use-case-pain-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-4);
}

@media (min-width: 640px) {
  .use-case-pain-points {
    grid-template-columns: repeat(2, 1fr);
  }
}

.use-case-pain-points__item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  padding: var(--spacing-6);
  border: 2px dashed var(--color-accent-300);
  border-radius: var(--radius-wobbly-2);
  background-color: var(--color-accent-50);
  transition: var(--transition-snappy);
}

.use-case-pain-points__item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-base);
}

.use-case-pain-points__item:nth-child(even) {
  border-radius: var(--radius-wobbly-1);
}

.use-case-pain-points__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  transform: rotate(-1deg);
  display: inline-block;
}

.use-case-pain-points__desc {
  font-size: var(--fs-body);
  color: var(--color-text-subdued);
  line-height: var(--lh-relaxed);
}

/* ==========================================================================
  18. Use Case Services Grid
   ========================================================================== */

.use-case-services {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-6);
}

@media (min-width: 640px) {
  .use-case-services {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .use-case-services {
    grid-template-columns: repeat(3, 1fr);
  }
}

.use-case-service-match {
  background-color: var(--color-white);
  border: var(--border-width) solid var(--color-pencil);
  border-radius: var(--radius-wobbly-1);
  padding: var(--spacing-6);
  box-shadow: var(--shadow-hard);
  transition: var(--transition-snappy);
  display: flex;
  flex-direction: column;
}

.use-case-service-match:hover {
  transform: rotate(1deg) translateY(-3px);
  box-shadow: var(--shadow-deep);
}

.use-case-service-match:nth-child(2) {
  border-radius: var(--radius-wobbly-2);
}

.use-case-service-match:nth-child(3) {
  border-radius: var(--radius-wobbly-3);
}

.use-case-service-match__name {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  margin-bottom: var(--spacing-3);
  transform: rotate(-1deg);
  display: inline-block;
}

.use-case-service-match__fit {
  font-size: var(--fs-body);
  color: var(--color-text-subdued);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--spacing-4);
}

.use-case-service-match__highlights {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--spacing-6);
  flex: 1;
}

.use-case-service-match__highlights li {
  font-size: var(--fs-small);
  padding: var(--spacing-2) 0;
  border-bottom: 1px dashed var(--color-muted);
  position: relative;
  padding-left: var(--spacing-6);
}

.use-case-service-match__highlights li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  color: var(--color-secondary);
  transform: rotate(-5deg);
}

.use-case-service-match__highlights li:last-child {
  border-bottom: none;
}

.use-case-service-match__btn {
  margin-top: auto;
  align-self: flex-start;
}

/* ==========================================================================
  19. Use Case Card (Overview)
   ========================================================================== */

.use-case-card {
  background-color: var(--color-white);
  border: var(--border-width) solid var(--color-pencil);
  border-radius: var(--radius-wobbly-1);
  padding: var(--spacing-8);
  box-shadow: var(--shadow-subtle);
  text-align: center;
  transition: var(--transition-snappy);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.use-case-card:hover {
  transform: rotate(1deg) translateY(-4px);
  box-shadow: var(--shadow-base);
}

.use-case-card:nth-child(2) {
  border-radius: var(--radius-wobbly-2);
}

.use-case-card:nth-child(3) {
  border-radius: var(--radius-wobbly-3);
}

.use-case-card__illustration {
  width: 120px;
  height: auto;
  margin-bottom: var(--spacing-4);
  transition: var(--transition-snappy);
}

.use-case-card:hover .use-case-card__illustration {
  transform: rotate(-3deg) scale(1.05);
}

.use-case-card__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  margin-bottom: var(--spacing-3);
  transform: rotate(-1deg);
  display: inline-block;
}

.use-case-card__tagline {
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  color: var(--color-secondary);
  margin-bottom: var(--spacing-3);
  font-weight: var(--fw-bold);
}

.use-case-card__description {
  font-size: var(--fs-body);
  color: var(--color-text-subdued);
  margin-bottom: var(--spacing-6);
  flex: 1;
  max-width: none;
}

.use-case-card__btn {
  margin-top: auto;
  font-size: var(--fs-body);
  padding: 0.6rem 1.25rem;
}