body.how-it-works-page {
  --how-burgundy: #451421;
  --how-ivory: #f7f3eb;
  --how-ink: #302722;
  --how-muted: #625850;
  --how-rule: #cfc2af;
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  background: var(--how-ivory);
  color: var(--how-ink);
  font-family: 'DM Sans', Arial, sans-serif;
}

.how-it-works-page::before,
.how-it-works-page::after {
  position: fixed;
  z-index: -1;
  top: 0;
  bottom: 0;
  width: clamp(76px, 15vw, 230px);
  background-image: url('../assets/images/howitworks-bg.png');
  background-repeat: no-repeat;
  background-size: 100vw 100vh;
  content: '';
  pointer-events: none;
}

.how-it-works-page::before {
  left: 0;
  background-position: left top;
}

.how-it-works-page::after {
  right: 0;
  background-position: right top;
}

.how-it-works-page :focus-visible {
  outline: 2px solid #9e6d3d;
  outline-offset: 3px;
}

.how-it-works-page header.topbar {
  background-color: var(--how-burgundy) !important;
  border-bottom: 1px solid rgba(245, 239, 229, 0.2);
  box-shadow: 0 2px 8px rgba(30, 9, 14, 0.12);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.how-it-works-page .how-main {
  position: relative;
  z-index: 0;
  padding: 34px clamp(16px, 4vw, 48px) 40px;
}

.how-content {
  width: min(100%, 1100px);
  margin-inline: auto;
  padding: 0 clamp(12px, 2.2vw, 28px);
  background-color: var(--how-ivory);
  background-image:
    linear-gradient(rgba(247, 243, 235, 0.93), rgba(247, 243, 235, 0.93)),
    url('../assets/images/linen-texture.webp');
  background-size: auto, 420px 280px;
  background-repeat: no-repeat, repeat;
}

.how-heading,
.how-section-heading {
  text-align: center;
}

.how-heading {
  margin: 0 auto 27px;
}

.how-heading h1,
.how-section-heading h2,
.how-gallery-heading h2,
.how-cta h2 {
  margin: 0;
  color: var(--how-burgundy);
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.025em;
}

.how-heading h1 {
  font-size: clamp(2rem, 3.3vw, 2.7rem);
  line-height: 1.18;
}

.how-subtitle {
  margin: 8px 0 0;
  color: var(--how-muted);
  font-size: 0.98rem;
  line-height: 1.5;
}

.how-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.how-step {
  min-width: 0;
  padding: 5px clamp(14px, 2.1vw, 30px) 8px;
  border-left: 1px solid var(--how-rule);
  text-align: left;
}

.how-step:first-child {
  border-left: 0;
  padding-left: 0;
}

.how-step:last-child {
  padding-right: 0;
}

.how-step-number {
  display: block;
  margin-bottom: 9px;
  color: #9b7753;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 1.25rem;
  line-height: 1;
}

.how-step h2 {
  margin: 0 0 7px;
  color: var(--how-burgundy);
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 1.08rem;
  font-weight: 500;
  line-height: 1.3;
}

.how-step p {
  max-width: 225px;
  margin: 0;
  color: var(--how-muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

.before-start {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  margin: 21px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--how-rule);
  color: var(--how-muted);
  font-size: 0.79rem;
  line-height: 1.5;
  text-align: center;
}

.before-start strong {
  color: var(--how-burgundy);
  font-weight: 600;
}

.how-templates,
.how-faq {
  margin-top: 35px;
  padding-top: 23px;
  border-top: 1px solid var(--how-rule);
  scroll-margin-top: 88px;
}

.how-gallery-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.how-gallery-heading h2,
.how-section-heading h2 {
  font-size: clamp(1.55rem, 2.4vw, 1.95rem);
  line-height: 1.2;
}

.how-view-all {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  color: var(--how-burgundy);
  font-size: 0.8rem;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.how-view-all:hover {
  color: #7b3445;
}

.how-view-all .lucide {
  width: 15px;
  height: 15px;
}

.how-template-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  gap: clamp(12px, 3vw, 38px);
}

.how-template-item {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  text-align: center;
}

.how-template-preview {
  display: grid;
  width: clamp(58px, 7vw, 96px);
  aspect-ratio: 8 / 25;
  place-items: center;
}

.how-template-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.how-template-name {
  color: var(--how-ink);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.35;
}

.how-template-error {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  border: 1px solid var(--how-rule);
  color: var(--how-muted);
  font-size: 0.7rem;
  text-align: center;
}

.how-sample-status {
  margin: 12px 0 0;
  color: #8b332f;
  font-size: 0.78rem;
  text-align: center;
}

.how-section-heading {
  margin-bottom: 13px;
}

.how-faq-list {
  border-top: 1px solid var(--how-rule);
}

.how-faq-list details {
  border-bottom: 1px solid var(--how-rule);
}

.how-faq-list summary {
  position: relative;
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 4px;
  color: var(--how-burgundy);
  cursor: pointer;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 1rem;
  font-weight: 500;
  list-style: none;
}

.how-faq-list summary::-webkit-details-marker {
  display: none;
}

.how-faq-list summary::after {
  color: #94754e;
  content: '+';
  font: 400 1.2rem/1 'DM Sans', Arial, sans-serif;
}

.how-faq-list details[open] summary::after {
  content: '−';
}

.how-faq-list details p {
  max-width: 850px;
  margin: 0;
  padding: 0 34px 15px 4px;
  color: var(--how-muted);
  font-size: 0.84rem;
  line-height: 1.6;
}

.how-cta {
  margin: 34px auto 0;
  padding: 22px 12px 8px;
  border-top: 1px solid var(--how-rule);
  text-align: center;
}

.how-cta h2 {
  font-size: clamp(1.55rem, 2.5vw, 1.95rem);
  line-height: 1.25;
}

.how-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 15px;
}

.how-cta-primary,
.how-cta-secondary {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 0 17px;
  border: 1px solid var(--how-burgundy);
  border-radius: 3px;
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease;
}

.how-cta-primary {
  background: var(--how-burgundy);
  color: var(--how-ivory);
}

.how-cta-primary:hover {
  background: #652537;
}

.how-cta-secondary {
  background: transparent;
  color: var(--how-burgundy);
}

.how-cta-secondary:hover {
  background: #eee5d9;
}

.how-footer {
  position: relative;
  z-index: 0;
  padding: 13px 18px;
  border-top: 1px solid rgba(245, 239, 229, 0.16);
  background: var(--how-burgundy);
  color: var(--how-ivory);
}

.how-footer-inner {
  display: flex;
  width: min(100%, 1100px);
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-inline: auto;
}

.how-footer-brand {
  color: var(--how-ivory);
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
}

.how-footer p {
  margin: 0;
  color: rgba(247, 243, 235, 0.8);
  font-size: 0.69rem;
}

@media (max-width: 760px) {
  .how-it-works-page::before,
  .how-it-works-page::after {
    width: 74px;
    background-size: 100vw 100vh;
  }

  .how-it-works-page .how-main {
    padding: 27px 14px 34px;
  }

  .how-content {
    padding-inline: 12px;
  }

  .how-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 20px;
  }

  .how-step {
    padding: 4px 14px 5px;
  }

  .how-step:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .how-step:nth-child(even) {
    padding-right: 0;
  }

  .how-step:nth-child(n + 3) {
    padding-top: 15px;
    border-top: 1px solid var(--how-rule);
  }

  .how-step p {
    font-size: 0.78rem;
  }

  .how-template-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 22px;
  }

  .how-template-preview {
    width: clamp(53px, 12vw, 76px);
  }
}

@media (max-width: 480px) {
  .how-it-works-page::before,
  .how-it-works-page::after {
    width: 42px;
    opacity: 0.72;
  }

  .how-heading {
    margin-bottom: 22px;
  }

  .how-subtitle {
    max-width: 290px;
    margin-inline: auto;
    font-size: 0.88rem;
  }

  .how-steps {
    column-gap: 10px;
  }

  .how-step h2 {
    font-size: 0.98rem;
  }

  .before-start {
    margin-top: 17px;
    padding-top: 10px;
    font-size: 0.74rem;
  }

  .how-templates,
  .how-faq {
    margin-top: 27px;
    padding-top: 19px;
  }

  .how-gallery-heading {
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 15px;
  }

  .how-gallery-heading h2 {
    font-size: 1.48rem;
  }

  .how-view-all {
    gap: 3px;
    font-size: 0.69rem;
    white-space: nowrap;
  }

  .how-template-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 18px;
  }

  .how-template-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .how-template-preview {
    width: 58px;
  }

  .how-template-name {
    font-size: 0.74rem;
  }

  .how-section-heading h2 {
    font-size: 1.52rem;
  }

  .how-cta {
    margin-top: 26px;
    padding-top: 20px;
  }

  .how-cta-actions {
    gap: 8px;
  }

  .how-footer-inner {
    flex-direction: column;
    gap: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .how-it-works-page *,
  .how-it-works-page *::before,
  .how-it-works-page *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}